@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Playwrite+IT+Moderna:wght@100..400&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* COLORES
azul oscuro  #1e2b57; 
celeste      #74ACDF;
amarillo     #b8a974f3;
*/


* { box-sizing: border-box }

::selection {
    background-color: #74ACDF;
}

body, main {
    margin: 0;
    font-family: "Roboto", serif;
    }  

h1 {
    font-weight: 800;
    font-size: 2em;
    padding: 0.50em;
    text-align: center;
}

h2 {
    font-weight: 800;
    font-size: 1.50em;
    font-family: "Roboto", serif;
}

h3 {
    font-size: 1em;
    font-weight: 600;
}

#escarapela {
    max-width: 90px;
    height: auto;
}

#btn { 
    padding: 0.40em;
    margin-top: 1em;
    border-radius: 11px;
    font-weight: 600;
    color: white;
    background-color: #304283;
}   #btn:hover {background-color: #1e2b57;}
    #btn:active {background-color: #242f55;}


.vid-banner, .img-banner {
    position: relative;
    width: 100%;
    height: 100vh; 
    overflow: hidden;
}

.img-banner {
    background-size: cover;
    background-position: center;
}

.img-banner h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

/** HOME **/
    #home .background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;  
    }

    /* seccion de datos con img de fondo */
    #home .datos {
        background-image: url('../img/banner_la_boca.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        height: auto;
        min-height: 100vh; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #home .card {
        text-align: center;
        background-color: #b8a974f3;
        color: white;
        font-weight: 600;
        border-radius: 10px;
        margin: 2em;
        padding: 1.50em;
    } #home .card:hover {background-color: #978b5df3;}

    /* seccion de 'diversidad arg' */
    .diversidad div {
        height: auto;
        min-height: 290px;
        max-width: 260px;
        background-size: cover;
        background-position: center;
        border-radius: 13px;
        margin: 20px;
    } #home .diversidad img:hover {opacity: 80%;}
            
    .diversidad p {
        opacity: 60%;
        color: white;
        font-family: "Roboto";
        font-weight: 800;
        font-size: 2em;
        text-align: center;
    } .diversidad div:hover p { opacity: 100%;}

    #nieve { background-image: url('../img/nieve.png'); }
    #montaña { background-image: url('../img/montañas.png'); }
    #lagos { background-image: url('../img/lagos.png');}
    #playas { background-image: url('../img/playa.png'); }


/** HISTORIA **/

    /* imagen de fondo en las franjas primera y tercera */
    .poblamiento { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/historia-pueblos-originarios.png);}
    .poblamiento:hover{ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/historia-pueblos-originarios.png);}
    .independencia { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/historia-primera-junta.png);}
    .independencia:hover{ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/historia-primera-junta.png);}
    .independencia, .poblamiento {
        min-height: 450px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
    }

    #historia .banner, #ambiente .banner{
        width: 100%;
        min-height: 500px;
        background-color: #1e2b57;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
}

