@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root{
    --blue: #0e7a9e;
    --yellow: #ffc832;
    --grey: #f6f6f6;
}

/** ESTILOS GENERALES PARA MOBILE FIRST ( por debajo de 768 px ) **/

body {
    background-color: #FFFFFF;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/** COLORES DE DIVERSOS BACKGROUNDS **/

.headerbg {
    background-color:#D8E6EA;
}

.bluebg {
    background-color: var(--blue);
}

.lightgreybg {
    background-color: var(--grey);
}

/** TEXTOS HEADERS Y PARAGRAPHS - Organización en tamaños y pesos de cada uno de los encabezados y cuerpo del texto.**/

h1,
h2,
h3,
h4 {
    font-family: Nunito, sans-serif;
    margin: auto;
}

h1 {
    font-size: 36px;
    font-weight: 600;
}
h2 {
    font-size: 26px;
    font-weight: 500;
}
h3 {
    font-size: 22px;
    font-weight: 400;
}
h4 {
    font-size: 17px;
    font-weight: 700;
}

p{
    font-family: 'Libre Caslon Text', serif;
    text-align: justify;
    text-justify: inter-word;
    font-size: 16px;
    margin-top:0;
}

/** LINKS STYLES **/

a {
    text-decoration: none; /* elimina el subrayado por defecto de los links */ 
}

/** PARTE SUPERIOR DEL HEADER (ENCIMA DEL MENU PRINCIPAL) .top  **/

.top{
    display:flex;
    align-items: center;
}

#logo{                  /* define estilos del contenedor del logo */
    padding:20px 0;
    height:60px;
    flex:2;
}

header img {          /* estilos para el logotipo en el header */ 
    top: 20px;
    height: 60px;
    z-index: 4;
}

figure{
    margin:0;           /* reseteo a 0 de posible margen en la etiqueta figure */
}

/** NAVIGATION STYLES **/

.hamburguer{                /* define estilos para el menu de hamburguesa, su link y hover */
    flex: 2;
    margin-right:2px;
    text-align: end;  
}

.hamburguer a{                      /* estilos para el lonk del icono del menu movil y su hover */
    color: var(--blue);             /* uso de variable de color */
    width:40px;
    height:40px;
    padding:10px;
    background-color: transparent;
    font-size: x-large;
    border: 2px solid var(--blue);
    border-radius: 5px;
}
.hamburguer a:hover{
    color:#fff;
    border-color: #fff;
    background-color: var(--blue);
}

.navbarresponsive{           /* LA CLASE .navbarresponsive se aplica al menu en modo MOVIL  (por javascript se cambiará esta clase a .navbar en resoluciones por encima de 768 px */  
    display:none;
    width:100%;
    height:0;
    background-color: var(--blue);
    text-align: center;
    font-size: 18px;  
    transition: 0s;
    overflow-x: hidden;
    position: fixed;
    top:0;
    left:0;
    transition: 0.5s;
    padding-top:100px;
}

.navbarresponsive .subnav{      /** .subnav se refiere al primer nivel de menu **/
    margin-bottom:20px;
}

.navbarresponsive .subnav-content{   /** .subnav.content hace refeerencia al segundo nivel del menu **/
    display:none;
    height:0;
}

.navbarresponsive .subnav:hover .subnav-content{
    display:block;
    height: auto;
    transition: 0.5s;
}

.navbarresponsive .subnav:hover > a{
    background-color: #fff;
    color: var(--blue);
}

.closebtn{                  /* botón de cerrar menu movil ( X ) , posiciones y estilos */
    position:fixed;         
    width:30px;
    height:30px;
    top: 60px;
    right:50px;
    color:#FFF;
    z-index: 20;
}

.closebtn img{
    position:fixed;
    width:30px;
    height:30px;
}

.subnavbtn {            /* estilos de los elementos de menu  */
    border: none;
    outline: none;
    color: #fff;
    padding: 2px 0;
    background-color: inherit;
    font-family: Nunito, sans-serif;
    margin: 2px 0;
    font-weight: 600;
}

