/* --- VARIABLES GLOBALES (Paleta de Colores Modernos) --- */
:root {
    /* Azul Rey Principal: Vibrante y seguro */
    --primary-blue: #0044CC; 
    /* Un tono más oscuro para cuando pasas el mouse */
    --primary-dark: #003399;
    /* Verde WhatsApp */
    --whatsapp-green: #25D366;
    /* Colores de texto */
    --text-dark: #1A1A1A;
    --text-grey: #555555;
    /* Fondos */
    --bg-light: #FFFFFF;
    --bg-off-white: #F4F7FD; /* Un gris azulado muy moderno */
    /* Sombras suaves modernas */
    --shadow-soft: 0 10px 30px -10px rgba(0, 68, 204, 0.2);
    --shadow-hover: 0 20px 40px -10px rgba(0, 68, 204, 0.3);
}

/* --- DESPLAZAMIENTO SUAVE PARA LOS BOTONES --- */
html {
    scroll-behavior: smooth;
}

/* --- RESET Y TIPOGRAFÍA BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Fuente moderna "Inter" */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Contenedor para centrar el contenido y darle márgenes */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- ESTILOS DE TEXTO MODERNOS --- */
h1, h2, h3 {
    font-weight: 800; /* Letra gruesa y fuerte */
    letter-spacing: -0.02em; /* Un toque moderno: letras un poco más juntas */
}

h1 {
    font-size: 2.5rem; /* Grande en celular */
    line-height: 1.2;
    margin-bottom: 1rem;
}

.highlight-blue, .blue-accent {
    color: var(--primary-blue);
}

