/* public/css/estilos.css */
/* 1. El contenedor PADRE toma el control de la alineación */
header,main,body,footer{
    max-width: 100%;
    width: 99%;
    box-sizing: border-box;
}
header {
    width: 100%;
    background-color: black;
    min-height: 100px;           /* MODIFICADO: Se cambió max-height por min-height para que el menú no se mutile si los elementos se envuelven */
    height: fit-content;                /* MODIFICADO: Permite que el alto crezca de forma dinámica en celulares */
    display: flex;
    align-items: center;         /* Centrado vertical perfecto para el logo y el nav */
    justify-content: flex-start; /* Alinea ambos elementos hacia la izquierda (juntos) */
    gap: 10px;                   /* PARÁMETRO AJUSTABLE: Controla la distancia exacta entre el logo y el nav */
    padding: 15px 20px;          /* MODIFICADO: Se agregó un pequeño colchón arriba/abajo para cuando se rompa en filas */
    flex-wrap: wrap;             /* MODIFICADO: Permite que el menú de navegación baje de fila si no cabe junto al logo */
}

header img {
    max-width: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}

header nav {
    font-family: 'Poppins', sans-serif;
    font-size: 14pt;
    display: flex;
    gap: 10px;                   /* Distancia entre los enlaces internos del menú */
    font-weight: normal;
    flex-wrap: wrap;             /* MODIFICADO: Evita que los links del menú se salgan de la pantalla por la derecha */
}

header nav a {
    color: white;
    text-decoration: none;
}

footer {
    width:auto ;
    background-color: #fa4c00;
    min-height: 100px;           /* MODIFICADO: De height fijo a min-height para dar espacio a los textos envueltos en móvil */
    height: auto;                /* MODIFICADO: Altura flexible adaptable */
    display: flex;
    align-items: center;         /* Centrado vertical perfecto para el logo y el nav */
    justify-content: flex-start; /* Alinea ambos elementos hacia la izquierda (juntos) */
    gap: 50px;                   /* PARÁMETRO AJUSTABLE: Controla la distancia exacta entre el logo y el nav */
    padding: 15px 30px;          /* MODIFICADO: Padding vertical para evitar que el contenido toque los bordes */
    flex-wrap: wrap;             /* MODIFICADO: Permite que el contenido se apile en pantallas muy angostas */
}

footer img {
    max-width: 300px;            /* MODIFICADO: Cambiado de width fijo a max-width para que la imagen se encoja en pantallas menores a 300px */
    width: 100%;                 /* MODIFICADO: Asegura el ajuste fluido en celulares mini */
    height: auto;
    object-fit: contain;
}

footer nav {
    font-family: 'Poppins', sans-serif;
    font-size: 14pt;
    display: flex;
    gap: 20px;                   /* Distancia entre los enlaces internos del menú */
    font-weight: normal;
    flex-wrap: wrap;             /* MODIFICADO: Evita desbordamientos en los enlaces del pie de página */
}

footer nav a {
    color: white;
    text-decoration: none;
}

h1 { color: black; 
}

.descripcion{
    font-family: Lato;
}
.descripcion p{
    font-size: 16pt;
}
.rejilla-tarjetas{
    font-family: 'Lato';
    font-size: 14pt;
    background-color:transparent;
    display: flex;
    flex-direction: row;
    width: 100%;

}
.rejilla-tarjetas p{
font-size: 17pt;
}
.rejilla-tarjetas h1,.rejilla-tarjetas h2,.rejilla-tarjetas p{
    margin-left: 10px;
    
}
.tarjeta-industria{
width: 32%;
min-width: 280px;                /* MODIFICADO: Evita que la tarjeta se haga un pasillo ilegible; en móvil se expandirá o saltará de fila */
background-color: #009FE3;
margin: 10px;
padding: 10px;
line-height: 20px;
font-size: 12.5pt;
box-sizing: border-box;          /* MODIFICADO: Asegura que el padding no rompa los cálculos de tamaño en la pantalla */
}
.tarjeta-industria p,.tarjeta-industria h3,.etiqueta-problema {
    margin: 10px;
    font-family: "Lato";
}

/* 1. Configuración del contenedor padre (El Marco) */

.imagen-tarjeta {
    max-width: 425px;            /* MODIFICADO: De width estático a max-width para que no rompa las pantallas pequeñas de celulares */
    width: 100%;                 /* MODIFICADO: Obliga a la caja de la imagen a ser elástica y adaptarse a su contenedor */
    max-height: 425px;           /* MODIFICADO: De height estático a max-height */
    height: auto;                /* MODIFICADO: Altura adaptable proporcional */
    aspect-ratio: 1 / 1;         /* MODIFICADO: Mantiene el contenedor perfectamente cuadrado de forma matemática en cualquier pantalla */
    margin: 0 auto auto;   /* Centra el contenedor completo horizontalmente dentro de la tarjeta */
    display: flex;         /* Activa el motor Flexbox para alinear elementos internos */
    align-items: center;   /* Centra la imagen verticalmente */
    justify-content: center; /* Centra la imagen horizontalmente */
    background: transparent; /* Garantiza que se respete la transparencia del PNG */
    overflow: hidden;
}

