:root {
    /* PALETA DE COLORES SERIA (Corporate Academic) */
    --primary: #042452;      /* Azul Marino Académico */
    --primary-dark: #042452;
    --accent: #0056b3;       /* Azul Brillante para acciones */
    --success: #198754;      /* Verde Bosque (WhatsApp) */
    --text-main: #212529;    /* Casi negro */
    --text-light: #6c757d;   /* Gris medio */
    --bg-light: #f8f9fa;     /* Gris muy claro */
    --bg-white: #ffffff;
    --border: #dee2e6;       /* Gris borde sutil */

        --text-main: #1F2937; /* Gris Antracita (Casi negro) */
        --text-light: #4B5563; /* Gris Acero Oscuro (Cumple ratio 4.5:1) */
        --border: #E5E7EB; /* Gris muy suave */
        --primary-color: #2563EB; /* Azul Real Profesional */


        --bg-color: #FFFFFF;
   @media (prefers-color-scheme: dark) {
       :root {
           --bg-color: #111827;       /* Fondo casi negro (no negro puro) */
           --text-main: #F9FAFB;      /* Blanco roto */
           --text-light: #9CA3AF;     /* Gris claro para leer sobre fondo oscuro */
           --border: #374151;         /* Borde gris oscuro */
           --primary-color: #60A5FA;  /* Azul más claro (brilla sobre oscuro) */
       }
   }


}


/* RESET PROFESIONAL */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif; /* Tipografía moderna y limpia */
    color: var(--text-main);
    line-height: 1.6;
    background-color: var(--bg-white);
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.small-container { max-width: 800px; margin: 0 auto; }