.subnavbtn:hover{
    color: var(--blue);
    background-color: #fff;
}

.subnav-content {       /* estilos para elementos de menu de segundo nivel */
    font-family: Nunito, sans-serif;
    font-weight: 600;;
    padding-inline-start:0; /** elimina los 40 px predefinidos en User Agent Stylesheet **/
    margin:2px;
}
.subnav-content li{
    margin:5px 0;
    padding: 2px;
}

/** PAGE CONSTRUCTION (GENERAL) - Estilos generales para secciones, y los principales elementos comunes a todas las paginas, mensaje principal y separadores **/

.container {                /* contenedor general para la mayoria de secciones del sitio web */
    margin: auto;
    max-width: 1200px;
    width: 90%;
    min-width:280px;
}

section {
    margin: 20px auto;
}

#section1,
#section2,
#section3 {
    margin-top: 0;
    margin-bottom: 20px;
}

#section3{
    padding-top: 20px;
}

.image-responsive {
    max-width: 800px;
    width: 100%;
}

#message {
    padding-bottom: 15px;
    font-family: Nunito, sans-serif;
    text-align: center;   
}

#message p, #message h1{
    max-width:90%;
    width:800px;
    margin:auto;
    padding-top:20px;
    color:white;
    font-family: Nunito, sans-serif;
}

#message h1{
    font-size: 26px;
}

.separator{
    background-color: var(--yellow);
    min-height:20px;
    width:100%;
    margin-bottom:20px;
}

.separator h3{
    margin-left:10px;
}

/** WRAPPERS **/

.wrapper {               /* estilo (mobile first) de los contenedores .wrapper en modo flex y column. Como norma general cambiará a row en Desktop */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap:20px;
}

#homelogin .wrapper:first-child, #register .wrapper {
    justify-content:flex-start;
    flex-direction: row;
    gap:2px;
}

#login .wrapper:first-child{
    width:100%;
}

.col1 {             /* tamaños de los elementos flex */
    flex: 1;
}
.col2 {
    flex: 2;
}
.col3 {
    flex: 3;
}
.col4 {
    flex: 4;
}
.col5 {
    flex: 5;
}
.col6 {
    flex: 6;
}

/** PÁGINA EL CLUB **/

#elclub figure{
    padding:0 10px;
}

/** HOME PAGE - BLOQUE CON DOS "TARJETAS" DE ACTIVIDADES Y DEPORTES DESTACADOS **/

.cardcontent{
    padding: 16px;
}
.cardcontent h2{
    color:#fff;
}

.leftalign{
    text-align: left;
}

.rightalign{
    text-align: right;;
}

.card1 {
    background-image: url("../img/jpg/nathanael-desmeules-mWPdKMZPEpU-unsplash.jpg");
    background-size: cover;
    background-position: center;
}

.card2 {
    background-size: cover;
    background-image: url("../img/jpg/michal-parzuchowski-5U7i1R8V9yA-unsplash.jpg");
    background-position: center;
}

/** ARTÍCULOS (NOTICIAS Y ELEMENTOS DE TIENDA) **/

article{
    gap:0 !important;        /* sobreescribe el "gap" definido en el .wrapper anteriormente */
    flex-direction: column;
}

/** NOTICIAS DESTACADAS - ESTILOS PARA LOS ARTÍCULOS, Y SU CONTENIDO Y LNKS **/

.articlecontent{
   padding:12px;
}

.articlecontent h4{
    border-bottom: 2px solid var(--blue);
}

.articlecontent p{
    margin-top:10px;
}

.readmore{
    color: var(--blue);
    font-weight: 500;
}

.readmore:hover{
    color: #fff;
    background-color: var(--blue);
}

.imgarticle{
    background-size: cover;
    background-position: center;
    min-height: 240px;
    transition: 0.5s;
}

.imgarticle:hover{
    filter: brightness(0.5);
    transition: 0.5s;
}