/** CULTURA **/
    .fondo-destacadas {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: auto;
        max-height: 580px;
        width: auto;
    }

    .visuales .fondo-destacadas { background-image: url(../cultura/img/banner-cultura-visuales.png); }
    .musicales .fondo-destacadas { background-image: url(../cultura/img/banner-cultura-musica.png); }
    #destacadas { background-image: url(../cultura/img/banner-cultura-destacadas.png); }

    .visuales p, .musicales p {
        margin-bottom: 30px;

    }


    
    #cultura .background-video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }
    
    #cultura .vid-banner h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        padding: 0.5em 1em;
        border-radius: 10px;
    }
    
    /* costumbres arg */
    .costumbres {
        display: flex;
        justify-content: center; 
    } 

    .costumbres img  {
        max-width: 140px;
    }

    .costumbres .izquierda div, .costumbres .derecha div {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 0.90em;
        padding-bottom: 3em;
    }   .costumbres .derecha img { order: 2 }
        .costumbres .derecha p { order: 1; }


    /* seccion de atajos al final para ir a subpaginas de cultura (gastro/festiv) */
    .ir-subpaginas {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        text-align: center;
        gap: 2em;
    }

    .ir-subpaginas img {
        border-radius: 10px;
    }
    
    .ir-subpaginas div {
        position: relative;
        text-align: center;
    }
    
    .ir-subpaginas h3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 1.5em;
        font-weight: bold;
        padding: 0.2em;
        border-radius: 5px;
        opacity: 0.70;
    } .ir-subpaginas div:hover h3 {opacity: 1;}


    /* GASTRONOMÍA */
    #gastronomia .img-banner {
        background-image: url('../cultura/img/gastronomia-banner.png');
        background-attachment: fixed;
    }

    /* seccion comidas tradicionales */
    .comidas-tradi div {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .comidas-tradi img {
        width: 50%; 
        height: auto;
    }
    
    .comidas-tradi p {
        width: 50%; 
        padding: 10px; 
        font-weight: 500;
    }

    /* seccion de paseos gastronomicos */
        .paseos {
            display: flex;
            justify-content: center; 
        } 
  
        .paseos img  {
            max-width: 280px;
        }

    .paseos .izquierda div, .paseos .derecha div {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 0.90em;
        padding-bottom: 3em;
    }   .costumbres .derecha img { order: 2 }
        .costumbres .derecha p { order: 1; }
        
    /* FESTIVIDADES */
    #festividades #banner-principal {
        background-image: url('../cultura/img/festividades-banner.png');
        background-attachment: fixed;
    }

    #banner-inferior {
        width: 100%;
        height: auto;
        min-height: 600px;
        background-image: url('../cultura/img/festividades-banner-inf.png');
    } #banner-inferior:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../cultura/img/festividades-banner-inf.png');}

    #festividades .fechas p {
        margin-bottom: 2em;
}


/** TURISMO **/
    #turismo .img-banner {
        background-image: url(../turismo/img/turismo-banner-sup.png);
        background-attachment: fixed;
        height: 150vh; 
    }

    #turismo .categorias div {
        height: 570px;
        width: 460px;
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 2em;
    }       

    #ir-verano { background-image: url(../turismo/img/turismo-ban-ver.png);}
    #ir-verano:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../turismo/img/turismo-ban-ver.png); }

    #ir-invierno { background-image: url(../turismo/img/turismo-ban-inv.png);}
    #ir-invierno:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../turismo/img/turismo-ban-inv.png);}
    
    #ir-todo { background-image: url(../turismo/img/turismo-ban-todo.png);}
    #ir-todo:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../turismo/img/turismo-ban-todo.png);}

    #conoce-inv, #conoce-td, #conoce-ver {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        width: 100%;
        height: 380px;
        background-size: cover;
    }

    #conoce-inv { background-image: url(../turismo/img/turismo-ban-inv2.png); }
    #conoce-inv:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../turismo/img/turismo-ban-inv2.png); }
    #conoce-td { background-image: url(../turismo/img/turismo-ban-todo2.png) }
    #conoce-td:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../turismo/img/turismo-ban-todo2.png); }
    #conoce-ver { background-image: url(../turismo/img/turismo-ban-ver2.png) }
    #conoce-ver:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../turismo/img/turismo-ban-ver2.png); }
    
    #consejos {
        background-position: center;
        background-size: cover;
        background-image: url(../turismo/img/turismo-banner-inf.png);
    }

    #consejos .derecha img { order: 2; }
    #consejos .derecha p { order: 1; }


    /* INVIERNO */
    #inv-banner-principal {
        background-image: url(../turismo/img/banner-invierno.png);
        background-attachment: fixed;
    }

     /* VERANO */
     #ver-banner-principal {
        background-image: url(../turismo/img/banner-verano.png);
        background-attachment: fixed;
     }

     /*  TODO EL AÑO */
    #td-banner-principal {
    background-image: url(../turismo/img/banner-todo.png);
    background-attachment: fixed;
    }

