/* VARIABLES */
:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #ffc107;
    --secundario: #0097a7;
    --gris: #757575;
    --grisClaro: #DFE9F3;
    --verde: #006600;
    --verdeClaro: #25D366;
    --grisOscuro: #3b3b3b;
    --verdeAna: #005346;
    --verdeAnaclaro: #008489;
} 

/* ESTILOS GLOBALES */
html { 
    font-size: 62.5%; /*tamaño de letra*/
    box-sizing: border-box; /*tamaño de caja y evita que se salga*/
    scroll-behavior: smooth;
}


*, *:before, *:after {
    box-sizing: inherit;
  } 

body {
    font-size: 16px;
    font-family: "Krub", sans-serif; /*si el navegador no admite la primera, prueba con la segunda*/
    background-image: linear-gradient(to top, var(--grisOscuro) 0%, var(--grisClaro) 100% ); /*imagen de fondo c/ parametros degradé*/
    scroll-behavior: smooth;
} 

/* TIPOGRAFÍA */
h1, h2, h3 {
    text-align: center;
}

h1 {
    font-size: 4rem;
    color: var(--oscuro);
    padding: 2px; /*margenes dentro del background*/
    max-width:100%;
    margin-right: 40rem;
}

h2 {font-size: 5rem;}
h3 {font-size: 1.8rem;}


/* NAVEGACION PRINCIPAL */

/* MENU DESPLEGABLE */

.nav-links {
    list-style: none; /*Quita los puntitos de la lista*/
    display: flex; /*Items en forma horizontal*/
    gap: 20px; /*Espacio entre cada enlace*/
}

.nav-links li a {
    text-decoration: none; /* Quita el subrayado de los enlaces*/
}

/*Botón de menú hamburguesa, oculto en escritorio*/
.menu-toggle {
    display:none; /* Oculto por defecto (visible solo en mobile)*/
    font-size: 40px; /*Tamaño grande del ícono*/
    background: none; /*sin fondo*/
    border: none; /*Sin borde*/
    color:var(--blanco); /* Color ícono*/
    cursor:pointer; /*Cambia el cursor al pasar por encima*/
}


/*SCROLL snap (para esto esta discriminado lo de ilustracion*/
.nav-background, .nav-background-paginas {
    background-color:#004338;
}
.nav-background-paginas {
    margin-bottom: 2rem;/*espacio en la parte inferior*/
}

.navegacion-principal {
    display: flex;/*para armar tablas dentro de la caja*/
    flex-direction:column;/*como colocar los objetos*/
    align-items: center; 
}

.navegacion-principal a {
    color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem;/*espacio alrededor de un elemento*/
}

.navegacion-principal a:hover {/*cambia color al pasar cursosr*/
    background-color: var(--gris);
    color: var(--oscuro);
    transition: all 0.3s ease-in-out;  /* P/ suavizar el cambio*/
}

.scroll-indicator {
  position: absolute;
  bottom:auto;
  left: 90%;
  transform: translateX(-50%);
  font-size: 6rem;
  animation: bounce 2s infinite;
  color: var(--oscuro); /* O cualquier color que prefieras */
  z-index: 1000;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(10px);
  }
  60% {
    transform: translateX(-50%) translateY(5px);
  }
}

/* IMÁGENES */
.alineado {
    display: flex; /*divide en 2 bloques*/
    align-items: center; /*para que quede en el centro verticalmente*/
}

.imagen-fondo {
    background-image: url(../img/hero.jpg); 
    background-repeat: no-repeat; 
    height:auto; 
    opacity: 0.95;
}

img {
    position: relative;
    height: 150px;
    display: flex;
    text-align: left;
    justify-content: left;
    margin-right:auto;
    margin-bottom: 2rem;
    mix-blend-mode: multiply;
}

.imagen {
    text-align: center;
    height: 150px;
}