.image1{
    background-image: url("../img/jpg/fitsum-admasu-oGv9xIl7DkY-unsplash_800x600.jpg");    /* imágenes de fondo de los artículos */
}
.image2{
    background-image: url("../img/jpg/paul-green-gOHfFgwyDNM-unsplash_800x600.jpg");
}
.image3{
    background-image: url("../img/jpg/matthieu-petiard-Pf6e3o0GL4M-unsplash_800x600.jpg");
}

/* ESTILOS PARA FORMULARIOS DE LOGIN Y REGISTRO (EN HOME Y PAGINA DE SOCIOS) */

#login *, #register *, #homelogin *, #infosocios *{
    font-family: Nunito, sans-serif;
}

#login .wrapper{
    padding-bottom: 10px;
}
   
#homelogin h4, #register h4, #socios h4, #register h3, #infosocios *{
    color: var(--blue);
}
#homelogin h4 span{
    font-size: 1.5em;
}

#login{
    margin-bottom: 0;
}

#socios ul, #infosocios ul{
    margin: 20px 0;
    padding: 0;
    width: 100%;
}

#homelogin li, #socios li, #infosocios li{
    list-style-type: none;
    margin-bottom: 10px;
}

#homelogin li > input, #socios li > input {
    width: 99%;
    margin:2px 0;
    height: 40px;
    border: 1px solid #DDDDDD;
    border-radius: 5px;;
}

#socios label, #loginform label{ 
    font-weight: 700;
    margin: auto;
    color: #000;
}

.rightarrow{
    max-height: 50px;
    display: inline-block;
}

.submitbutton{
    margin: 20px;
}

.submitbutton a, .submitbutton input {
    padding:5px 20px;
    background-color: var(--yellow);
    color:#000;
    height:40px;
    border: 2px solid #000;
    border-radius: 5px;
    font-weight: 700;
}

.submitbutton a:hover, .submitbutton input:hover{
    background-color: var(--blue);
    color: var(--yellow);
    cursor:pointer;
}

.submitbutton a:active , .submitbutton input:active{
    background-color: var(--grey);
    color: #000000;
}

#register h3,
#register h4,
.registercontent,
.submitbutton{
    text-align: center;
}

#register h4 span{
    font-size: 1.8em;
    margin-bottom:20px;
}

.registercontent .wrapper{
    width:80%;
    margin:auto;
}

#socios #register{
    padding: 15px 0;
    margin-bottom: 10px;
}

#register p {
    padding: 10px 20px;
}

#socios li fieldset{
    margin:2px 0;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    background-color: field;
}

#socios li > #radiobtnlegal{
    width: auto;
}

/** PÁGINA TIENDA - MENU (WRAPPER ROW / COL - A LA IZQUIERDA EN DESKTOP, ENCIMA DE LOS ITEMS EN MOVIL ) **/

#catmenu *{
    padding: 0;
    margin:0;
    list-style: none;
}

#catmenu li a{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding:4px 6px;
}

#catmenu li:hover, #infosocios li:hover{
    background-color: var(--blue);
}
#catmenu li:hover a h4, #catmenu li:hover a p, #infosocios li:hover a{
    color:#FFF;
}

#catmenu h4, #catmenu p{
    color: var(--blue);
    font-size: 1.2em;
}

#catmenu .separatorblock{
    height: 20px;
    background-color: var(--yellow);
    margin: 20px 0;
}

/** CONTENIDO Y ARTÍCULOS DE LA TIENDA **/ 

.breadcrumb{
    padding:5px;
    margin-bottom: 20px;
}

.breadcrumb a, .breadcrumb span{
    color: var(--blue);
}

.breadcrumb a:hover{
    color:#000;
}

.shop{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom:20px;
}

.shopitem, .itemdetail{
    flex:100%;
    margin-bottom:20px;
}

.itemdetail:last-child p{
    font-family: Nunito, sans-serif;
    text-align: center;
    padding:10px 0;
}