/* --- BARRA DE NAVEGACIÓN (Simple y limpia) --- */
.navbar {
    padding: 1rem 0;
    background: transparent;
    position: absolute; /* Flota sobre el fondo */
    width: 100%;
    top: 0;
    z-index: 10;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-text {
    font-weight: 800;
    font-size: 1.2rem;
}

/* --- BOTÓN DE LLAMADAS MÁS LLAMATIVO --- */
.nav-call-btn {
    font-size: 1.15rem; /* Letra más grande */
    font-weight: 800; /* Letra más gordita/remarcada */
    color: white !important; /* Texto en color blanco */
    background-color: var(--primary-blue, #0056b3); /* Fondo azul (o puedes cambiarlo a verde: #25D366) */
    padding: 10px 24px; /* Espacio interno para que tome forma de botón */
    border-radius: 50px; /* Bordes completamente redondeados tipo píldora */
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el ícono del teléfono y la palabra */
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra elegante */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto visual cuando pasan el mouse por encima (en computadora) */
.nav-call-btn:hover {
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* La sombra se hace más grande */
}

/* Hacemos el ícono del teléfono un poco más grande para que haga juego */
.nav-call-btn i {
    font-size: 1.4rem; 
}

/* --- HÉROE (La primera sección que ven) --- */
.hero-section {
    /* Fondo moderno con degradado sutil */
    background: linear-gradient(135deg, var(--bg-off-white) 0%, #E6EEFF 100%);
    padding: 8rem 0 5rem 0; /* Mucho espacio arriba y abajo */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Una forma decorativa sutil de fondo */
.hero-shape {
    position: absolute;
    top: -50px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: var(--primary-blue);
    opacity: 0.05;
    border-radius: 50%;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-grey);
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

/* --- BOTONES MODERNOS Y DINÁMICOS --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    border-radius: 50px; /* Bordes completamente redondos */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease; /* Transición suave para todo */
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    box-shadow: var(--shadow-soft);
}

/* MICROINTERACCIÓN: Hover (Pasar el mouse) */
.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px); /* Se eleva un poquito */
    box-shadow: var(--shadow-hover); /* La sombra crece */
}

/* ANIMACIÓN: Pulso suave */
@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(0, 68, 204, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(0, 68, 204, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 68, 204, 0); }
}

.btn-pulse {
    animation: pulse-blue 2s infinite; /* El botón "respira" */
}

.cta-letras-chicas {
    font-size: 0.85rem;
    color: var(--text-grey);
    margin-top: 1rem;
}

/* --- SECCIÓN DE CONFIANZA --- */
.trust-section .container {
    text-align: center; /* Centra todos los textos de la sección */
    max-width: 900px;   /* Hace el contenedor más ancho */
    margin-left: auto;  /* Auto-centra el contenedor horizontalmente */
    margin-right: auto; /* Auto-centra el contenedor horizontalmente */
}

.trust-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.trust-grid {
    display: grid;
    /* Esto crea columnas perfectas de mínimo 260px. 
       Si la pantalla es grande, caben 3 o 4. Si es chica, cabe 1 o 2. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 20px; /* Espacio exacto entre cuadros */
    width: 100%;
    align-items: start; /* Alinea todo arriba para mantener el orden */
}

/* Ajuste para que las tarjetas respeten la rejilla */
.trust-grid .trust-card {
    width: 100%;       /* Ocupa todo el ancho de su columna */
    margin: 0;         /* Sin márgenes extraños */
    min-height: 90px;  /* Altura mínima uniforme */
    
    /* Para centrar el contenido (emoji y título) verticalmente */
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.trust-grid .trust-card {
    min-width: 200px; /* ANTES ERA 140: Esto hace la caja mucho más ancha */
    flex: 0 0 auto;
    margin: 0;
}

.trust-card {
    background: var(--bg-off-white);
    color: var(--primary-blue);
    font-weight: 800;
    padding: 1.2rem 2rem; /* ANTES ERA 0.8: Esto hace la caja más alta y espaciosa */
    border-radius: 15px; 
    font-size: 1.4rem; /* ANTES ERA 1.1: Letra mucho más grande y visible */
    transition: transform 0.2s ease; /* Un toquecito para que se anime al pasar el mouse */
}

/* Efecto extra: Que resalten un poquito si pasas el mouse por encima */
.trust-card:hover {
    transform: scale(1.05);
}

.disclaimer-text {
    font-size: 0.8rem;
    color: var(--text-grey);
}

/* --- SECCIÓN DE PASOS (Tarjetas modernas) --- */
.steps-section {
    padding: 5rem 0;
    background-color: var(--bg-off-white);
    text-align: center;
}

.steps-section h2 {
    font-size: 2rem;
    margin-bottom: 3rem;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Automático para celular y PC */
    gap: 2rem;
}

.step-card {
    background: white;
    padding: 2.5rem;
    border-radius: 24px; /* Bordes muy redondeados */
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease;
    text-align: left;
}

/* Microinteracción: Las tarjetas también se elevan */
.step-card:hover {
    transform: translateY(-5px);
}

.step-icon {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
}

.step-card h3 {
    margin-bottom: 1rem;
}

/* --- FOOTER --- */
/* --- FOOTER (Pie de página) CORREGIDO --- */
.site-footer {
    background: var(--text-dark);
    color: white;
    
    /* Aquí está la magia: 
       3rem arriba, 0 a los lados, y 6rem (90px) abajo para librar el botón */
    padding: 3rem 0 6rem 0; 
    
    text-align: center; /* Centra el texto */
    
    /* Esto asegura que se apilen verticalmente y centrados */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Espacio entre los elementos */
}

.footer-content {
    margin-bottom: 2rem;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
}

.copyright {
    font-size: 0.8rem;
    color: #777;
}

/* --- CONTENEDOR DEL CHATBOT DE WHATSAPP --- */
.floating-wa-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100; /* Siempre encima de todo */
    display: flex;
    align-items: flex-end;
    gap: 15px; /* Espacio entre el globo y el botón */
    text-decoration: none;
}

/* EL GLOBITO DE MENSAJE TIPO CHAT */
.wa-message-bubble {
    background-color: white;
    padding: 12px 18px;
    border-radius: 15px 15px 0px 15px; /* Le da la forma de globo de cómic/chat */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    color: var(--text-dark);
    max-width: 250px;
    border: 1px solid #e5e7eb;
    /* Una animación suave para que "flote" y llame la atención */
    animation: floatBubble 3s ease-in-out infinite;
}

.wa-message-bubble p {
    margin: 0;
    font-weight: 800;
    font-size: 1rem;
    color: var(--whatsapp-green);
}

.wa-message-bubble span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-grey);
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.3;
}