.ilustracion {
    border-radius: 15px;
    height: 500px;
    width: 50%; /*Ajusta el tamaño de la imagen*/
    max-width: 500px; /*Limita el tamaño máximo de la imagen*/
}

.img-texto {
    display: flex;
    flex-direction:row; /*los textos se disponen en fila*/
    align-items:center; /*Alinea el contenido en el centro*/
    gap: 100px; /*Espacio entre la imagen y el texto*/
    margin-bottom:10%; /* Para espacio de abajo entre imagenes*/
    margin-left: 10%;
}

/* SECCIONES */

.texto {
    display: flex;
    flex-direction: column; /* Pone al texto uno arriba del otro*/
}

.texto-medio {
    display: flex;
    flex-direction: column; /* Pone al texto uno arriba del otro*/
    margin-right: 10%;
}

.leyenda {
    font-size: 5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    font-style: italic;
}

.color {
    color: var(--grisOscuro);
}


/*ANIMACION PAGINA PRINCIPAL*/

.animado{
    opacity: 0;
    transition: all 1s;} /*transición suave al cambio de propiedad del elemento*/

/*en este caso, el elemento se va hacia abajo para aparecer hacia arriba*/
.transform_left{transform: translateX(60%);} /*valor con el eje X horizontal*/ 
.transform_up{transform: translateY(20%);}/*un transform con el valor translate con el eje vertical Y*/
.transform_right{transform: translateX(-60%);}

/*clase que va a permitir volver al estado natural al elemento animado*/
.aparece{opacity: 1; /*0 no se nota y un 1 es su opacidad natural*/
        transform: none;
    } /*para quitar el traslado*/ 


.servicio {
    width: 50%;
    max-width: 1200px;
    height: 430px;
    display: flex;
    flex-wrap: wrap; /* para que si no caben en una misma linea, se muevan a la siguiente*/
    justify-content:center;
    margin:auto; 
}

/* CONTACTO */

.espacio-contacto {
    margin:20% 5% 30% 5%;
}

.warnings {
    width: 200px;
    text-align: center;
    margin: auto;
    background-color: #fe1717;
    color:var(--blanco);
    font-family:'Roboto', sans-serif;
    margin-top: 20px;
}

.error {
    background-color: rgb(185, 0, 0);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
    border-radius: 1rem;
}

.correcto {
    background-color: rgba(3, 141, 15, 0.925);
    text-align: center;
    padding: 1rem;
    color: var(--blanco);
    text-transform: uppercase;
    border-radius: 1rem;
}

.fondo_contacto {
    background-image: url(../img_mi_historia/descarga3.jpg);  
    height:100%;
    background-repeat: repeat;
    opacity: 0.95;
}

.formulario {
    background-image: linear-gradient(to top, var(--oscuro) 0%, var(--grisClaro) 100% ); 
    width: min(60rem, 100%); 
    margin: 0 auto; 
    padding: 2rem;
    border-radius: 1rem;
}

.formulario fieldset {
    border:none; 
}

.formulario legend {
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase; 
    font-weight: 700; 
    margin-bottom: 2rem; 
    color: var(--oscuro);
}

.campo {
    margin-bottom: 2rem;
}

.campo label {
    margin-bottom: .5rem;
    display: block; 
}

.campo input {
    width: 100%; 
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;
}

.mensaje input {
    width: 100%; 
    border: none;
    padding: 2rem;
    border-radius: .5rem;
}

.btn-wsp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--verdeClaro);
    border-radius: 50px;
    text-align:center;
    font-size: 0.5px;
    box-shadow: 0px 1px 15px var(--oscuro);
    z-index: 100;
}
.btn-wsp:hover {
    text-decoration: none;
}

/* PARA CASILLERO MENSAJE */

.sr-only { /* label invisible, solo para lectores de pantalla*/
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border:0;
}

.completar ::placeholder{ 
    padding: 1rem;
    font-family: "Krub", sans-serif;
}

.boton {
    display: flex;
    gap: 5%
}