.itemdetail:last-child a{
    font-family: Nunito, sans-serif;
}

.shopimage:hover{
    filter: brightness(0.6);
    transition:0.4s
}

.shopimage{
    width:100%;
    height: auto;
    transition:0.4s
}

.shoptitleprice{
    display:flex;
    flex-direction: row;
    min-height: 50px;
    margin: 0 10px;
}

.shoptitleprice h4:first-child{
    margin-left: 0;
    max-width: 75%;
}
.shoptitleprice h4:last-child{
    margin-right: 0;
    color: var(--blue);
}

.shop .shopdescription{
    margin: 4px 10px 10px 10px;
}

/** SHOP PAGINATION **/

#pagination .wrapper {
    width: 70%;
    margin: 20px auto 50px auto;
    justify-content: space-between;
    flex-direction: row;
    padding: 10px 0;
}

#pagination a {
    vertical-align: middle;
    text-decoration: none;
    font-weight: 700;
    color: var(--blue); 
    font-family: Nunito, sans-serif;
}

#pagination a:hover,
#pagination a:focus {
    color: #000;
}

.pagenumber {
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
}

/** FOOTER **/

footer {
    padding: 20px 0;
    border-top: 4px solid var(--yellow);
    font-family: Nunito, sans-serif;
}

footer ul{
    padding:0;
    margin:0;
}

footer li{
    list-style-type: none;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
}

footer nav li{
    padding:5px 0;
}

.footernavbtn {
    color: var(--yellow);
    padding: 2px 2px;
}

.legal li, .legal .footernavbtn{  
    color: var(--grey);
}

.footernavbtn:hover, .legal a:hover, address a:hover {
    color: #000;
    background-color: var(--yellow);
}

footer .logo {
    width:50%;
    margin:auto;
    filter:brightness(0) invert(100);
}

footer figure{
    text-align: center;
}

footer img{
    max-height: 90px;
}

address{
    margin: 10px 0;
}

address, address *{
    color:  var(--grey);
    text-align: center;
}

.socialicons a{
    padding-top: 10px;
}

.socialicons ul{
    margin: 20px auto;
    display:flex;
    flex-direction: row;
    width:250px;
    justify-content: space-around;
}

.socialicons li{
    background-color: var(--yellow);
    width:40px;
    height: 40px;
    border:0 solid;
    border-radius: 5px;
}

.socialicons li:hover{
    background-color: var(--grey);
}

.socialicons li:active{
    background-color: #DDDDDD;
}

.socialicons li i{
    color: var(--blue);
    padding:7px 0;
    font-size: 1.5em;
}

.legal ul{
    text-align: center;
    margin-top: 20px;
}

.legal li {
    display: inline;
    padding: 0 10px;
    border-right: 2px solid var(--yellow);
    font-size: 0.9em;
}

.legal li:last-child{
    border-right: none;
}

/** MEDIA QUERIES PARA TABLETS POR ENCIMA DE 768px**/