/* Animación del globito */
@keyframes floatBubble {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* EL BOTÓN VERDE (Haciendo juego) */
.floating-wa {
    background-color: var(--whatsapp-green);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Efecto al pasar el mouse */
.floating-wa-container:hover .floating-wa {
    transform: scale(1.1);
    background-color: #1ebe57; /* Un verde un poco más brillante */
}

/* Ajuste para que no estorbe tanto en celulares chiquitos */
@media (max-width: 768px) {
    .wa-message-bubble {
        padding: 10px 14px;
        max-width: 200px;
    }
    .wa-message-bubble span {
        font-size: 0.8rem;
    }
}

.floating-wa:hover {
    transform: scale(1.1); /* Crece un poco al pasar el mouse */
}

/* --- AJUSTES PARA PANTALLAS GRANDES (Desktop) --- */
@media (min-width: 768px) {
    h1 { font-size: 3.5rem; }
    .hero-section { padding: 10rem 0 7rem 0; text-align: left; }
    .hero-subtitle { margin: 0 0 2.5rem 0; }
    .trust-grid { justify-content: center; }
    .site-footer { text-align: left; }
    .footer-content { display: flex; justify-content: space-between; }
}

/* --- ESTILOS PARA LA IMAGEN DEL HERO --- */
.hero-image img {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-hover);
    /* Animación flotante para darle vida */
    animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* Modificamos el layout para pantallas grandes (Desktop) */
@media (min-width: 768px) {
    .hero-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }
    .hero-text {
        flex: 1; /* Toma la mitad del espacio */
        text-align: left;
    }
    .hero-image {
        flex: 1; /* Toma la otra mitad */
    }
} /* <--- AQUÍ ESTABA LA LLAVE QUE FALTABA Y ROMPÍA TODO EN MÓVIL */

/* --- ESTILOS DEL FORMULARIO DE CONTACTO --- */
.contact-section {
    padding: 5rem 0;
    background-color: white;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    background: var(--bg-off-white);
    padding: 3rem;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

@media (min-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr 1fr; /* Divide en 2 columnas en PC */
        align-items: center;
    }
}

.contact-info h2 {
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.modern-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.form-group input, .form-group select {
    padding: 1rem;
    border: 2px solid #E0E5F2;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
    background-color: white;
}

.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.w-100 {
    width: 100%;
    justify-content: center;
}

.form-mensaje {
    text-align: center;
    font-weight: 600;
    margin-top: 1rem;
    display: none; /* Oculto por defecto */
    padding: 10px;
    border-radius: 8px;
}

.mensaje-exito {
    background-color: #e8f5e9;
    color: #2e7d32;
    display: block;
}

.mensaje-error {
    background-color: #ffebee;
    color: #c62828;
    display: block;
}

/* --- CLASES PREPARADAS PARA ANIMACIÓN DE SCROLL --- */
.animar-arriba {
    opacity: 0;
    transform: translateY(50px); /* Empieza 50px más abajo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animar-arriba.visible {
    opacity: 1;
    transform: translateY(0); /* Sube a su posición original */
}

/* --- ESTILOS DE PREGUNTAS FRECUENTES (FAQ) --- */
.faq-section {
    padding: 5rem 0;
    background-color: var(--bg-off-white);
}

.faq-title {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-blue);
    font-size: 2rem;
}

.faq-grid {
    max-width: 800px; /* Lo hacemos un poco más angosto para que se lea fácil */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.faq-item summary {
    padding: 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none; /* Quita la flecha fea por defecto */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

/* Escondemos la flecha en Chrome/Safari */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Creamos nuestro propio símbolo de "+" elegante */
.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--primary-blue);
    transition: transform 0.3s ease;
}

/* Cambios cuando la tarjeta está abierta */
.faq-item[open] summary {
    color: var(--primary-blue);
    border-bottom: 1px solid #E0E5F2;
}

/* El "+" se gira para convertirse en una "x" al abrir */
.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-content {
    padding: 1.5rem;
    color: var(--text-grey);
    line-height: 1.6;
}

/* ========================================= */
/* ADAPTACIÓN PARA PANTALLAS DE CELULAR      */
/* ========================================= */
@media (max-width: 768px) {

    /* --- 1. ARREGLO DEL FORMULARIO --- */
    .contact-container {
        background-color: #f8faff;
        padding: 2rem 1.5rem;
        border-radius: 16px;
        margin: 1rem 1rem 3rem 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    .contact-container h2 { font-size: 1.8rem; text-align: center; margin-bottom: 0.5rem; }
    .contact-container p { text-align: center; margin-bottom: 2rem; }
    .contact-container input, .contact-container select {
        width: 100%; padding: 14px; border: 1px solid #d1d5db;
        border-radius: 8px; margin-bottom: 1.2rem; box-sizing: border-box; background-color: white;
    }
    .contact-container .btn-primary { width: 100%; margin-top: 1rem; }

    /* --- 2. ARREGLO DE PREGUNTAS FRECUENTES --- */
    .faq-section { padding: 3rem 1rem; }
    .faq-title { font-size: 1.8rem; margin-bottom: 1.5rem; }
    .faq-item {
        background-color: white; border-radius: 12px;
        margin-bottom: 1rem; border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    .faq-item summary { padding: 1.2rem; font-size: 1rem; list-style: none !important; }
    .faq-item summary::-webkit-details-marker { display: none !important; }
    .faq-content { padding: 0 1.2rem 1.2rem 1.2rem; font-size: 0.95rem; }

    
}




/* --- DISEÑO DE TARJETAS INSTITUCIONALES (Legal y Seguro) --- */

/* Ajuste base para que el color se note */
.trust-grid .trust-card {
    border-left: 6px solid #ccc; /* Una línea gris por defecto */
    padding-left: 1.5rem;       /* Espacio para que luzca la línea */
    background-color: white;    /* Fondo blanco para que resalte */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra suave */
}

/* 1. IMSS - Verde Institucional */
.trust-grid .trust-card:nth-child(1) {
    border-left-color: #107C41; 
    color: #0b5c2e; /* Texto verde oscuro */
}

/* 2. ISSSTE - Azul/Gris Institucional */
.trust-grid .trust-card:nth-child(2) {
    border-left-color: #54565a; 
    color: #2c2e35;
}

/* 3. PEMEX - Rojo (o Verde Petróleo) - Usamos Rojo para distinguir */
.trust-grid .trust-card:nth-child(3) {
    border-left-color: #CE1126; 
    color: #a30e1e;
}

/* 4. CFE - Verde Eléctrico */
.trust-grid .trust-card:nth-child(4) {
    border-left-color: #009A44; 
    color: #007a35;
}

/* 5. SNTE 23 - Naranja/Dorado Magisterial */
.trust-grid .trust-card:nth-child(5) {
    border-left-color: #FF6600; 
    color: #cc5200;
}

/* 6. SNTE 51 - Naranja/Dorado Magisterial */
.trust-grid .trust-card:nth-child(6) {
    border-left-color: #FF6600; 
    color: #cc5200;
}

/* --- ANIMACIÓN DE TARJETAS DE INFORMACIÓN --- */

.trust-card {
    /* Nos aseguramos de que el contenido se apile verticalmente */
    flex-direction: column; 
    align-items: flex-start !important; /* Alinea el texto a la izquierda junto a la barra de color */
    transition: all 0.3s ease; /* Suaviza cualquier movimiento */
    min-height: 80px; /* Altura mínima para que se vean uniformes */
    cursor: pointer; /* Manita al pasar el mouse para indicar que es interactivo */
}

/* Estilo del Título (IMSS, ISSSTE...) */
.trust-card .card-title {
    font-weight: 800;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Estilo del Texto Oculto (Información) */
.card-info {
    max-height: 0; /* Altura cero = Invisible */
    opacity: 0;    /* Transparente = Invisible */
    overflow: hidden;
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    transition: all 0.4s ease; /* Animación lenta y elegante */
}

/* --- LA ACCIÓN: CUANDO PASAS EL MOUSE (:HOVER) O TOCAS EN MÓVIL (.tocado) --- */
.trust-card:hover,
.trust-card.tocado {
    transform: translateY(-5px); /* La tarjeta sube un poquito */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra más fuerte */
}

.trust-card:hover .card-info,
.trust-card.tocado .card-info {
    max-height: 100px; /* El texto crece hacia abajo */
    opacity: 1;        /* Se vuelve visible */
    margin-top: 8px;   /* Se separa un poco del título */
}