/* 2. Configuración de la imagen interna (El Recurso PNG) */
.imagen-tarjeta img {
    max-width: 100%;       /* Restringe el ancho de la imagen para que nunca supere al div padre */
    max-height: 80%;      /* Restringe el alto de la imagen para que nunca supere al div padre */
    width: auto;           /* Delega al navegador el cálculo del ancho proporcional original */
    height: auto;          /* Delega al navegador el cálculo del alto proporcional original */
    object-fit: contain;   /* Escuda la imagen para que se contenga por completo sin recortarse */
    /*display: block;        /* Convierte la imagen en bloque para eliminar espacios vacíos inferiores */
}
.tarjeta-industria h3 {
    margin-top: 0px;         /* Elimina el espacio de arriba para pegarse a la imagen */
    margin-bottom: 0px;   /* Controla el espacio entre el título y el párrafo de abajo */
    font-size: 15pt;
    color: black;
}
.tarjeta-industria p{
    font-weight: normal;
    line-height: normal;
    font-size: 12.5pt;
}
/**/


/*Pagina de inicio*/
/* Contenedor principal */
.acercade{
display: flex;
    flex-direction: row;
    gap: 30px;
}
.contenido-dinamico {
    background-color: #009FE3;
    padding: 20px;
    border-radius: 10px;
    max-width: 100%;
    width: 100%;
    color: white;
    cursor: pointer;
    background-color: #009FE3;
    font-family: "Lato";
    font-size: 20pt;

}
.contenido-dinamico p:nth-child(odd){
    text-align: center;
}
.contenido-dinamico p:nth-child(even){
    text-align: justify;
}
/* 1. Por defecto, escondemos el segundo párrafo */
.contenido-dinamico .parrafo-hover {
    display: none;
}

/* 2. Cuando el usuario pasa el mouse por LA TARJETA, escondemos el primer párrafo */
.contenido-dinamico:hover .parrafo-inicio {
    display: none;
}

/* 3. Cuando el usuario pasa el mouse por LA TARJETA, mostramos el segundo párrafo */
.contenido-dinamico:hover .parrafo-hover {
    display: block;
}
#titulocasos{
    text-align: center;
    font-family: "Poppins";
}
/* ==========================================================================
   CONFIGURACIÓN GENERAL (PC y Tablets)
   ========================================================================== */
.casosdeexito {
    position: relative;
    width: 100%;
    max-width: 320px;          /* Tamaño estándar en computadora */
    aspect-ratio: 1 / 1;       /* Cuadrado perfecto */
    margin: 15px;
    display: inline-block;
    vertical-align: top;
    border-radius: 15px;
    overflow: hidden;
    background-color: #009FE3;
    box-sizing: border-box;
    cursor: pointer;           /* Muestra la mano para indicar que es cliqueable */
}