@media only screen and (min-width: 768px) {
    header {
        height: 300px;
    } 

    .headerbg {
        background-image: url("../img/jpg//jeff-isaak-p7nrRdMDebM-unsplash_1920x1080.jpg");
        background-size: cover;
        background-position: center;
    }

    #logo{
        height:80px;
    }

    header img {
        top: 20px;
        height: 80px;
        z-index: 4;
    }

    main {
        position: relative;
        top: -80px;
        margin-bottom: 20px;
    }

    .hamburguer{
        display:none;
    }

    .separator{
        width: 70%;
        max-width:440px;
    }

    .shop{
        flex-direction:row;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .shopitem{
        max-width:24%;
    }

    .itemdetail{
        max-width:45%;
    }

    #pagination .wrapper {
        width: 50%; 
    }

    footer{
        margin-top: -80px;
    }

    address{
        text-align: left;
        margin-left:5px;
    }

    /** NAVIGATION TABLET AND DESKTOP **/

    nav {
        text-align: center;
        width:100%;
        margin-bottom: 10px;
    }

    .navbar {
        overflow: hidden;
        background-color: #fff;
        display:inline-flex;
        width:100%;
    }
    
    .navbar .closebtn{
        display:none;
    }

    .navbar li a {
        float: left;
        font-size: 14px;
        color: var(--blue);
        text-align: center;
        padding: 14px 0;
        text-decoration: none;
    }
    
    .subnav {
        overflow: hidden;
        flex:6;
    }
    
    .subnav .subnavbtn {
        font-size: 16px;  
        border: none;
        outline: none;
        color: var(--blue);
        padding: 14px 0;
        background-color: inherit;
        font-family: Nunito, sans-serif;
        margin: 0;
        font-weight: 600;
        width: 100%;
        float: left;
    }

    .subnav-content {
        font-family: Nunito, sans-serif;
        font-weight: 600;
        display: none;
        position:absolute;
        top:170px;
        left:0;
        right:0;
        margin : auto; 
        width: 90%;
        max-width:1200px;
        z-index: 1;      
    }

    .subnav-content li:last-child{
        border-right:3px solid white;
    }

    .subnav:hover{
        background-color: var(--blue);
    }
    .subnav:hover a{
        color:#fff
    }

    .subnav:hover .subnav-content{
        display: inline-flex;
        justify-content: center;
        flex-direction: row;
    }

    .subnav-content .subnavbtn{
        color: #fff;
        width: 100%;
    }

    .subnav-content li {
        border-left:3px solid white;
        background-color: transparent;
        color: white;
        width:16.5%;
        list-style: none;
    }

    .subnav-content li a{
        width:100%;
        text-align: center;
        color: white;
        max-height: 30px;
    }

    .subnav-content li:hover{
        background-color: #FFF;
    }

    .subnav-content li:hover a{
        color: var(--blue);
    }

    footer nav li {
        text-align: left;
    }

    footer .logo, .socialicons ul{
        margin-left:0;
    }

/** MESSAGE TABLET AND DESKTOP STYLES **/

    #message {
        padding-bottom: 5px;
        font-family: Nunito, sans-serif;
        text-align: center;
        min-height: 180px;  
    }

    #message p{
        font-size: 1.1em;
    }

    #message h1{
        font-size: 36px;
    }

    .wrapper {
        flex-direction: row;
    }

    .title-inside{
        margin: -16px;
        }

    /** ORDER - Recoloca la posición de los elementos del wrapper en la página "elclub.html" según un orden deseado **/ 
    
    .order1{
        order: 1;
    }
    .order2{
        order: 2;
    }
    .order3{
        order: 3;
    }

}

/** MEDIA QUERIES - DETALLES ENTRE: 769px --> to 1023px  **/

@media only screen and (min-width: 769px) and (max-width: 1023px){

    #section2 > .wrapper{
        flex-direction: column;
    }

    .shopitem{
        max-width:48%;
    }

    .registerImage{
        width:70%;
        margin: auto;
        float: right;
    }
}

/** MEDIA QUERIES DETALLES DESKTOP POR ENCIMA DE 1024px**/

@media only screen and (min-width: 1024px){

    #loginform li input{
        max-width: 90%;
    }

    #socios #login .image-responsive{
        float:right;
        max-width:500px;
    }

    /** REGISTER SECTION **/
   
    #register{
        position:relative; /* necesario para recolocar los elementos del registro en modo desktop. */
    }

    #register h3, #register h4{
        text-align: left;
        filter: drop-shadow(1px 1px 2px var(--grey));
    }
        
    .registerImage{ /* modifica tamaño de imagen del registro en desktop */
        width:60%;
        margin-right:0;
        float: right;
    }
        
    .registercontent{  /* modifica posicion de este contenido  */
        position:absolute;
        top: 20px;
        left:0;
        width:66%;
    }

    .registercontent .wrapper{
        width:100%;
    }  
}
/** END OF STYLES CSS FILE **/