/* ESPACIADO ENTRE SECCIONES */
.section-container { padding: 80px 0; }
.bg-light { background-color: var(--bg-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bg-dark { background-color: #1a1a1a; color: white; }

/* HERO - SERIEDAD TOTAL */
.hero {
    background: linear-gradient(rgba(0,34,68,0.9), rgba(0,34,68,0.9)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 120px 0;
    text-align: center;
}
.brand-tag {
    background: rgba(255,255,255,0.1);
    display: inline-block;
    padding: 6px 16px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.2);
}
.hero h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.highlight { color: #4dabf7; }
.hero-sub { font-size: 1.25rem; color: #adb5bd; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }
/* Estilos para la Sección de Realidad */
.reality-section {
    background-color: #f8f9fa; /* Gris muy suave, casi blanco */
    padding: 80px 20px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb; /* Línea sutil separadora */
}

.reality-content {
    max-width: 750px; /* Importante: Evita que el texto se estire demasiado */
    margin: 0 auto;
}

.reality-content h2 {
    color: #1a202c; /* Color oscuro casi negro */
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.reality-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568; /* Gris oscuro para lectura cómoda */
    margin-bottom: 20px;
}

.reality-content strong {
    color: #2d3748;
    font-weight: 700;
}

/* El remate final con un estilo un poco más destacado */
.reality-punch {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e2e8f0; /* Pequeña línea decorativa arriba del remate */
}

.reality-punch p {
    font-size: 1.2rem;
    color: #0f172a; /* Azul muy oscuro */
}
/* BOTONES PROFESIONALES */
.btn-primary {
    background-color: #ffffff; color: var(--primary); padding: 16px 32px;
    text-decoration: none; font-weight: 600; border-radius: 6px;
    transition: all 0.2s ease; display: inline-block;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.btn-secondary {
    border: 1px solid rgba(255,255,255,0.5); color: white; padding: 15px 32px;
    text-decoration: none; font-weight: 600; border-radius: 6px;
    transition: all 0.2s ease; display: inline-block;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }
/* --- PEGAR ESTO --- */
.hero-buttons {
    display: flex;
    flex-direction: column; /* Celular: Columna */
    gap: 15px;              /* Espacio entre botones */
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

@media (min-width: 768px) {
    .hero-buttons {
        flex-direction: row; /* PC: Fila */
    }
}
/* ------------------ */

/* GRILLAS (Espacio corregido) */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
}

/* --- AQUÍ ESTÁ EL CAMBIO DE LOS ÍCONOS --- */

.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: 2.5rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; }
.section-header p { font-size: 1.1rem; color: var(--text-light); }

.pro-card {
    background: white;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: transform 0.2s ease;
    text-align: center; /* Alinea el texto al centro */
}
.pro-card:hover { transform: translateY(-5px); border-color: var(--accent); }

.icon-box {
    width: 60px; height: 60px; /* Un poco más grande para presencia */
    background: #e7f5ff; color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 24px;

    /* ESTO ES LO QUE LOS CENTRA: */
    margin: 0 auto 24px auto;
}

.pro-card h3 { font-size: 1.25rem; margin-bottom: 12px; color: var(--text-main); font-weight: 700; }
.pro-card p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; }

/* SECCIÓN REGISTRO */
.split-layout { display: flex; align-items: center; gap: 60px; }
.text-side { flex: 1; }
.form-side { flex: 1; }
.check-list { list-style: none; margin-top: 20px; }
.check-list li { margin-bottom: 15px; font-size: 1.1rem; display: flex; align-items: center; }
.check-list i { color: var(--success); margin-right: 15px; }

.form-box {
    background: white; padding: 40px; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid var(--border);
}
.form-box h3 { margin-bottom: 24px; color: var(--primary); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-main); }
.input-group input {
    width: 100%; padding: 14px; border: 1px solid #ced4da; border-radius: 6px;
    font-size: 1rem; transition: border 0.2s;
}
.input-group input:focus { outline: none; border-color: var(--accent); }
.btn-block {
    width: 100%; padding: 16px; background: var(--primary); color: white;
    border: none; border-radius: 6px; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: background 0.2s;
}
.btn-block:hover { background: var(--primary-dark); }

/* PRECIOS */
.pricing-wrapper {
    background: white; color: var(--text-main); max-width: 500px; margin: 0 auto;
    border-radius: 8px; overflow: hidden;
}
.pricing-header { background: #f1f3f5; padding: 40px; text-align: center; border-bottom: 1px solid var(--border); }
.offer-tag {
     display: inline-block;
     background: linear-gradient(135deg, #ff6b6b, #c92a2a); /* Rojo vibrante pero profesional */
     color: white;
     padding: 6px 14px;
     border-radius: 50px; /* Forma de píldora */
     font-size: 0.75rem;
     box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
     margin-bottom: 15px;
     text-transform: uppercase;
 }

.pricing-body { padding: 40px; }
.price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.value { font-weight: 600; font-size: 1.2rem; }
.strikethrough { text-decoration: line-through; color: #adb5bd; }
.highlight-row .value.big { font-size: 1.8rem; color: var(--primary); }
.duration { text-align: center; font-size: 0.9rem; color: var(--text-light); margin-top: 10px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

.btn-whatsapp {
    display: block; width: 100%; text-align: center; background: var(--success); color: white;
    padding: 16px; border-radius: 6px; text-decoration: none; font-weight: 600;
}
.btn-whatsapp:hover { background: #146c43; }
.disclaimer { font-size: 0.8rem; color: #adb5bd; text-align: center; margin-top: 15px; }

/* TESTIMONIOS */
.review-card { background: white; padding: 40px; border: 1px solid var(--border); border-radius: 8px; }
.stars { color: #fcc419; margin-bottom: 15px; letter-spacing: 2px; font-size: 0.9rem; }
.review-text { font-style: italic; color: var(--text-main); margin-bottom: 20px; font-size: 1.1rem; }
.author strong { display: block; color: var(--primary); }
.author span { font-size: 0.9rem; color: var(--text-light); }

/* FAQ Container */
.faq-item { border-bottom: 1px solid var(--border); overflow: hidden; }

/* Trigger / Botón */
.faq-question {
    width: 100%; text-align: left; background: none; border: none; padding: 25px 0;
    font-weight: 600; font-size: 1.1rem; cursor: pointer; color: var(--text-main);
    display: flex; justify-content: space-between; align-items: center;
    transition: color 0.3s ease;
}

/* Icono (Opcional pero recomendado) */
.faq-question::after {
    content: '+';
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after { transform: rotate(45deg); }
.faq-item.active .faq-question { color: var(--primary-color, #0056b3); }

/* RESPUESTA (La magia está aquí) */
.faq-answer {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0; /* Empieza en 0 para que no ocupe espacio */
    overflow: hidden;
    color: var(--text-light);
    line-height: 1.6;
    /* Animamos altura, opacidad y padding a la vez */
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* Cuando está activo, recuperamos la opacidad y el padding */
/* NOTA: El max-height lo pone JS, aquí solo ponemos lo visual */
.faq-item.active .faq-answer {
    opacity: 1;
    padding-bottom: 25px; /* Se restaura suavemente */
}

/* FOOTER */
footer { background: var(--bg-white); border-top: 1px solid var(--border); padding: 40px 0; font-size: 0.9rem; color: var(--text-light); }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.brand { font-weight: 800; color: var(--primary); font-size: 1.2rem; }

/* MOBILE */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .split-layout { flex-direction: column; }
    .footer-content { flex-direction: column; text-align: center; }
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
/* ESTILOS DEL CUPÓN DE DESCUENTO */
.coupon-box {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.coupon-box input {
    flex: 1;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.9rem;
    text-transform: uppercase; /* Para que siempre escriban en mayúsculas */
}

.coupon-box button {
    background-color: var(--text-main); /* Botón negro serio */
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.coupon-box button:hover {
    background-color: black;
}

.coupon-msg {
    font-size: 0.85rem;
    margin-bottom: 0;
    min-height: 20px; /* Para que no salte el diseño */
}

.msg-success { color: var(--success); font-weight: bold; }
.msg-error { color: #dc3545; }
/* --- NUEVA ANIMACIÓN Y EFECTOS --- */

/* 1. Definimos el movimiento "meneíto" de lado a lado */
@keyframes iconWiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); } /* Gira un poco a la izquierda */
    50% { transform: rotate(10deg); }  /* Gira un poco a la derecha */
    75% { transform: rotate(-5deg); }  /* Un poco a la izquierda de nuevo */
    100% { transform: rotate(0deg); }  /* Vuelve al centro */
}

/* 2. El hover de la tarjeta (Mantiene tu elevación seria) */
.pro-card:hover {
    transform: translateY(-5px); /* Se eleva */
    border-color: var(--accent); /* El borde se pone azul */
    box-shadow: 0 15px 30px rgba(0,0,0,0.08); /* Sombra elegante */
}

/* 3. El efecto en el ÍCONO cuando pasas el mouse por la tarjeta */
.pro-card:hover .icon-box {
    background-color: var(--primary); /* El fondo del icono se vuelve Azul Oscuro */
    transition: all 0.3s ease;
}

.pro-card:hover .icon-box i {
    color: #ffffff; /* El dibujo del icono se vuelve BLANCO */
    animation: iconWiggle 0.6s ease-in-out; /* Se mueve de lado */
}

/* Asegúrate de que el icono tenga transición suave de color */
.icon-box i {
    transition: color 0.3s ease;
}
/* --- ESTILOS DEL MODAL DE GALERÍA --- */

/* El fondo oscuro que cubre toda la pantalla */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo aunque hagas scroll */
    z-index: 1000; /* Se pone encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si la pantalla es muy pequeña */
    background-color: rgba(0,0,0,0.8); /* Fondo negro semitransparente */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* La caja blanca del contenido */
.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 600px; /* Ancho máximo de la ventana */
    width: 100%;
    position: relative; /* Para poder posicionar la X de cerrar */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: modalFadeIn 0.3s;
}

/* Botón X para cerrar */
.close-modal {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
}

/* Contenedor con scroll para las imágenes */
.gallery-scroll {
    max-height: 70vh; /* Altura máxima: 70% de la pantalla */
    overflow-y: auto; /* Permite scroll vertical si hay muchas fotos */
    padding-right: 10px; /* Espacio para la barra de scroll */
    margin-top: 20px;
}

/* Estilo de las imágenes de WhatsApp */
.gallery-img {
    width: 100%; /* Ocupan todo el ancho disponible */
    max-width: 350px; /* Pero no se hacen gigantes */
    height: auto;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 20px; /* Espacio entre foto y foto */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Pequeña animación de entrada */
@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}
// LÓGICA DEL MODAL DE TÉRMINOS
const termsModal = document.getElementById("terms-modal");
const btnTerms = document.getElementById("btn-terminos"); // El enlace que pusimos antes
const closeTermsX = document.getElementsByClassName("close-terms")[0]; // La X de cerrar
const closeTermsBtn = document.getElementById("btn-close-terms"); // El botón de "Acepto"

// Abrir al hacer clic en el enlace
btnTerms.onclick = function(e) {
    e.preventDefault();
    termsModal.style.display = "flex"; // Se muestra la ventana
}

// Cerrar con la X
closeTermsX.onclick = function() {
    termsModal.style.display = "none";
}

// Cerrar con el botón de abajo
closeTermsBtn.onclick = function() {
    termsModal.style.display = "none";
}

// Cerrar si clicamos fuera de la ventana
window.onclick = function(event) {
    if (event.target == termsModal) {
        termsModal.style.display = "none";
    }
    // (Mantén aquí la lógica del otro modal de galería si la tienes)
    if (document.getElementById("gallery-modal") && event.target == document.getElementById("gallery-modal")) {
        document.getElementById("gallery-modal").style.display = "none";
    }
}
/* --- ESTILOS PARA CHATS DE WHATSAPP (SIN IMÁGENES) --- */
.whatsapp-container {
    background-color: #e5ddd5; /* Fondo clásico de WhatsApp */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #d4d4d4;
}

.chat-bubble {
    background-color: #ffffff; /* Burbuja blanca (mensaje recibido) */
    padding: 10px 15px;
    border-radius: 0px 12px 12px 12px; /* Esquina en punta */
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    font-size: 0.9rem;
    color: #111;
    text-align: left;
    max-width: 90%;
}

/* Triangulito de la burbuja */
.chat-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #ffffff;
    border-right: 0;
    margin-top: 0;
    margin-right: -10px;
}

.chat-sender {
    color: #e542a3; /* Color rosa/fucsia para el nombre (típico de contactos guardados) */
    font-weight: bold;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 4px;
}

.chat-time {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: #999;
    margin-top: 4px;
}
/* --- ESTILOS WHATSAPP ULTRA REALISTA (GRUPO) --- */

/* Contenedor principal con el fondo de doodles */
.whatsapp-chat-view {
    /* Color beige de fondo exacto */
    background-color: #efe7dd;
    /* Patrón de doodles de WhatsApp (usamos un link estable de GitHub) */
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-repeat: repeat;
    /* Sombra interna para profundidad */
    box-shadow: inset 0 4px 8px -2px rgba(0,0,0,0.1);
    padding: 20px 15px;
    max-height: 65vh; /* Altura máxima para que haya scroll */
    overflow-y: auto; /* Permite deslizar si hay muchos chats */
    border-radius: 0 0 12px 12px;
}

/* El contenedor de cada mensaje individual */
.whatsapp-message-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px; /* Espacio vertical entre mensajes */
    align-items: flex-start; /* Alineados a la izquierda (mensajes recibidos) */
}

/* La burbuja blanca del mensaje */
.chat-bubble {
    background-color: #ffffff;
    padding: 6px 7px 8px 9px; /* Padding específico de WP */
    border-radius: 0px 7.5px 7.5px 7.5px; /* Esquina superior izquierda en punta */
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); /* Sombra sutil realista */
    font-size: 14.2px; /* Tamaño de fuente exacto */
    line-height: 19px;
    color: #111;
    position: relative;
    max-width: 85%; /* No ocupan todo el ancho */
    word-wrap: break-word;
    margin-left: 8px; /* Espacio para la colita */
}

/* La "colita" realista de la burbuja usando un truco de CSS */
.chat-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 13px;
    /* Este degradado crea la curva de la colita */
    background: linear-gradient(to bottom right, transparent 50%, #ffffff 50%);
}

/* El nombre del remitente (estilo grupo) */
.chat-sender {
    font-weight: 500;
    font-size: 12.8px;
    display: block;
    line-height: 18px;
    /* El color se define con clases adicionales abajo */
}

/* Colores de usuarios para el grupo (basado en tu imagen) */
.user-pink { color: #e542a3; }   /* Como 'xio' */
.user-green { color: #25d366; }  /* Como 'daibedumb' */
.user-blue { color: #34b7f1; }   /* Como 'Miguel' */
.user-orange { color: #ff5722; } /* Otro color común */

/* La hora del mensaje */
.chat-time {
    float: right;
    margin-left: 12px;
    font-size: 11px;
    color: #999999;
    position: relative;
    top: 5px; /* Ajuste fino de posición */
    line-height: 15px;
}

/* Para limpiar el float de la hora */
.chat-bubble::after {
    content: "";
    clear: both;
    display: table;
}
/* --- ESTILOS PARA EL INPUT DE CHAT Y MENSAJES PROPIOS --- */

/* Barra de escritura inferior */
.chat-input-area {
    background-color: #f0f2f5;
    padding: 10px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    gap: 10px;
}

.chat-input {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 15px;
    outline: none;
    background: #ffffff;
}

.btn-send-chat {
    background: #008f68; /* Verde botón enviar */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.2s;
}

.btn-send-chat:active { transform: scale(0.9); }

/* Mensajes del usuario (Burbuja Verde a la Derecha) */
.my-message-container {
    align-items: flex-end; /* Alineado a la derecha */
}

.my-message-bubble {
    background-color: #d9fdd3; /* Verde claro WhatsApp */
    border-radius: 7.5px 0px 7.5px 7.5px; /* Punta derecha arriba */
    margin-right: 8px; /* Espacio para colita derecha */
    margin-left: 0;
}

/* Colita derecha (verde) */
.my-message-bubble::before {
    left: auto;
    right: -8px; /* Posición a la derecha */
    background: linear-gradient(to bottom left, transparent 50%, #d9fdd3 50%);
}

/* Animación simple de entrada */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.msg-animate { animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
/* --- GALERÍA AGRANDADA Y RESPONSIVA --- */

.evidence-grid {
    display: grid;
    /* Bajamos el mínimo a 280px para que quepan exactamente 3 columnas en PC */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px; /* Reducimos un poco el espacio para que cuadre perfecto */
    margin-bottom: 40px;
    align-items: end; /* Alinea las imágenes por su base si tienen distintas alturas */
}

/* --- ESTILO NUEVO PARA CENTRAR EL TEXTO --- */
.evidence-caption {
    text-align: center;
    margin-top: 15px;
    font-weight: 500;
    color: var(--text-main);
    font-size: 0.95rem;
}

.evidence-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.evidence-img {
    width: auto;           /* Permite que mantenga su proporción real */
    max-width: 100%;       /* No deja que se salga de la pantalla */
    height: auto !important;
    max-height: 950px;     /* Aumentamos mucho el límite para que el celular crezca */
    object-fit: contain;
    /* Sombra elegante que sigue la forma del celular, no un cuadro */
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
    display: block;
    margin: 0 auto;        /* Centra la imagen si es más delgada que el espacio */
}

/* Efecto al pasar el mouse */
.evidence-img:hover {
    transform: scale(1.04);
}

/* --- AJUSTE PARA CELULARES --- */
@media (max-width: 768px) {
    .evidence-grid {
        /* En celulares pequeños, forzamos que ocupen casi todo el ancho */
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .evidence-img {
        max-height: 700px; /* Un poco más bajo en móvil para que no sea infinito */
    }
}
/* Color del cursor al escribir (Verde WhatsApp) */
.chat-input {
    caret-color: #008069;
    font-weight: 400;
}

/* Opcional: Para que el texto que escriben sea más oscuro y legible */
.chat-input::placeholder {
    color: #8696a0;
    opacity: 1;
}
/* --- ESTILO DE "RESPUESTA CITADA" (QUOTE REPLY) --- */

.reply-container {
    background-color: rgba(0, 0, 0, 0.05); /* Fondo gris suave */
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px; /* Espacio antes de tu respuesta */
    border-left: 4px solid; /* La línea de color a la izquierda */
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}

/* El nombre de la persona a la que respondes */
.reply-title {
    font-weight: bold;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

/* El texto cortito del mensaje original */
.reply-body {
    color: #667781; /* Gris oscuro texto */
    font-size: 0.75rem;
    white-space: nowrap; /* Que no ocupe muchas líneas */
    overflow: hidden;
    text-overflow: ellipsis; /* Pone "..." si es muy largo */
}
/* --- STICKERS DE WHATSAPP --- */
.sticker-container {
    background: transparent !important; /* Quita el fondo blanco */
    box-shadow: none !important; /* Quita la sombra */
    padding: 0 !important;
    margin-bottom: 10px;
}

.sticker-img {
    width: 120px; /* Tamaño estándar de sticker */
    height: auto;
    display: block;
}


/* El sticker no necesita "colita" */
.sticker-container::before {
    display: none;
}
.chat-bubble {
    background-color: #ffffff;
    padding: 6px 7px 8px 9px;
    border-radius: 0px 7.5px 7.5px 7.5px;
    /* SOMBRA DOBLE: La primera es el borde suave, la segunda es la profundidad inferior */
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13), 0 1px 2px rgba(0,0,0,0.1);
    font-size: 14.2px;
    line-height: 19px;
    color: #111;
    position: relative;
    max-width: 85%;
    word-wrap: break-word;
    margin-left: 8px;
    /* Un pequeño margen inferior para que no se peguen y se note el relieve */
    margin-bottom: 4px;
}

/* Ajuste para la burbuja del usuario (Verde) */
.my-message-bubble {
    background-color: #d9fdd3;
    border-radius: 7.5px 0px 7.5px 7.5px;
    margin-right: 8px;
    margin-left: 0;
    /* Sombra similar pero para el lado derecho */
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13), 0 1px 2px rgba(0,0,0,0.1);
}
/* Estilos para la sección de Padres */
.parents-container {
    background-color: #f8f9fa;
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    text-align: center;
}

.btn-parents-trigger {
    background: #042452; /* Azul oscuro serio */
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 600px;
    justify-content: center;
}

.btn-parents-trigger:hover {
    background: #1a252f;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.btn-parents-trigger .arrow-icon {
    transition: transform 0.3s ease;
    margin-left: auto; /* Empuja la flecha a la derecha si el botón es ancho */
}

.btn-parents-trigger.active .arrow-icon {
    transform: rotate(180deg);
}

/* Contenido oculto inicialmente */
.parents-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    opacity: 0;
}

.parents-content.open {
    opacity: 1;
    /* max-height se maneja con JS para precisión, o pon un valor alto aquí */
}

.parents-message {
    background: white;
    margin-top: 20px;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.parents-message h4 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.parents-message p {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 20px;
}

.parents-benefits {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f1f8ff; /* Azul muy clarito */
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #0d6efd;
}

.benefit-item i {
    color: #0d6efd;
    font-size: 1.2rem;
    margin-top: 3px;
}

.benefit-item span {
    font-size: 0.95rem;
    color: #212529;
}

.trust-note {
    font-style: italic;
    font-size: 0.9rem;
    color: #6c757d;
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-bottom: 0 !important;
}
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.btn-whatsapp {
    background: linear-gradient(45deg, var(--success), #146c43); /* Degradado sutil en vez de color plano */
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);
    animation: pulse-green 2s infinite; /* El botón respira */
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    transform: scale(1.02); /* Crece un poquito */
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.5);
    animation: none; /* Se detiene al hacer hover para no molestar */
}

.payment-text {
    text-align: center;       /* Centrado perfecto */
    font-size: 13px;          /* Mucho más pequeño (antes seguro era 16px) */
    color: #999999;           /* Gris claro para que no resalte tanto */
    margin-bottom: 5px;       /* Más pegado a los logos */
    font-weight: 400;         /* Letra normal (no negrita) */
    letter-spacing: 0.5px;    /* Un poco de aire entre letras */
    display: block;           /* Asegura que ocupe todo el ancho */
}

.payment-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background: #f8f9fa;
    padding: 10px 20px; /* Un poco más de espacio a los lados */
    border-radius: 8px;
    border: 1px dashed #dee2e6;
    margin-top: 15px;
}

.payment-logos img {
    height: 28px; /* Altura fija para todos */
    width: auto;  /* El ancho se ajusta solo */
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.payment-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15);
}

/* Contenedor de la línea de tiempo */
.steps-timeline {
    margin-top: 30px;
    position: relative;
    padding-left: 10px;
}

/* Cada bloque de paso individual */
.step-item {
    display: flex;
    position: relative;
    padding-bottom: 35px; /* Espacio entre pasos */
}

/* Línea vertical conectora */
.step-item::before {
    content: '';
    position: absolute;
    left: 19px; /* Centrado con el círculo (ajustar según tamaño) */
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #e0e0e0; /* Color de la línea gris claro */
    z-index: 0;
}

/* Quitar la línea del último elemento para que no cuelgue */
.step-item:last-child::before {
    display: none;
}

/* El círculo con el número */
.step-marker {
    width: 40px;
    height: 40px;
    background-color: #0F2545; /* Azul oscuro de tu marca */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    z-index: 1; /* Para estar encima de la línea */
    flex-shrink: 0; /* Evita que el círculo se aplaste */
    border: 2px solid #fff; /* Borde blanco para separar de la línea */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Contenido de texto al lado del círculo */
.step-content {
    margin-left: 20px;
    padding-top: 5px; /* Alinear visualmente con el círculo */
}

.step-content h4 {
    margin: 0 0 5px 0;
    color: #0F2545;
    font-size: 1.1rem;
    font-weight: 700;
}

.step-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
}

.step-content small {
    display: block;
    margin-top: 5px;
    color: #4b5563; /* Gris oscuro neutro y fácil de leer */
    font-weight: 600;
}

/* Ajuste Responsive para Móviles */
@media (max-width: 768px) {
    .split-layout {
        flex-direction: column;
    }

    .text-side {
        margin-bottom: 40px; /* Separar los pasos del formulario en celular */
    }
}

/* ESTILOS PARA EL BOTÓN DE TÉRMINOS BLOQUEADO */
.btn-disabled {
    background: #ccc !important; /* Gris */
    color: #666 !important;
    border: none;
    padding: 12px 40px;
    border-radius: 6px;
    font-weight: bold;
    cursor: not-allowed;
    pointer-events: none; /* No deja hacer clic */
}

/* ESTILO CUANDO YA ESTÁ HABILITADO (VERDE) */
.btn-enabled {
    background: var(--primary) !important; /* Tu color azul/azul oscuro */
    color: white !important;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Animación para cuando se desbloquea el checkbox */
.checkbox-unlocked {
    opacity: 1 !important;
    pointer-events: auto !important;
    font-weight: bold;
    color: var(--success);
}


/* ESTADO BLOQUEADO DEL BOTÓN WHATSAPP */
.btn-whatsapp.disabled-link {
    background: #cccccc !important; /* Gris apagado */
    color: #666666 !important;
    pointer-events: none; /* ESTO ES LA CLAVE: No deja hacer clic */
    cursor: not-allowed;
    box-shadow: none !important;
    animation: none !important; /* Quita el palpitar verde */
    transform: none !important;
}

/* ESTADO DESBLOQUEADO (Cuando marcan el check) */
.btn-whatsapp.active-link {
    background: linear-gradient(45deg, var(--success), #146c43) !important;
    cursor: pointer;
    animation: pulse-green 2s infinite; /* Vuelve a palpitar */
}


/* --- ESTILOS DE LETRA PARA EL CONTRATO (TÉRMINOS) --- */

/* 1. El texto general (Párrafos y listas) */
.gallery-scroll {
    font-size: 14px !important;    /* Tamaño ideal de lectura (no muy chico, no muy grande) */
    line-height: 1.6 !important;   /* Espaciado entre líneas para que no canse la vista */
    color: #333 !important;        /* Gris oscuro profesional */
    text-align: justify;           /* Justificado para que se vea ordenado a los lados */
}

/* ====================================================== */
/* AJUSTES DE TEXTO PARA EL MODAL DE TÉRMINOS Y CONDICIONES */
/* ====================================================== */

/* Párrafos y listas del modal */
#terms-modal .modal-content p,
#terms-modal .modal-content li {
    font-size: 14px; /* Tamaño ideal para textos legales en móvil */
    line-height: 1.6; /* Espaciado cómodo entre líneas */
    color: #4a5568; /* Un gris oscuro es más elegante y cansa menos que el negro puro */
    margin-bottom: 12px;
}

/* Subtítulos (como el 5.1 y 5.2) */
#terms-modal .modal-content h4,
#terms-modal .modal-content h5 {
    font-size: 15px;
    margin-top: 18px;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Título principal (CLÁUSULA 5...) */
#terms-modal .modal-content h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

/* El texto del Checkbox */
#lbl-check {
    font-size: 14px;
    font-weight: 600; /* Mantenemos la negrita, pero más pequeño */
}



/* --- CURSOR PARA ZOOM --- */
/* Agrega esto al final de tu CSS */
.evidence-img {
    cursor: zoom-in; /* Cambia el cursor a una lupa con signo + */
}

/* Animación suave al abrir la imagen grande */
@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}