.boton-enviar {
    background-color: var(--verdeAna);
    color: var(--blanco);
    margin-top: 3rem;
    text-transform: uppercase;
    flex-direction:column;
    justify-content:flex-end;
    width:auto;
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem 3rem;
    border-radius: .5rem;
    border: none;
}

.boton-borrar {
    background-color: var(--blanco);
    color: var(--verdeAna);
    margin-top: 3rem;
    text-transform: uppercase;
    flex-direction:column;
    justify-content:flex-end;
    width:auto;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight:bold;
    padding: 0.5rem 0.5rem;
    border-radius: .5rem;
    border: none;
}

.boton:hover {
    cursor: pointer;
}

.boton-limpiar:hover {
    cursor:pointer;
}

.campo textarea {
    height: 20rem;
    width: 100%;
}

.boton:disabled {
    background-color: var(--gris); /* Un color gris claro */
    color: var(--grisOscuro); /* Gris oscuro para el texto */
    cursor: not-allowed; /* Cambia el cursor para indicar que está deshabilitado */
    box-shadow: none; /* Opcional: eliminar sombra para el estado deshabilitado */
}

/* MI PERFIL */

.fondo_perfil {
    background: linear-gradient(45deg, #3b3b3b, #1c2b2d, #1a1f33, #1b0d1f);
    opacity: 0.90;
}

.linea-separador {
    border-bottom: 1px solid var(--oscuro);
}

.centro {
    text-align: center;
    font-size: 3rem;
}

.miHistoria {
    display: grid;
    grid-template-rows: repeat(2, auto); /* Hace 3 columnas, 2fr o auto: tamaño de imagen*/
    /*column-gap: 10rem; le da una separación al texto de la imagen*/
}

.miHistoria_imagen {
    grid-row: 1 / 2;
    width: 100%;
}

.contenedor .tarjetas{
    width: auto;
    height: 50rem;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    overflow:hidden;
    margin: 20px;
    text-align: center;
    transition: all 0.25s;
}

.contenedor .tarjetas:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

.contenedor .tarjetas img {
    width: 100%;
    height: 50%;
}

.contenedor .tarjetas h3 {
    font-weight: 600;
}

.contenedor .tarjetas p {
    padding: 0 2rem;
    font-size: 16px;
    font-weight: 300;
    text-align:start;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.contenedor .tarjetas a {
    font-weight: 500;
    text-decoration: 16px;
    color: var(--grisOscuro);
}

#textoAdicional2 {
    display: none; /* Ocultar el texto inicialmente */
    margin-top: 10px;
    color:var(--grisOscuro);
}
#textoAdicional3 {
    display: none; /* Ocultar el texto inicialmente */
    margin-top: 10px;
    color:var(--verdeAna);
}

/* FOOTER */

.footer {
    background-color: #002923;
}

.footer_logo {
    background-color: var(--blanco);
    height: 4rem;
    width: 15rem;
    margin-bottom: 2rem;
}

.footer_contenido {
    color: var(--blanco);
    padding: 30px 0; /*el primero para los margenes arriba y abajo; el segundo para separación c/ limite*/
    width: min(50%, 120);
    overflow: hidden; /*para ocultar contenido que se sale del contenedor*/
    margin: 0 auto; /**/
}

.footer_main {
    display:grid;
    gap: 0rem; /*separacion entre las distintas secciones*/
    justify-items: center;
}

.footer_links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /*separación entre los links*/
    text-align: center;
}

.footer_link {
    color: var(--blanco);
    text-decoration: none; /*elimina lo predeterminado*/
}

.footer_link:hover {
    text-decoration: underline; /*para al posicionarse sobre link, que esté animado, en este caso delineado*/
}

.footer_contactame {
    max-width: 250px;
    gap:0.1px;
    text-align: center;
}

.footer_conectar {
    margin-top: 1rem;
    background-color: var(--gris);
    color:#000000;
    font-weight: 500;
    padding: 1px;
    border-radius: 6px;
}