/*  GUIA DE TURISMO */
    #guia .img-banner {
        background-image: url(../turismo/img/banner-guia.png);
        background-attachment: fixed;
    }

    .consejos p {
        margin-bottom: 1.20em;
    }

    #guia li {
        margin-bottom: 0.30em;
        margin-left: 1em;
    }


/* AMBIENTE */
    #ambiente p, #ambiente ul, #ambiente h3 {
        margin: 1em;
    }

/* CONTACTO */
#contact {
    padding: 25px;
    height: 890px;
    width: 100%;
    background-image: url(../img/contacto-fondo.JPG);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center
}

        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .input-error {
            border-color: #e74c3c !important;
            background-color: #fdf2f2;
        }

        #successMessage {
            transition: all 0.3s ease-in-out;
        }

        .hidden {
            display: none;
        }
        
    
/* JUEGOS */
#juego { 
    min-height: 220vh; 
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url(../juegos/img/fondo.png);
    background-size: cover;  
    background-repeat: no-repeat;
    background-position: center;
}

.cartaMemotest {
  width: 80px;
  min-height: 80px;
  background-color: #74ACDF;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:10px;
}

.cartaMemotest img {
  width: 90%;
  display: none;
}

.cartaMemotest.descubierta img {
  display: block;
}

/* ESTILOS PARA DAR VUELTA LA FICHA */

.cartaMemotest {
  width: 80px;
  height: 80px;
  perspective: 800px;
}

.carta-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s; /* suavizar el giro */
  transform-style: preserve-3d; /* efecto tridimensional para las dos caras */
}


.cartaMemotest.descubierta .carta-inner {
  transform: rotateY(180deg);
} /* cuando se agrega la clase .descubierta (con js), se rota 180° para mostrar el dorso */

.carta-frente, .carta-dorso {
  position: absolute; /* permite q se superpongan */
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
}

.carta-frente {
  background-color: #1e88e5;
}

.carta-dorso {
  transform: rotateY(180deg);
  background-color: #1e88e5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carta-dorso img {
  width: 90%;
}




/*///////////   MOBILE  ////////////*/

@media (max-width: 768px) {


     #home .datos {
        background-attachment: scroll;
        min-height: 150vh; 
   
    }


    /* CULTURA */
    .costumbres {
        display: block;
    } 

    .costumbres .derecha img { order: 1 }

    .costumbres .izquierda div, .costumbres .derecha div {
        display: block;
    } 

    .costumbres img  {
        max-width: 240px;
    }

    #gastronomia .img-banner {
        background-attachment: scroll;
        background-size: contain
    }

     #festividades #banner-principal {
        background-attachment: scroll;
        background-size: contain
      }

      
    #banner-inferior {
        padding: 50px;
        min-height: 900px;
        /* background-image: url('../cultura/img/festividades-banner-inf.png'); */
    } 

    /*  TURISMO */
        #turismo .img-banner {
        height: 190vh; 
        background-attachment: scroll;
    } 

    #turismo .categorias div {
        background-attachment: scroll;
        /* background-size: cover; */
        background-size: contain;
        text-align: center;
        max-height: 400px;
        margin: 0;
        flex-direction: column;
        color: white;
        font-size: 1em;
    }     
    
    #inv-banner-principal, #ver-banner-principal, #td-banner-principal {
        background-attachment: scroll;
        background-size: contain
    }

    #consejos img {
        max-width: 100px;
        max-height: 100px;
    }

    #guia .consejos, #guia .telefonos, #guia .lunfardo {
        margin-left: 2em;
        margin-right: 2em;
    }

    #guia .img-banner { 
        background-attachment: scroll;
        background-size: contain
    }
        

    .ir-subpaginas h3 {
        font-size: 1em;
    }

    /*  JUEGO MEMOTEST */
    .cartaMemotest {
    width: 60px;
    height: 60px;
    margin:5px;
    }

}