.casosdeexito img {
    width: 100%;
    height: 100%;
    object-fit:fill;
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.casosdeexito p {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 13pt;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* ==========================================================================
   🔥 DISPARADORES TRIPLE ACCIÓN (Hover en PC y Toque/Click en Móvil)
   ========================================================================== */

/* Desaparece la imagen con HOVER o con la clase .activo de JS */
.casosdeexito:hover img,
.casosdeexito.activo img {
    opacity: 0;
}

/* Muestra el párrafo con HOVER o con la clase .activo de JS */
.casosdeexito:hover p,
.casosdeexito.activo p {
    opacity: 1;
    pointer-events: auto;
}


/* ==========================================================================
   📱 AJUSTE PARA MÓVIL (Mantiene el cuadrado pero lo hace GRANDE)
   ========================================================================== */


/**********************/



/* Efecto visual de transición suave */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.consultoria{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.consultoria section{
    background-color: transparent;
    color: white;
    /* 🛠️ MODIFICADO: Se quitó 'max-height: 150px' para que la caja crezca naturalmente según su texto y NUNCA se encime */
    height: auto;                
    flex: 1;
    padding: 20px;
    margin: 10px;
    /* 🛠️ MODIFICADO: Se cambió 'max-width: 50%' a 100% para que en celular use todo el ancho si es necesario */
    max-width: 100%;             
    /* 🛠️ AÑADIDO: Si la pantalla mide más de 600px se ponen en parejas (50%), pero si mide menos, saltan a formato lista solas */
    min-width: 280px;            
    border-radius: 40px;
    /* 🛠️ AÑADIDO: Obligatorio para que el padding de 20px no sume tamaño extra y no desborde la pantalla */
    box-sizing: border-box;      
}

.textotitulo{
    background-color: transparent;
}

.consultoria h1,.tituloconsultoria,.tituloconsultoria h1{
    font-family: "Poppins";
    font-size: 18pt;
    text-align: center;
    color: white;
}

section .servicio{
    /* 🛠️ ELIMINADO: 'object-fit: contain' se borró porque es una propiedad exclusiva de imágenes (<img>), en textos no hace nada */
    font-family: "Lato";
    /* 🛠️ MODIFICADO: Se bajó de 15pt a 13pt. En celulares, 15pt en negrita es demasiado grande para un párrafo */
    font-size: 13pt;             
    /* 🛠️ MODIFICADO: Se redujo el espaciado exagerado para evitar que las palabras se corten feo en pantallas delgadas */
    word-spacing: 1px;           
    letter-spacing: 0.5px;       
    text-align: justify;
    font-weight: bold;
    color: white;
}

/* ==========================================================================
   FONDO DE PÁGINA PARA CONSULTORÍA
   ========================================================================== */

.fondo {    
    /* 2. Control total del comportamiento de la imagen */
    background-size: cover;       /* Fuerza a la imagen a cubrir toda la pantalla sin deformarse */
    background-position: center;  /* Centra la foto horizontal y verticalmente */
    background-repeat: no-repeat; /* Evita que la imagen se repita como mosaico */
    background-attachment: fixed; /* Opcional: Hace un efecto "parallax" elegante al hacer scroll */

    /* 3. Proporciones del bloque */
    width: 100%;
    min-height: 100vh;            /* Garantiza que el fondo cubra al menos todo el alto de la pantalla */
    padding: 60px 20px;           /* Espaciado interno para que el contenido respire */
    box-sizing: border-box;
}
.contenedor{
display: flex;
    justify-content: center; /* Lo centra horizontalmente */
    align-items: center;     /* Lo centra verticalmente */
    min-height: 80vh;        /* Le da una altura lógica a la pantalla para que se note el centrado vertical */
}
body .registro-ctes{
    font-family: "Poppins";
    background-color:#009FE3;
    width: fit-content;
    padding: 10px;
    margin: 10px;
    border-radius: 20px;
    vertical-align: middle;
    box-shadow: 10px 5px 5px black;
}
.registro-ctes form{
    width: 500px;
    
}

.registro-ctes input:nth-child(even){
    width: 75%;
    border-radius: 20px;
    padding: 10px;

}

.registro-ctes input:nth-child(odd){
    width: 50%;
    border-radius: 20px;
    padding: 10px;
}

.registro-ctes button{
    border-radius: 20px;
    padding: 10px;
    font-family: "Poppins";
}

/* ==========================================================================
   📱 CONFIGURACIÓN PARA MÓVILES (Pantallas menores a 768px)
   ========================================================================== */
@media (max-width: 768px) {
    main,header,body,footer,.fondo{width: 98%;}
    .panel-contenido{
        width: 95%;
        height: fit-content;
    }    

    .acercade {
        flex-direction: column;   /* 🔥 Cambia de fila a columna para apilar los bloques */
        gap: 20px;                /* Reduce sutilmente el espacio entre bloques en el celular */
        width: 100%;
    }


    .contenido-dinamico {
        font-size: 15pt;          /* 💡 RECOMENDACIÓN: Reducir los 20pt en celular. 
                                     Si la letra es muy grande, los párrafos se harán larguísimos 
                                     y el texto de hover podría cortarse */
        padding: 15px;            /* Achica un poco el relleno para dar más espacio al texto */
        width: 98%;
    }

    .descripcion{
        width: 89%;
        margin-left: 1%;
        margin-right: 1%;
    }
    .rejilla-tarjetas{
    width: 99%;
    font-family: 'Lato';
    font-size: 14pt;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}
.tarjeta-industria{
    width: 95%;
}
    .casosdeexito {
        max-width: 100%;       /* Permite que la tarjeta crezca */
        width: 100%;            /* Ocupa casi todo el ancho del celular */
        margin: 15px auto;     /* Centra la tarjeta en la pantalla del celular */
        display: block;        /* Cambia a bloque para que se apilen ordenadamente */
        /* Al medir casi el 100% del ancho del móvil, el aspect-ratio 1/1 
           hará que la caja sea un cuadrado gigante, dando espacio de sobra al texto */
        aspect-ratio: 1 / 1;   
    }
    .casosdeexito p {
        font-size: 13pt;       /* El texto ahora se lee perfectamente porque la caja es grande */
        padding: 30px;         /* Espacio libre para que respire la lectura */
    }
    /* .registro-ctes{
        background-color: transparent;
        box-shadow: 10px 5px 5px black;
    } */


    .registro-ctes form{
        
        width:50%;

    }
}