.footer_info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /*separación entre los links*/
    text-align: center;
}

.footer_info a { /*aplica sobre la etiqueta a*/
    color: var(--blanco);
    text-decoration: none;
}

/*.footer_social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blanco);
} para ícono link*/

.footer_copyright {
    margin-top: 1rem;
    margin-left: 10rem;
    margin-right: 10rem;
    border-top: 2px solid var(--blanco);
    text-align: center;
}

/*=== MEDIA QUERIE ====*/

/* Para Pantallas grandes */

@media (min-width: 768px) {
    .navegacion-principal {
        flex-direction: row;/*fila*/
        justify-content:end; 
    }
}

@media (min-width: 768px) {
    .servicios {
        display:flex; /*una cuadricula de una sola columna*/
        justify-content: center;
        text-align: center;
        gap: 1rem; /* Espacio entre los enlaces */
    }

    .contenedor .tarjetas img {
        height: 35%;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .cont2 {
        max-width: 120rem; 
        margin: 0 auto 32%;
        overflow-x: hidden; /* lo usé para resolver problema de animación que rompe margen del contenedor y se mueve pantalla*/
    }
    .sombra {
        -webkit-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
        -moz-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
        box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
        background-color: var(--grisClaro);
        padding: 2rem;
        border-radius: 1rem; 
    }
    .presentacion {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .contenedor-campos {
        display:grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows:auto;
        column-gap: 1rem; 
    }    
    .campo:nth-child(3),
    .campo:nth-child(4) {    
        grid-column: 1 / 3; 
    }

    .contenedor .tarjetas{
        width: 100%;
        height: 50rem;
        border-radius: 8px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        overflow:hidden;
        margin: 10px;
        text-align: center;
        transition: all 0.25s;
    }

        .contenedor .tarjetas:active {
    transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
    touch-action: manipulation;
}
}

@media (max-width: 1024px) {
    .espacio-servicios {
        margin-top: 10%;
        margin-bottom: 30%;
    }

    .servicios {
        display:flexbox;
    }
    
    .espacio-footerContacto {
        margin-top: -5%;
    }
}

@media (min-width: 1025px) {
    .espacio-footerContacto {
        margin-top:-17%;
    }
}


/* Para celulares */  
/*Mi perfil*/

@media (max-width: 767px) {
    .navegacion-principal {
        flex-direction: column;/* apila elementos en celu*/
        align-items: center;
        text-align: center;
        gap: 10px; 
    }

    .navegacion-principal a {
        padding: 0.8rem;
        font-size: 1.8rem;
    }
    
    .img-texto {
        flex-direction: column; /* Imágenes y texto apilados en celu */
        gap: 20px; /* reducir espacio entre elementos*/
        margin: 0 auto;
        text-align: center;
    }

    .ilustracion {
        width: 90%; /* Imágenes más fluidas*/
        max-width: 100%;
        height: auto;
    }

    .boton-enviar {
        font-size: 1.6rem; /* reduce tamaño del botón*/
        padding: 0.8rem 2rem;
    }

    .boton-borrar {
        font-size: 1.6rem; /* reduce tamaño del botón*/
        padding: 0.5rem 0.5rem;
    }
}

/* FORMULARIO */

@media (max-width: 767px) {
    .formulario {
        max-width: 100%;
        padding: 1rem;
        
    }

    .campo input, .campo textarea {
        font-size: 1.4rem; /* los casilleros más legibles*/
        padding: 1rem;
    }
}

/* FOOTER */

@media (max-width: 767px) {
    .footer_main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer_links {
        gap: 0.5rem;
    }

    .footer_contactame {
        max-width: 100%;
    }
}

/* MENÚ NAVEGACIÓN */

@media (max-width: 767px) {
    .ilustracion {
        display: block;
        margin: 0 auto;
        border-radius: 15px;
        height:auto;
        width:auto; /*Ajusta el tamaño de la imagen*/
        max-width:100%; /*Limita el tamaño máximo de la imagen*/
        align-items: center;
    }

    .img-texto {
        padding-top: 10%;
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .texto .texto {
        display: flex;
        flex-direction: column; /* Pone al texto uno arriba del otro*/
        line-height: 2; /* se usa para espacio entre elementos (1.2 es compacto, 1.5 estandar y 2 más amplio)*/
    }
}

@media (max-width: 767px) {
    .menu-toggle {
        display: block; /*Ahora sí se muestra el botón hamburguesa*/
    }

    .nav-links {
        display: none; /*Oculta los enlaces inicialmente*/
        flex-direction: column; /*Muestra los enlaces en columna*/
        background-color: var(--verdeAna); /*Mismo fondo que el navbar*/
        position:initial; /*Para poder ubicarlo sobre la pagina*/
        top: 10px; /*Separado desde arriba (ajustar según tu navbar)*/ 
        padding: 10px; /*Espacio interno*/
        border-radius: 8px; /*Bordes redondeados*/ 
    }

    .nav-links.active {
        display: flex; /*Al tener la clase "active", se muestra el menu*/
    }
}


/*Para pantallas chicas */
/* PARA TEXTO  */

@media (max-width: 480px) {
    h1 {font-size: 2.4rem; line-height: 1.2; /* para que no estén muy juntos*/
        margin-right: 0;/* evita desplazamiento*/}
    
    h2 {font-size: 2rem; line-height: 1; /* un poco más de espacio*/}

    h3 {font-size: 1.6rem; line-height: 1.5; /* para mayor legibilidad en celus*/}
    .leyenda {font-size: 3.5rem;}

    .contenedor .tarjetas{
        width: auto;
        height: 65rem;
        border-radius: 8px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
        overflow:hidden;
        margin: 20px;
        text-align: center;
        touch-action:manipulation;
        transition: all 0.25s;
    }

        .contenedor .tarjetas:active {
    transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
    touch-action: manipulation;
}

    .menu-toggle {
        display: block; /*Ahora sí se muestra el botón hamburguesa*/
    }

    .nav-links {
        display: none; /*Oculta los enlaces inicialmente*/
        flex-direction: column; /*Muestra los enlaces en columna*/
        background-color: var(--verdeAna); /*Mismo fondo que el navbar*/
        position:absolute; /*Para poder ubicarlo sobre la pagina*/
        top: auto;
        left:55%;
        padding: 1rem; /*Espacio interno*/
        border-radius: 8px; /*Bordes redondeados*/ 
    }

    .nav-links.active {
        display: flex; /*Al tener la clase "active", se muestra el menu*/
    }
}

/** SERVICIOS **/

@media (max-width: 767px) {
    .contenedor {
        max-width: 120rem; 
        margin: 0 auto 0 auto;
        overflow-x: hidden; /* lo usé para resolver problema de animación que rompe margen del contenedor y se mueve pantalla*/
    }
    .sombra {/*copie codigo desde https://www.cssmatic.com/box-shadow*/
        -webkit-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
        -moz-box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
        box-shadow: 0px 5px 15px 0px rgba(112,112,112,0.54);
        background-color: var(--grisClaro);
        padding: 2rem;
        border-radius: 1rem; 
    }
    .presentacion {
        text-align: justify;
    }

    .menu-toggle {
        display: block; /*Ahora sí se muestra el botón hamburguesa*/
    }

    .nav-links {
        display: none; /*Oculta los enlaces inicialmente*/
        flex-direction: column; /*Muestra los enlaces en columna*/
        background-color: var(--verdeAna); /*Mismo fondo que el navbar*/
        position:absolute; /*Para poder ubicarlo sobre la pagina*/
        top: auto;
        left:55%;
        padding: 10px; /*Espacio interno*/
        border-radius: 8px; /*Bordes redondeados*/ 
    }

    .nav-links.active {
        display: flex; /*Al tener la clase "active", se muestra el menu*/
    }
}