/* ================================================================
   ESCUELA DE INFLUENCIA COMERCIAL — estilos.css
   Última actualización: 2026
   Estructura: (Índice de secciones del documento)
================================================================ */


/* ================================================================
   1. VARIABLES GLOBALES Y RESET
================================================================ */
/* Selecciona las etiquetas base de la página de diagnóstico */
html, body {
    /* Evita que el ancho de la página sea mayor que el espacio físico de la pantalla */
    max-width: 100%;
    /* Corta cualquier elemento rebelde que intente salirse hacia la derecha, eliminando el scroll horizontal */
    overflow-x: hidden;
    /* Configura el navegador para que incluya rellenos y bordes dentro del ancho asignado */
    box-sizing: border-box;
}

/* Aplica la regla a todos los elementos del formulario, incluyendo selectores antes y después */
*, *:before, *:after {
    /* Fuerza a que todo el HTML herede el cálculo inteligente de tamaño (box-sizing) */
    box-sizing: inherit;
}

/* Selecciona la caja principal que envuelve el formulario del test */
.container, main {
    /* Permite que la caja sea elástica y use todo el ancho en pantallas pequeñas */
    width: 100%;
    /* En computadoras grandes, impide que el formulario se estire horizontalmente más de 800px para que sea cómodo de leer */
    max-width: 800px;
    /* Centra todo el bloque del formulario en el medio de la pantalla */
    margin: 0 auto;
    /* Deja un espacio de 20px arriba/abajo y un colchón de 15px a la izquierda/derecha en móviles */
    padding: 20px 15px;
    /* Evita que el padding de 15px ensanche el contenedor más allá de la pantalla */
    box-sizing: border-box;
}


:root {
    /* Definición de colores para reutilizar en todo el sitio */
    --color-fondo-oscuro: #001122; /* Azul casi negro para el fondo base */
    --color-fondo-medio: #0f1629; /* Azul intermedio para contrastar secciones */
    --color-fondo-tarjeta: #001122; /* Azul más claro para que resalten las cards */
    --color-amarillo: #f5c518; /* Color corporativo principal */
    --color-amarillo-hover: #d4a914; /* Tono de amarillo más oscuro para efectos de mouse */
    --color-blanco: #ffffff; /* Blanco puro */
    --color-texto-claro: #c8cfd9; /* Gris azulado para lectura cómoda */
    --color-texto-tenue: #7a8499; /* Gris oscuro para textos menos importantes */
    --color-borde: rgba(245, 197, 24, 0.25); /* Amarillo con transparencia para bordes sutiles */
    /* Definición de tipografías */
    --fuente-principal: 'Georgia', 'Times New Roman', serif; /* Fuente con remates para elegancia */
    --fuente-ui: system-ui, -apple-system, sans-serif; /* Fuente moderna del sistema operativo */
    /* Espaciados estándar */
    --gap-seccion: 80px; /* Separación entre bloques grandes */
    --gap-interior: 40px; /* Separación dentro de los bloques */
    --radio-card: 12px; /* Redondeo de las esquinas de las tarjetas */
}

/* Reset básico: quita márgenes y paddings por defecto y ajusta el tamaño de caja */
*, *::before, *::after {
    box-sizing: border-box; /* Incluye el padding y borde en el ancho total */
    margin: 0; /* Elimina márgenes externos */
    padding: 0; /* Elimina rellenos internos */
}

html {
    scroll-behavior: smooth; /* Hace que al hacer clic en enlaces internos el scroll sea suave */
}

body {
    font-family: var(--fuente-ui); /* Aplica la fuente moderna */
    color: var(--color-blanco); /* Color de texto base blanco */
    line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
}

img {
    max-width: 100%; /* Evita que las imágenes se salgan de su contenedor */
    display: block; /* Elimina espacios vacíos debajo de las imágenes */
}

a {
    text-decoration: none; /* Quita el subrayado de los enlaces */
    color: inherit; /* Hereda el color del texto del padre */
}

ul, ol {
    list-style: none; /* Quita los puntos o números de las listas */
}


/* ================================================================
   2. HEADER (Cabecera)
================================================================ */

.main-header {
    display: flex; /* Convierte el header en un contenedor flexible */
    justify-content: space-between; /* Empuja el logo a la izquierda y el botón a la derecha */
    align-items: center; /* Centra todo verticalmente para que el botón no quede más arriba que el logo */
    padding: 5px 2%; /* Da aire: 15px arriba/abajo y 5% a los costados */
    border-bottom: 3px solid #d4af37; /* La línea dorada que separa el menú del resto */
    /*position: sticky; /* El menú se queda pegado arriba aunque bajes en la página */
    top: 0; /* Indica que se pegue justo al inicio (0 píxeles) */
    background-color: #001122; /* azulde la marca para el fondo del nav*/
    width: 100%; /* el ancho se ajuste para no deformar la iamgen */
}

.logo-header {
    flex-shrink: 0; /* Evita que el logo se haga pequeño si falta espacio */
}

    .logo-header img {
        height: 80px; /* Altura fija para el logo */
        width: auto; /* Mantiene la proporción original */
        border-radius: 6px; /* Bordes ligeramente redondeados */
    }

/*header nav de forma horizontal NAV --------------------------------------------------------------------------------------------*/
.nav-header {
    /*flex:1;/* el menuocupa el espacio central*/
    display: flex; /* horizontalidad en los elementos de todo el nav*/
    align-items: center; /*centra el texto verticalmente con respecto al logo*/
    gap: 15px; /* espacio entre elementos*/
    font-size:20px ; /* tamaño del texto*/

}

.nav-header ul {
    display: flex; /*linea clav para hacerlo horizontal*/
    list-style: none; /*quita los puntos negros*/
    gap: 40px; /*da espacio entre cada palabra*/
    margin: 0; /* margenes de cada elemento del nav*/
    padding: 0; /* espacio entre su contenido y su borde */
    text-align:center;
}

/* estilo para los enlases a del nav */
.nav-header a {
    color:white; /* color del texto de cada enlase */
    text-decoration: none;/*texto limpio sin liena debajo  */
    font-weight: bold;/* texto con negrita gruesa*/
    font-size: 20px; /* tamaño de la letra*/
    text-align: center;
}

    /* Selecciona los enlaces (a) dentro de la lista (li) de la navegación */
    .nav-header ul li a:hover {
        color: #f5c518; /* Cambia el color del texto al amarillo de tu marca */
    }

.btn-whatsapp {
    background-color: transparent; /* Fondo transparente */
    display: flex; /* Activa flexbox */
    align-items: center; /* Centra el icono */
    justify-content: center; /* Centra el icono */
    padding: 0; /* Sin relleno para no deformar */
    transition: transform 0.3s ease; /* Animación suave de tamaño */
    width: auto; /* Ancho según contenido */
    height: auto; /* Alto según contenido */
}

.img-ws {
    width: 80px; /* Tamaño del icono de WhatsApp */
    height: 80px; /* Altura del icono */
    object-fit: contain; /* Asegura que la imagen no se corte */
    display: block; /* Comportamiento de bloque */
    border-radius: 20px; /* Esquinas redondeadas */
}

.btn-whatsapp:hover {
    transform: scale(1.1); /* Agranda el icono un 10% al pasar el mouse */
}

.btn-diagnostico {
    background-color: var(--color-amarillo); /* Fondo amarillo */
    color: #0a0e1a; /* Texto azul oscuro */
    padding: 8px 16px; /* Espaciado interno */
    border-radius: 6px; /* Bordes redondeados */
    font-size: 0.78rem; /* Tamaño de letra pequeño */
    font-weight: 700; /* Letra muy gruesa */
    text-align: center; /* Centra texto */
    line-height: 1.3; /* Espacio entre líneas de texto */
    transition: background 0.2s; /* Transición suave de color de fondo */
}

    .btn-diagnostico:hover {
        background-color: var(--color-amarillo-hover); /* Cambia el tono al pasar el mouse */
    }


/* ================================================================
   3. BOTONES GLOBALES
================================================================ */

.btn-accion-amarillo {
    display: inline-block; /* Se comporta como caja pero fluye con el texto */
    background-color: var(--color-amarillo); /* Fondo amarillo */
    color: #0a0e1a; /* Texto oscuro */
    font-weight: 700; /* Negrita */
    font-size: 1rem; /* Tamaño estándar */
    padding: 14px 32px; /* Relleno amplio */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a "mano" */
    transition: background 0.2s, transform 0.15s; /* Suaviza cambios */
    text-align: center; /* Centra el texto */
}

    .btn-accion-amarillo:hover {
        background-color: var(--color-amarillo-hover); /* Oscurece el fondo */
        transform: translateY(-2px); /* Eleva el botón ligeramente */
    }

.btn-grande {
    font-size: 1.15rem; /* Letra más grande */
    padding: 18px 48px; /* Más relleno */
    letter-spacing: 0.04em; /* Más espacio entre letras */
}

.btn-directo-ws {
    display: inline-flex; /* Alinea icono y texto */
    align-items: center; /* Centra verticalmente */
    gap: 8px; /* Espacio entre icono y texto */
    background-color: #25d366; /* Verde oficial WhatsApp */
    color: #fff; /* Texto blanco */
    padding: 10px 20px; /* Relleno */
    border-radius: 8px; /* Bordes redondeados */
    font-weight: 600; /* Semi negrita */
    font-size: 0.9rem; /* Tamaño de letra */
    transition: background 0.2s; /* Suaviza cambio de color */
}

    .btn-directo-ws:hover {
        background-color: #1fba58; /* Verde más oscuro al pasar el mouse */
    }

.btn-hero-palpitante {
    display: inline-block; /* Comportamiento de botón */
    background-color: var(--color-amarillo); /* Fondo amarillo */
    color: #0a0e1a; /* Texto oscuro */
    font-weight: 700; /* Negrita */
    font-size: 1.05rem; /* Tamaño de letra */
    padding: 15px 30px; /* Relleno */
    border-radius: 8px; /* Bordes redondeados */
    animation: pulso 2s ease-in-out infinite; /* Aplica la animación "pulso" infinita */
    transition: background 0.2s; /* Suaviza color al hover */
    text-align: center; /* Centra texto */
}

    .btn-hero-palpitante:hover {
        background-color: var(--color-amarillo-hover); /* Oscurece fondo */
        animation: none; /* Detiene la animación al pasar el mouse */
    }

@keyframes pulso {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.5); /* Sombra pegada al botón */
    }

    50% {
        box-shadow: 0 0 0 14px rgba(245, 197, 24, 0); /* Sombra se expande y desaparece */
    }
}

/* ================================================================
   8. COTIZACIÓN — FONDO Y BODY (Página específica)
================================================================ */

body.pagina-cotizacion {
    background-color: #001122; /* Asegura fondo oscuro */
    background-image: radial-gradient(ellipse at 10% 0%, rgba(245, 197, 24, 0.05) 0%, transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(245, 197, 24, 0.04) 0%, transparent 50%); /* Luces decorativas en esquinas opuestas */
    color: var(--color-blanco); /* Texto blanco */
}

.contenedor-venta {
    max-width: 1100px; /* Centrado */
    margin: 0 auto; /* Centrado */
    padding: 60px 40px var(--gap-seccion); /* Relleno personalizado */
}


/* ================================================================
   9. COTIZACIÓN — HERO (TEXTO + VIDEO)
================================================================ */

.hero-cotizacion {
    display: grid; /* Divide en dos columnas */
    grid-template-columns: 1fr 420px; /* Texto ocupa el resto, video tiene ancho fijo */
    gap: 50px; /* Espacio entre ellos */
    align-items: center; /* Centrado vertical */
    margin-bottom: var(--gap-seccion); /* Separación inferior */
}

.hero-cot-texto {
    display: flex; /* Apilado vertical */
    flex-direction: column;
    gap: 20px; /* Espacio entre título y descripción */
}

.titulo-hero-cot {
    font-size: clamp(1.8rem, 3vw, 2.6rem); /* Título fluido */
    font-weight: 900; /* Extra negrita */
    line-height: 1.2; /* Interlineado */
    color: var(--color-blanco); /* Blanco */
}

.descripcion-venta {
    font-size: 1rem; /* Texto base */
    color: var(--color-texto-claro); /* Gris */
    max-width: 520px; /* Ancho para lectura */
}
/* ================================================================
   SECCIÓN: HERO DE COTIZACIÓN - VIDEO Y SUBTEXTOS
================================================================ */

/* Subtexto descriptivo ubicado debajo de los títulos principales */
.subtexto-hero-cot {
    font-size: 0.88rem; /* Define un tamaño de letra pequeño y discreto */
    color: var(--color-texto-tenue); /* Usa la variable de color gris apagado para restar importancia */
    margin-top: -8px; /* Margen negativo para acercarlo y pegarlo al elemento de arriba */
}

/* Contenedor principal que agrupa el video y su barra de progreso */
.hero-cot-video {
    display: flex; /* Activa el modelo Flexbox */
    flex-direction: column; /* Apila los elementos en vertical (video arriba, barra abajo) */
    gap: 10px; /* Deja una separación de 10px entre el video y la barra */
}

/* Envoltura del video que actúa como el marco o contenedor rígido */
.video-wrapper {
    position: relative; /* Permite posicionar elementos absolutos (como el play o logos) adentro */
    width: 100%; /* Se estira para ocupar todo el ancho de su columna actual */
    aspect-ratio: 16 / 9; /* Mantiene la proporción clásica de pantalla panorámica de video */
    border-radius: 12px; /* Redondea las esquinas del marco de forma moderna */
    overflow: hidden; /* Recorta y esconde los bordes del video para que hereden el redondeo */
    background: #0d1220; /* Color azul muy oscuro que se muestra mientras el video carga */
    /* Aplica una sombra exterior profunda para dar relieve y un borde dorado brillante sutil */
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 197, 24, 0.15);
}

/* Contenedor de la vista previa (portada) que cubre el video antes de darle play */
.video-thumbnail {
    position: absolute; /* Se posiciona de forma absoluta sobre el wrapper */
    inset: 0; /* Atajo para estirarse a 0px de arriba, abajo, izquierda y derecha */
    cursor: pointer; /* Cambia el cursor a una mano indicando que se puede hacer clic */
    display: flex; /* Activa Flexbox para organizar el botón de reproducción */
    align-items: center; /* Centra el botón de play verticalmente */
    justify-content: center; /* Centra el botón de play horizontalmente */
}

/* Imagen de fondo de la portada */
.video-thumb-img {
    position: absolute; /* Se posiciona al fondo de la capa del thumbnail */
    inset: 0; /* Ocupa el 100% del espacio disponible */
    width: 100%; /* Asegura el ancho completo */
    height: 100%; /* Asegura el alto completo */
    object-fit: cover; /* Ajusta y escala la imagen para que llene el recuadro sin deformarse */
    filter: brightness(0.75); /* Aplica un filtro para oscurecer la imagen un 25% y que resalte el play */
}

/* Capa oscura superpuesta para dar más contraste al botón */
.video-overlay {
    position: absolute; /* Capa absoluta sobre la imagen de fondo */
    inset: 0; /* Cubre toda la extensión del video */
    background: rgba(0, 0, 0, 0.35); /* Fondo negro con un 35% de opacidad (transparente) */
}

/* Botón interactivo para reproducir el video */
.btn-play {
    position: relative; /* Lo posiciona de forma relativa sobre las capas de fondo */
    z-index: 2; /* Lo empuja hacia adelante para asegurar que esté por encima de la portada */
    background: none; /* Elimina cualquier fondo predeterminado del botón */
    border: none; /* Elimina los bordes predeterminados del botón */
    cursor: pointer; /* Muestra la mano interactiva al pasar el mouse */
    width: 72px; /* Ancho fijo de 72 píxeles */
    height: 72px; /* Alto fijo de 72 píxeles */
    transition: transform 0.2s; /* Suaviza la transición de tamaño durante las animaciones */
}

    /* Animación cuando el usuario sitúa el cursor sobre el botón play */
    .btn-play:hover {
        transform: scale(1.1); /* Agranda el botón un 10% de forma fluida */
    }

    /* Ajustes del dibujo vectorial interno del botón play */
    .btn-play svg {
        width: 72px; /* Fuerza al dibujo a medir 72px de ancho */
        height: 72px; /* Fuerza al dibujo a medir 72px de alto */
        drop-shadow: 0 2px 12px rgba(0,0,0,0.8); /* Le inyecta una sombra directamente a la silueta del icono */
    }

/* Mini logo de la marca ubicado en la esquina del video */
.video-logo-esquina {
    position: absolute; /* Posicionamiento flotante sobre el video */
    top: 10px; /* Lo separa 10px del borde superior */
    right: 10px; /* Lo separa 10px del borde derecho */
    z-index: 3; /* Lo coloca por encima de la portada y los controles */
    width: 44px; /* Define un tamaño pequeño de 44 píxeles */
    opacity: 0.85; /* Lo hace ligeramente semitransparente para que no estorbe */
}

    /* Control interno de la imagen del mini logo */
    .video-logo-esquina img {
        width: 100%; /* Ocupa la totalidad de los 44px asignados al padre */
    }

/* Estado de emergencia en caso de que la imagen de portada falle en cargar */
.video-thumbnail.thumb-sin-imagen {
    background: #0a0e1a; /* Pone un fondo degradado con los azules de la marca */
}

/* Elemento del video nativo real */
.video-real {
    position: absolute; /* Se posiciona exactamente en el espacio del marco */
    inset: 0; /* Llena todo el espacio del wrapper */
    width: 100%; /* Fuerza el ancho completo */
    height: 100%; /* Fuerza el alto completo */
    object-fit: cover; /* Evita franjas negras estirando el video si es necesario */
    background: #000; /* Fondo negro absoluto para el reproductor */
}

/* Utilidad general para esconder elementos mediante programación */
.oculto {
    display: none !important; /* Oculta por completo el elemento y anula cualquier otra regla */
}

/* Barra decorativa de progreso debajo del video */
.video-barra-progreso {
    height: 4px; /* Define un grosor muy fino e higiénico de 4px */
    background: rgba(255,255,255,0.1); /* Fondo gris traslúcido muy suave */
    border-radius: 2px; /* Redondea las esquinas de la barra */
    overflow: hidden; /* Evita que el relleno se salga de las esquinas curvas */
}

/* Relleno dinámico que indica la cantidad de progreso del video */
.video-barra-fill {
    height: 100%; /* Ocupa todo el alto de la barra (4px) */
    width: 30%; /* Progreso estático de arranque al 30% */
    /* Aplica un degradado horizontal desde el amarillo de tu marca hacia uno más suave */
    background: #0a0e1a;
    border-radius: 2px; /* Redondea el extremo final del relleno */
}


/* ================================================================
   10. COTIZACIÓN — SECCIÓN PROBLEMAS Y SUBSECCIONES
================================================================ */

/* Contenedor general que abarca toda la sección de problemas */
.seccion-problemas {
    padding: 80px 5%; /* Margen de respiración: 80px arriba/abajo y 5% lateral */
    background-color: #001122; /* Azul oscuro premium idéntico al de diagnóstico */
    text-align: center; /* Alinea de forma automática los títulos al centro */
}

/* Título principal de la sección de problemas */
.titulo-problemas {
    color: #ffffff; /* Texto blanco puro */
    font-size: 2.2rem; /* Escala grande para llamar la atención del usuario */
    margin-bottom: 50px; /* Espacio de separación con la grilla inferior */
    text-transform: uppercase; /* Convierte todas las letras a mayúsculas */
    letter-spacing: 1px; /* Añade una separación fina entre caracteres */
}

/* Grilla estructural que organiza los bloques de fallas en columnas */
.grilla-problemas {
    display: grid; /* Activa el sistema de rejillas CSS Grid Layout */
    grid-template-columns: repeat(3, 1fr); /* Divide la fila en 3 columnas exactamente iguales (1 fracción cada una) */
    gap: 25px; /* Espacio idéntico de separación interna entre las tarjetas */
    max-width: 1200px; /* Controla el ancho máximo de la grilla en monitores gigantes */
    margin: 0 auto; /* Centra la grilla completa en el eje horizontal */
}

/* Estructura individual de cada tarjeta de problema */
.item-problema {
    background-color: #141e35; /* Fondo azul intermedio para generar contraste con el fondo global */
    padding: 25px; /* Espacio interno para que el contenido no quede apretado */
    border-radius: 10px; /* Curvatura estética en los bordes */
    border: 1px solid rgba(212, 168, 67, 0.15); /* Bordes con un destello dorado muy sutil */
    text-align: left; /* Mantiene el texto de la problemática alineado a la izquierda */
    display: block; /* Comportamiento de bloque para que el texto salte de renglón de forma natural */
    align-items: flex-start; /* Propiedad heredada sin efecto actual debido al uso de 'display: block' */
    transition: transform 0.3s ease; /* Suaviza el movimiento físico al pasar el mouse */
}

    /* Comportamiento visual interactivo al posar el cursor sobre una tarjeta */
    .item-problema:hover {
        transform: translateY(-5px); /* Hace que la tarjeta se eleve verticalmente 5px */
        border-color: #f5c518; /* Convierte el sutil borde dorado en el amarillo vivo de tu marca */
    }

/* Estilos de los iconos (como las X o chulitos) dentro de las tarjetas */
.icono-check-amarillo {
    margin-right: 15px; /* Separa el icono del texto del problema */
    font-size: 1.1rem; /* Escala el tamaño del símbolo */
    flex-shrink: 0; /* Previene que el navegador deforme el icono si hay mucho texto */
}

/* Modificador de texto resaltado para frases de impacto comercial */
.texto-resaltado-amarillo {
    color: #f5c518; /* Pinta el texto con el amarillo oficial */
    font-weight: 600; /* Aplica un grosor de letra seminegrita para destacar */
}


/* ================================================================
   7. ADAPTACIÓN PARA MÓVILES (RESPONSIVE)
================================================================ */

/* Reglas aplicadas para pantallas medianas como Tablets */
@media (max-width: 992px) {
    .grilla-problemas {
        grid-template-columns: repeat(2, 1fr); /* Reorganiza la estructura de la grilla a solo 2 columnas */
    }
}

/* Reglas aplicadas para pantallas pequeñas como Smartphones */
@media (max-width: 650px) {
    .grilla-problemas {
        grid-template-columns: 1fr; /* Reduce el diseño a una única columna vertical */
    }

    .titulo-problemas {
        font-size: 1.6rem; /* Reduce la escala del título para que no rompa la pantalla */
    }
}


/* ================================================================
   PÁRRAFO COMPLEMENTARIO DE VENTAS (CENTRADOS)
================================================================ */

/* Bloque explicativo inferior */
.descripcion-venta {
    display: block; /* Asegura el comportamiento de bloque en el elemento */
    width: 100%; /* Se extiende a lo largo de todo el ancho del contenedor */
    text-align: center !important; /* CORREGIDO: Fuerza el centrado horizontal del texto obligatoriamente */
    margin: 20px auto 0; /* Aplica un margen superior de 20px y centra la caja con 'auto' */
    font-size: 1.05rem; /* Tamaño de fuente ligeramente superior para mejorar legibilidad */
}

/*SECCION FALTA ESTRATEGIA ========================================*/

.falta-estrategia {
    padding: 40px 5%; /*Espacio arriba y abajo y 5% lados */
    background-color: #001122; /* El azul oscuro profundo que usamos en diagnóstico */
    text-align: center; /* centra el titulo principal de la seccion */
}

.titulo-metodo {
    color: #ffffff; /* texto blanco puro */
    font-size: 2.2rem; /* tamaño grande para impacto visual */
    margin-bottom: 30px; /* separa el titulo de los problemas de estrategia */
    text-transform: uppercase; /* pone el titulo en mayusculas para mas fuerza */
    letter-spacing: 1px; /* espaciado sutil entre letras */
}

.texto-metodo, .texto-antes-de-vender {
    color: #ffffff; /* texto blanco puro */
    font-size: 1.2rem; /* tamaño grande para impacto visual */
    letter-spacing: 1px; /* espaciado sutil entre letras */
    padding: 10px;
}

.vender-sin-metodo {
    background-color: #141e35; /* Azul un poco más claro para que resalte sobre el fondo */
    padding: 25px; /* Espacio interno para que el texto no toque los bordes */
    border-radius: 10px; /* Redondea las esquinas de forma moderna */
    border: 1px solid rgba(212, 168, 67, 0.15); /* Borde dorado muy tenue y elegante */
    text-align: left; /* El contenido de la tarjeta se lee de izquierda a derecha */
    display: block; /* 'block' para que el texto fluya normal */
    align-items: flex-start; /* Alinea el icono arriba aunque el texto sea de varios renglones */
    transition: transform 0.3s ease; /* Prepara la animación para el efecto hover */
}

/* SECCION ANTES DE VENDER ============================================================*/

.seccion-antes-de-vender {
    padding: 40px 5%; /* Espacio generoso arriba/abajo y 5% a los lados */
    background-color: #001122; /* El azul oscuro profundo que usamos en diagnóstico */
    text-align: center; /* Centra el título principal de la sección */
}

.titulo-seccion-venta {
    color: #ffffff; /* Texto blanco puro */
    font-size: 2.2rem; /* Tamaño grande para impacto visual */
    margin-bottom: 50px; /* Separa el título de los problemas */
    text-transform: uppercase; /* Pone el título en mayúsculas para más fuerza */
    letter-spacing: 1px; /* Espaciado sutil entre letras */
}

.grilla-diagnostico-2col {
    display: grid; /* Activa el sistema de rejilla moderno */
    /* Crea 3 columnas iguales que se reparten el espacio (1fr cada una) */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Espacio de separación entre las tarjetas */
    max-width: 1200px; /* Evita que los cuadros se estiren demasiado en pantallas 4K */
    margin: 0 auto; /* Centra todo el bloque de la grilla en la página */
}

.item-diag {
    font-size: 0.95rem;
    color: var(--color-texto-claro);
    display: flex; /* Alinea icono/check */
    align-items: flex-start;
    gap: 10px;
}


/* (Sección comentada de tarjetas antiguas omitida en explicación detallada) */


/* ================================================================
   12. COTIZACIÓN — SECCIÓN FRANK CORREA (Perfil)
================================================================ */
/* Foto a la izq, texto a la derecha */
.seccion-frank {
    display: grid; /* Activa el sistema de rejilla Grid Layout */
    grid-template-columns: 200px 1fr; /* Crea 2 columnas: la primera de 200px fijos para la foto, la segunda toma el resto del espacio (1fr) */
    gap: 40px; /* Deja un espacio de separación de 40px entre la foto y el texto */
    align-items: center; /* Centra verticalmente la foto y el bloque de texto entre sí */
    background: var(--color-fondo-medio); /* Aplica el color de fondo usando la variable global establecida */
    border: 1px solid var(--color-borde); /* Agrega un borde fino de 1px usando la variable de color de bordes */
    border-radius: 16px; /* Redondea las esquinas del contenedor con un radio de 16px */
    padding: 40px; /* Espaciado interno de 40px para que el contenido no toque los bordes */
    margin-bottom: var(--gap-seccion); /* Deja un espacio de separación exterior abajo usando la variable global */
}

/* Tamaño fijo */
.frank-foto img {
    width: 200px; /* Fuerza un ancho exacto de 180px para la imagen */
    height: 200px; /* Fuerza una altura exacta de 180px para que sea perfectamente cuadrada */
    object-fit: cover; /* Corta para ser cuadrado; ajusta la imagen al contenedor sin deformarla o estirarla */
    object-position: top; /* Centra en la cabeza; enfoca el recorte en la parte superior de la foto */
    border-radius: 50%; /* Foto circular; vuelve las esquinas totalmente redondas */
    border: 3px solid var(--color-amarillo); /* Aro amarillo; dibuja un contorno grueso con el amarillo de la marca */
}

.frank-resultado-label {
    font-size: 0.9rem; /* Tamaño de letra ligeramente reducido e higiénico */
    color: var(--color-texto-claro); /* Aplica el tono de color claro definido para textos secundarios */
    margin-bottom: 4px; /* Separa la etiqueta 4px del elemento que venga abajo */
}

    /* Cursiva amarilla */
    .frank-resultado-label em {
        color: var(--color-amarillo); /* Cambia el color del texto enfatizado al amarillo de la marca */
        font-style: italic; /* Fuerza a que la tipografía se incline en estilo cursiva */
    }

.frank-nombre {
    font-size: 1.6rem; /* Tamaño de fuente grande y destacado para el nombre del profesional */
    color: var(--color-blanco); /* Pinta el texto en color blanco puro */
    font-weight: 800; /* Aplica un grosor de letra extra negrita (muy grueso) */
    margin-bottom: 2px; /* Espacio mínimo de 2px de separación con el cargo inferior */
}

.frank-cargo {
    font-size: 0.9rem; /* Tamaño de letra sutil y profesional para el texto del cargo */
    color: var(--color-texto-claro); /* Aplica el color claro de texto de las variables globales */
    margin-bottom: 18px; /* Separa el bloque del cargo 18px de la lista de logros */
}

/* Lista de logros vertical */
.frank-logros {
    display: flex; /* Activa el modelo flexible Flexbox */
    flex-direction: column; /* Apila los logros en vertical, uno debajo del otro */
    gap: 10px; /* Separa cada ítem de logro exactamente 10px entre sí */
    margin-bottom: 18px; /* Separa toda la lista 18px de la cita o testimonio inferior */
}

    .frank-logros li {
        font-size: 0.96rem; /* Tamaño de fuente equilibrado para la lectura de viñetas */
        color: var(--color-texto-claro); /* Usa el color de texto claro de tus variables globales */
        /*display: flex; /* Activa Flexbox para cada ítem individual */
        align-items: flex-start; /* Alinea el icono o viñeta arriba si el texto ocupa más de una línea */
        gap: 10px; /* Separa el icono/símbolo 10px del texto del logro */
    }

/* Texto tipo testimonio */
.frank-cita {
    font-style: italic; /* Inclina el texto en cursiva para dar formato de testimonio */
    color: var(--color-amarillo); /* Aplica el amarillo de la marca al texto de la cita */
    font-size: 0.95rem; /* Tamaño de fuente un poco más visible que los textos secundarios */
}
/* ================================================================
   13. COTIZACIÓN — CTA FINAL Y FORMULARIO
================================================================ */

.final-cta-wrapper {
    text-align: center; /* Centrado final */
    margin-bottom: 50px;
}

.contenedor-formulario-final {
    background: var(--color-fondo-tarjeta); /* Fondo de caja */
    border: 1px dashed var(--color-borde); /* Borde punteado */
    border-radius: 12px;
    padding: 50px 40px;
    text-align: center;
    color: var(--color-texto-tenue);
    font-size: 0.9rem;
    min-height: 140px; /* Altura mínima */
    display: flex; /* Centrado interno total */
    align-items: center;
    justify-content: center;
}


/* ================================================================
   14. UTILIDADES GLOBALES (Clases para usar en cualquier sitio)
================================================================ */

.texto-resaltado-amarillo {
    color: var(--color-amarillo); /* Aplica amarillo */
    font-weight: 700; /* Aplica negrita */
}


/* ================================================================
   RESPONSIVE — MEDIA QUERIES (Ajustes para otros dispositivos)
================================================================ */

/* Ajustes para Tablets y móviles grandes (menos de 900px) */
@media (max-width: 900px) {

    .hero-cotizacion {
        grid-template-columns: 1fr; /* Una sola columna */
    }

    .hero-cot-video {
        order: -1; /* El video se pone primero arriba */
    }

    .seccion-frank {
        grid-template-columns: 1fr; /* Una sola columna */
        text-align: center; /* Todo centrado */
    }

    .frank-foto {
        display: flex;
        justify-content: center; /* Centra la foto circular */
    }

    .frank-logros li {
        justify-content: flex-start; /* Alinea los logros al inicio */
    }

    .hero-principal {
        grid-template-columns: 1fr; /* Hero principal en una columna */
        text-align: center;
        padding: 40px 24px;
    }

    .hero-figura {
        max-width: 300px; /* Foto más pequeña en móvil */
        margin: 0 auto;
    }

    .hero-pilares {
        justify-content: center; /* Centra los pilares */
    }

    .grilla-diagnostico-2col {
        grid-template-columns: 1fr; /* Diagnóstico en una columna */
    }
}

/* Ajustes para móviles pequeños (menos de 600px) */
@media (max-width: 600px) {

    .main-header {
        padding: 12px 16px; /* Menos espacio en cabecera */
        flex-wrap: wrap; /* Permite que el contenido baje si no cabe */
    }

    .nav-header {
        display: none; /* Esconde el menú de texto en móviles */
    }

    .contenedor-venta {
        padding: 30px 16px 60px; /* Menos margen lateral */
    }

    .seccion-problemas {
        padding: 30px 20px; /* Caja de problemas más compacta */
    }

    .seccion-frank {
        padding: 24px 20px; /* Perfil de Frank más compacto */
    }

    .contenedor-footer {
        grid-template-columns: 1fr; /* Footer en una sola columna */
    }
}

/*SECCION SEMAFORO RESULTADOS ====================================*/
.seccion-resultado {
    padding: 40px 5%; /* Espacio generoso arriba/abajo y 5% a los lados */
    background-color: #001122; /* El azul oscuro profundo que usamos en diagnóstico */
    text-align: center; /* Centra el título principal de la sección */
}

.semaforo-resultados {
    color: #ffffff; /* Texto blanco puro */
    font-size: 2.2rem; /* Tamaño grande para impacto visual */
    margin-bottom: 30px; /* Separa el título de los problemas */
    text-transform: uppercase; /* Pone el título en mayúsculas para más fuerza */
    letter-spacing: 1px; /* Espaciado sutil entre letras */
    text-align:center; /* alineacion de texto al centro */
}

.grilla-resultados {
    display: grid; /* Activa el sistema de rejilla moderno */
    /* Crea 3 columnas iguales que se reparten el espacio (1fr cada una) */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Espacio de separación entre las tarjetas */
    max-width: 1200px; /* Evita que los cuadros se estiren demasiado en pantallas 4K */
    margin: 20px auto; /* Centra todo el bloque de la grilla en la página */   
}

.texto-resultados {
    color: #ffffff; /* texto blanco puro */
    font-size: 1.2rem; /* tamaño grande para impacto visual */
    text-transform: capitalize; /* pone el titulo en mayusculas para mas fuerza */
    letter-spacing: 1px; /* espaciado sutil entre letras */
    padding: 20px;
    text-align:center; /* alinea texto en el centro */
}

/* SECCION APLICAR VENTAS ======================================================= */
.seccion-aplicar-ventas {
    padding: 40px 5%; /* Espacio generoso arriba/abajo y 5% a los lados */
    background-color: #001122; /* El azul oscuro profundo que usamos en diagnóstico */
    text-align: center; /* Centra el título principal de la sección */
}

.titulo-aplicar-ventas {
    color: #ffffff; /* Texto blanco puro */
    font-size: 2.2rem; /* Tamaño grande para impacto visual */
    margin-bottom: 30px; /* Separa el título de los problemas */
    text-transform: uppercase; /* Pone el título en mayúsculas para más fuerza */
    letter-spacing: 1px; /* Espaciado sutil entre letras */
    text-align: center; /* alineacion de texto al centro */
}

.grilla-aplicar-ventas {
    display: grid; /* Activa el sistema de rejilla moderno */
    /* Crea 3 columnas iguales que se reparten el espacio (1fr cada una) */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Espacio de separación entre las tarjetas */
    max-width: 1200px; /* Evita que los cuadros se estiren demasiado en pantallas 4K */
    margin: 20px auto; /* Centra todo el bloque de la grilla en la página */
}

/* ================================================================
   RELOJ EN CUENTA REGRESIVA (EMERGENCIA Y ALTA CONVERSIÓN)
================================================================ */

/* Selector del contenedor principal de soporte (el bloque del reloj) */
aside.contenedor-cuenta-regresiva {
    background-color: #141e35; /* Fondo azul tarjeta original para integrarse con la página */
    border: 2px solid #f5c518; /* Borde con el amarillo oficial de alta conversión */
    border-radius: 12px; /* Suaviza las esquinas del cuadro con un radio moderno de 12px */
    padding: 20px; /* Crea un colchón de aire interno para que los números no toquen los bordes */
    max-width: 700px; /* Limita el ancho del cuadro para mantenerlo compacto y estético */
    margin: 30px auto; /* Centra horizontalmente el bloque completo y deja un margen de 30px arriba y abajo */
    text-align: center; /* Alinea de forma automática todos los textos y números hacia el centro */
    /* Selector del párrafo introductorio de alerta */
}
    .texto-urgencia {
        color: #f5c518; /* Color rojo claro de advertencia */
        font-size: 1.5rem; /* Establece un tamaño de fuente estándar y cómodo */
        font-weight: 700; /* Negrita fuerte para marcar autoridad */
        margin-bottom: 12px; /* Genera un espacio de 12px abajo para separar el texto de los números */
        text-transform: uppercase; /* Convierte automáticamente todo el texto a mayúsculas para aumentar la urgencia */
        letter-spacing: 0.8px; /* Separa sutilmente las letras para un acabado profesional de alerta */
    }

.texto-urgencia-blanco {
    color: #1cfb03; /* Color rojo claro de advertencia */
    font-size: 1.5rem; /* Establece un tamaño de fuente estándar y cómodo */
    font-weight: 700; /* Negrita fuerte para marcar autoridad */
    margin-bottom: 12px; /* Genera un espacio de 12px abajo para separar el texto de los números */
    /*text-transform: uppercase; /* Convierte automáticamente todo el texto a mayúsculas para aumentar la urgencia */
    letter-spacing: 0.8px; /* Separa sutilmente las letras para un acabado profesional de alerta */
}

/* Selector de la etiqueta contenedora del tiempo total */
time.reloj-contador {
    display: flex; /* Convierte el contenedor en Flexbox para alinear sus hijos en fila */
    justify-content: center; /* Centra la fila de elementos horizontalmente dentro de la caja */
    align-items: center; /* Alinea verticalmente los números y los dos puntos en el mismo eje */
    gap: 12px; /* Deja una separación idéntica y exacta de 12px entre cada elemento interno */
}
    /* Selector de los bloques que encierran cada unidad (Minutos o Segundos) */
    data.bloque-tiempo {
        display: flex; /* Activa Flexbox interno para ordenar el número y su etiqueta pequeña */
        flex-direction: column; /* Cambia la orientación a columna para colocar el número arriba y la palabra abajo */
        align-items: center; /* Centra horizontalmente el número con su palabra descriptiva inferior */
    }
    /* Selector específico para los spans que renderizan los números dinámicos */
    .bloque-tiempo span {
        color: #ffffff; /* Números en blanco puro para que contrasten fuertemente */
        font-size: 3rem; /* Aumentamos un poco el tamaño para darle más peso visual */
        font-weight: 800; /* Aplica un grosor extra-negrita */
        line-height: 1; /* Elimina los márgenes invisibles de las fuentes */
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Destello sutil blanco en los números */
    }
    /* Selector para las etiquetas de texto subordinado (Min / Seg) */
    .bloque-tiempo small {
        color: #ff9999; /* Color rojo suave pastel para que sea legible pero secundario */
        font-size: 0.75rem; /* Reduce el tamaño para mantener la jerarquía */
        text-transform: uppercase; /* Convierte a mayúsculas */
        font-weight: 600;
    }
    /* Selector para el carácter estético de separación (:) */
    .dos-puntos {
        color: #ff3333; /* Los dos puntos brillan en color rojo de emergencia */
        font-size: 2.2rem; /* Escala el tamaño para que sea proporcional */
        font-weight: 700; /* Define un grosor negrita marcado */
        line-height: 1; /* Ajusta su altura compacta */
        margin-bottom: 15px; /* Añade un margen inferior para equilibrar la alineación */
    }
    /* ================================================================
   ANIMACIÓN NATIVA DE ADVERTENCIA (KEYFRAMES)
================================================================ */
    @keyframes pulsoAlerta {
        0% {
            border-color: #ff3333;
            box-shadow: 0 0 20px rgba(255, 51, 51, 0.25);
        }

        50% {
            border-color: #ff9999; /* El borde se aclara a mitad de la animación */
            box-shadow: 0 0 30px rgba(255, 51, 51, 0.5); /* La sombra se expande simulando una baliza */
        }

        100% {
            border-color: #ff3333;
            box-shadow: 0 0 20px rgba(255, 51, 51, 0.25);
        }
    }

/* ================================================================
   MARQUESINA DE TESTIMONIOS SEMÁNTICA (OPTIMIZADA PARA GOOGLE ADS)
================================================================ */

/* Contenedor externo principal de la sección */
.text-center {
    color: #ffffff; /* texto blanco puro */
    font-size: 2.2rem; /* tamaño grande para impacto visual */
    margin-bottom: 30px; /* separa el titulo de los problemas de estrategia */
    text-transform: uppercase; /* pone el titulo en mayusculas para mas fuerza */
    letter-spacing: 1px; /* espaciado sutil entre letras */
    text-align:center;
}


aside.seccion-marquesina-cartas {
    background-color: #001122; /* Fondo azul oscuro profundo oficial de la página */
    /*padding: 60px 0px 80px; /* Colchón de espacio arriba, a los lados y abajo */
    overflow: hidden; /* Evita desbordamientos o barras de scroll no deseadas en la web */
}

/* Máscara de recorte (reemplazó al div .marquesina-mask) */
section.marquesina-mask {
    width:100%; /* ocupa todo el ancho de la pagina*/
    max-width: none; /* Centra el contenido en pantallas grandes con un ancho límite */
    margin: 0 ; /* Aplica márgenes automáticos a los lados para centrar */
    overflow: hidden; /* Oculta las cartas que se van saliendo de la zona visible */
}

/* Pista larga animada (reemplazó al div y ahora es una lista UL) */
ul.marquesina-track {
    display: flex; /* Coloca todos los LI (cartas) en una sola fila horizontal fija */
    gap: 30px; /* Espacio idéntico de 30px entre cada tarjeta */
    list-style: none; /* Quita los viñetas o puntos negros por defecto de las listas */
    padding: 0; /* Elimina sangrías automáticas del navegador */
    margin: 0; /* Resetea los márgenes por defecto */
    /* ANIMACIÓN: Mueve la fila en bucle continuo. Modifica los segundos (35s) si quieres que vaya más lento/rápido */
    animation: scroll-derecha 8s linear infinite;
}

    /* Efecto interactivo: Pausa el movimiento cuando el usuario pone el cursor encima para leer con calma */
    ul.marquesina-track:hover {
        animation-play-state: paused; /* Congela la animación temporalmente */
    }

/* Elemento de lista individual (reemplazó al div .marquesina-slide) */
li.marquesina-slide {
    flex: 0 0 auto; /* Impide estrictamente que Flexbox deforme, encoja o estire las tarjetas */
}

    /* Contenedor interno de la imagen y su texto explicativo */
    li.marquesina-slide figure {
        margin: 0; /* Elimina los márgenes automáticos que los navegadores le imponen a <figure> */
        padding: 10px; /* Pequeño espacio interno decorativo */
        background-color: #001122; /* Fondo azul tarjeta oficial para darle cuerpo y estructura */
        border: 1px solid rgba(212, 168, 67, 0.15); /* Borde dorado tenue metalizado */
        border-radius: 12px; /* Redondea las esquinas de la tarjeta */
        box-shadow: 0 6px 20px rgba(0,0,0,0.5); /* Sombra pesada para que la tarjeta resalte flotando sobre el fondo */
        transition: transform 0.3s ease, border-color 0.3s ease; /* Suaviza el efecto hover */
        text-align: center; /* Centra la imagen y el figcaption internamente */
    }

        /* Efecto visual al interactuar con una tarjeta específica */
        li.marquesina-slide figure:hover {
            transform: scale(1.03); /* Agranda sutilmente un 3% la tarjeta seleccionada */
            border-color: #f5c518; /* Enciende el borde con tu amarillo vibrante de conversión */
        }

    /* Control estricto de la imagen de la carta de recomendación */
    li.marquesina-slide img {
        height: 320px; /* Obliga a todas las imágenes a tener exactamente la misma altura (Clave) */
        width: auto; /* Mantiene la proporción horizontal original de cada carta para que no se deforme */
        object-fit: contain; /* Asegura que toda la carta se dibuje completa dentro del espacio */
        border-radius: 6px; /* Redondea suavemente los bordes del papel de la carta */
    }

    /* Texto semántico que indexa Google Ads (Debajo de cada foto) */
    li.marquesina-slide figcaption {
        color: #cccccc; /* Color gris claro de tus variables secundarias */
        font-size: 0.8rem; /* Letra compacta pero perfectamente legible */
        font-weight: 600; /* Un punto de grosor corporativo */
        margin-top: 12px; /* Separa el texto de la base de la foto */
        text-transform: uppercase; /* Pone la descripción en mayúsculas estéticas */
        letter-spacing: 0.5px; /* Espaciado limpio entre letras */
    }

/* ================================================================
   VENTANA EMERGENTE (DIALOG LIGHTBOX) PARA VER CARTAS
================================================================ */

/* Selector de la ventana emergente nativa <dialog> */
dialog.ventana-modal-carta {
    background: #001122; /* Quita el fondo blanco por defecto del dialog */
    border: none; /* Elimina los bordes rígidos predeterminados */
    padding: 0; /* Remueve rellenos automáticos */
    max-width: 90vw; /* Limita el ancho al 90% del tamaño total de la pantalla */
    max-height: 85vh; /* Limita la altura al 85% de la pantalla para que no se desborde */
    overflow: hidden; /* Oculta cualquier imperfección del renderizado */
}

    /* ::backdrop: Pseudo-elemento nativo que genera la capa oscura detrás de la carta */
    dialog.ventana-modal-carta::backdrop {
        background-color: #001122; /* Aplica tu azul oscuro  */
        backdrop-filter: blur(5px); /* Efecto premium que desenfoca sutilmente el fondo de la web */
    }

/* Contenedor figure dentro del modal */
.contenido-modal {
    margin: 0; /* Resetea los márgenes automáticos */
    display: flex; /* Flexbox para centrar todo */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
}

    /* La imagen de la carta ya ampliada */
    .contenido-modal img {
        max-width: 100%; /* Se adapta de forma responsiva al ancho de la ventana */
        max-height: 80vh; /* Evita que la carta sea más alta que la pantalla del usuario */
        object-fit: contain; /* Asegura que el documento se lea perfecto y sin deformaciones */
        border: 2px solid #f5c518; /* Enmarca la carta con el amarillo oficial de conversión */
        border-radius: 8px; /* Suaviza las esquinas de la foto grande */
        box-shadow: 0 10px 40px rgba(0,0,0,0.8); /* Sombra muy profunda para darle volumen sobre el fondo */
    }

/* Botón flotante para cerrar (La X) */
.cerrar-modal {
    position: absolute; /* Flota de forma libre en el cuadro */
    top: 10px; /* Lo separa 10px del borde superior */
    right: 10px; /* Lo separa 10px del borde derecho */
    background: #001122; /* Fondo azul tarjeta corporativo */
    border: 1px solid #f5c518; /* Borde dorado de alta conversión */
    color: #f5c518; /* El símbolo X se pinta de amarillo */
    font-size: 2rem; /* Tamaño grande para que sea fácil darle clic con el dedo en móviles */
    line-height: 1; /* Altura de línea ajustada compacta */
    width: 44px; /* Ancho perfecto para usabilidad móvil */
    height: 44px; /* Alto idéntico para que sea un botón cuadrado/circular */
    border-radius: 50%; /* Botón completamente redondo */
    cursor: pointer; /* Muestra el cursor de mano interactivo */
    display: flex; /* Activa Flexbox para centrar la X */
    justify-content: center; /* Centrado horizontal del carácter */
    align-items: center; /* Centrado vertical del carácter */
    padding-bottom: 4px; /* Ajuste visual menor para centrar el símbolo geométrico */
    transition: background 0.2s, color 0.2s; /* Suaviza el cambio de color al pasar el mouse */
}

    /* Cambio de estilo interactivo al pasar el mouse sobre la X */
    .cerrar-modal:hover {
        background: #f5c518; /* Invierte el fondo al amarillo de la marca */
        color: #141e35; /* Las letras cambian al azul oscuro */
    }



/* ================================================================
   ADAPTACIÓN PARA DISPOSITIVOS MÓVILES (RESPONSIVE)
================================================================ */
@media (max-width: 650px) {
    ul.marquesina-track {
        gap: 15px; /* Reduce el espacio entre cartas a la mitad en pantallas pequeñas */
    }

    li.marquesina-slide img {
        height: 200px; /* Achica la altura de las cartas a 200px para que no saturen el móvil */
    }

    li.marquesina-slide figcaption {
        font-size: 0.7rem; /* Texto marginalmente más pequeño en celulares */
    }
}

/* ================================================================
   KEYFRAMES DE ANIMACIÓN (DIRECCIÓN: HACIA LA DERECHA)
================================================================ */
@keyframes scroll-derecha {
    0% {
        transform: translateX(-50%); /* Inicia la pista desplazada exactamente a la mitad (zona de clones) */
    }

    100% {
        transform: translateX(0); /* Fluye de regreso hacia el origen, creando el efecto de movimiento a la derecha */
    }
}

/* FOOTER - ESTILO FINAL UNIFICADO */

/* Contenedor principal que envuelve todo el pie de página */
.main-footer {
    background-color: #001122; /* Color azul marino profundo de la marca */
    padding: 20px 5% 10px; /* Espaciado: 60px arriba, 5% a los lados, 20px abajo */
    border-top: 1px solid #d4af37; /* Línea delgada dorada que separa el footer del contenido */
    color: white; /* Color de texto blanco por defecto */
}

/* Envoltura interna que organiza las columnas */
.contenedor-footer {
    display: flex; /* Activa Flexbox para poner las columnas en fila */
    justify-content: space-between; /* Distribuye las columnas con espacio máximo entre ellas */
    align-items: flex-start; /* Alinea las columnas desde su parte superior */
    flex-wrap: wrap; /* Permite que las columnas bajen si no caben en la pantalla */
    gap: 15px; /* Espacio de separación entre cada columna */
    max-width: 1200px; /* Ancho máximo permitido para el contenido del footer */
    margin: 0 auto; /* Centra todo el contenedor en la pantalla */
}

/* 1. CONFIGURACIÓN DE CADA COLUMNA INDIVIDUAL */
.footer-column {
    flex: 1; /* Hace que todas las columnas ocupen el mismo ancho */
    display: flex; /* Activa Flexbox interno para organizar logo y textos */
    flex-direction: column; /* Ordena los elementos uno debajo del otro */
    align-items: center; /* Centra horizontalmente todo el contenido de la columna */
    text-align: center; /* Centra el texto de los párrafos y títulos */
    padding: 15px; /* Espacio interno para que el contenido no toque los bordes */
}

    /* 2. MANIPULACIÓN DE LA IMAGEN (Logo dentro de la columna) */
    .footer-column img {
        width: 140px; /* Define el ancho fijo del logo */
        height: auto; /* Mantiene la proporción para que no se vea estirado */
        max-width: 100%; /* Si la columna se achica, el logo también se encoge solo */
        object-fit: contain; /* Asegura que el logo se ajuste al espacio sin recortarse */
        margin-bottom: 20px; /* Separa el logo del texto que viene debajo */
        filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.5)); /* Crea una sombra suave tras el logo */
        display: block; /* Elimina espacios en blanco extraños debajo de la imagen */
    }

    /* 3. AJUSTE DEL TEXTO DESCRIPTIVO (Eslogan o info) */
    .footer-column p {
        font-size: 1rem; /* Tamaño de fuente pequeño y elegante */
        color: #cccccc; /* Color gris claro para que sea legible pero discreto */
        line-height: 1.5; /* Espaciado entre renglones para mejor lectura */
        max-width: 260px; /* Limita el ancho del texto para que no se estire demasiado */
        margin: 0 auto; /* Asegura que el bloque de texto esté centrado */
    }

    /* Títulos de las columnas (Navegación, Contacto, Síguenos) */
    .footer-column h3 {
        color: #d4af37; /* Color dorado para resaltar los títulos */
        margin-bottom: 20px; /* Espacio debajo del título */
        font-size: 1.4rem; /* Tamaño de fuente destacado */
        text-transform: uppercase; /* Convierte todo el título a mayúsculas */
    }

    /* Estilos para las listas de enlaces (Navegación) */
    .footer-column ul {
        list-style: none; /* Quita los puntos negros de la lista */
        padding: 0; /* Elimina el margen interno por defecto de las listas */
    }

        /* Cada ítem de la lista */
        .footer-column ul li {
            margin-bottom: 12px; /* Separa un enlace del otro verticalmente */
        }

    /* Estilo de los enlaces en el footer */
    .footer-column a {
        color: #e0e0e0; /* Color gris muy claro casi blanco */
        text-decoration: none; /* Quita el subrayado automático */
        transition: 0.3s ease; /* Hace que los cambios de color sean suaves */
    }

        /* Efecto cuando el usuario pasa el mouse sobre un enlace */
        .footer-column a:hover {
            color: #ffffff; /* El texto se vuelve blanco puro */
            padding-left: 5px; /* El enlace se desplaza un poco a la derecha (efecto visual) */
        }

/* Clase específica para el logo principal del footer (Uso extra de seguridad) */
.footer-logo {
    max-width: 200px !important; /* Fuerza un ancho máximo aunque existan otras reglas */
    height: auto !important; /* Fuerza que la altura sea proporcional siempre */
    margin-bottom: 50px; /* Espacio inferior grande */
    display: block; /* Asegura que se comporte como un bloque independiente */
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3)); /* Sombra con brillo dorado sutil */
}

/* Estilo para botones redes sociales */
/*. Contenedor interno exclusivo de las imágenes */
.contenedor-iconos {
    display: flex; /* Pone un logo al lado del otro horizontalmente */
    gap: 12px; /* Espacio exacto entre el logo de Facebook e Instagram */
}

/* 1. Contenedor de la sección de redes */
.footer-redes {
    margin-top: 20px; /* Separa los logos del texto de contacto */
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Título arriba, iconos abajo */
    gap: 10px; /* Espacio entre el título y los logos */
}

    /* 2. Título pequeño de "Síguenos" */
    .footer-redes h3 {
        font-size: 1rem !important; /* Lo hace más pequeño que los títulos principales */
        margin-bottom: 5px !important;
        color: #d4a843; /* Dorado de la marca */
    }

    /* 3. Ajuste de los logos (Aquí es donde los hacemos pequeños) */
    .footer-redes .img-red {
        width: 30px !important; /* Tamaño pequeño y elegante */
        height: 30px !important; /* Altura igual al ancho */
        min-height: auto !important; /* IMPORTANTE: Rompe la regla de las tarjetas grandes */
        object-fit: contain !important; /* Evita que el logo se deforme */
        margin-top: 0 !important; /* Quita el margen automático que usamos en servicios */
        border-radius: 4px !important; /* Redondeo suave proporcional al tamaño */
        filter: brightness(0.8);
        transition: 0.3s ease;
    }

        /* 4. Efecto al pasar el mouse */
        .footer-redes .img-red:hover {
            transform: scale(1.2); /* Crece un poquito al tocarlo */
            filter: brightness(1);
        }


/* 4. Efecto interactivo */
.img-red:hover {
    transform: scale(1.1); /* Crece un 10% cuando pasas el mouse */
    filter: brightness(1.1); /* Se ilumina un poco al pasar el mouse */
    border-radius: 50%; /* Truco opcional: se vuelven circulares al tocarlos */
}

/* Reset de address para que no salga en cursiva */
address {
    font-style: normal;
    line-height: 1.6;
    color: #e0e0e0;
}

/* Barra inferior de Copyright */
.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding: 10px 5% 10px; /* Espaciado: 60px arriba, 5% a los lados, 20px abajo */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #888;
}

/* Estilo específico para el logo del footer */
.footer-column img {
    height: 100px; /* Ajusta este valor según tu gusto (entre 60px y 80px es lo ideal) */
    width: auto; /* Mantiene la proporción para que no se vea estirado */
    margin-bottom: 20px; /* Separa el logo del párrafo de abajo */
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.2)); /* Un brillo dorado sutil */
    display: block; /* Asegura que el margen funcione correctamente */
}


/*FONDO TOTAL ======================================================= */
/* ================================================================
   CAMBIO DE FONDO TOTAL - AZUL OFICIAL DE LA MARCA
================================================================ */

html,
body,
body.pagina-cotizacion,
.pagina-cotizacion {
    /* 1. Forzamos el color azul oscuro profundo de tu marca */
    background-color: #001122 !important;
    /* 2. Eliminamos cualquier gradiente lineal o radial que estuviera de fondo */
    background-image: none !important;
    /* 3. Aseguramos que los textos mantengan un contraste perfecto en blanco */
    color: #ffffff;
    /* 4. Reseteamos márgenes para que el fondo cubra el 100% sin bordes blancos */
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

/* Condición: Si la pantalla del celular mide 768 píxeles de ancho o menos, ejecuta estas reglas */
@media screen and (max-width: 768px) {

    /* === AJUSTE DE TEXTOS === */

    /* Selecciona el título principal del diagnóstico */
    h1 {
        /* Reduce la letra a un tamaño adecuado para celulares (28.8px aprox.) */
        font-size: 1.8rem;
        /* Centra el título en la pantalla del teléfono */
        text-align: center;
        /* Da un espacio cómodo entre líneas por si el título quiebra en dos pisos */
        line-height: 1.3;
    }

    /* Selecciona los subtítulos o preguntas del diagnóstico */
    h2 {
        /* Ajusta el tamaño de la pregunta a un formato legible en móviles (22.4px aprox.) */
        font-size: 1.4rem;
        /* Controla el interlineado de las preguntas */
        line-height: 1.3;
    }

    /* === AJUSTE DE OPCIONES DE RESPUESTA === */

    /* Selecciona los contenedores que agrupan las opciones o botones de respuesta */
    .options, .respuestas-grid, .contenedor-botones {
        /* Activa Flexbox para reordenar la disposición espacial */
        display: flex;
        /* Pasa las opciones de estar de lado a estar una debajo de otra en fila india vertical */
        flex-direction: column;
        /* Deja una separación de 12 píxeles entre cada opción para que no se pisen */
        gap: 12px;
        /* Obliga al contenedor a usar todo el ancho de la tarjeta del celular */
        width: 100%;
    }

    /* Selecciona cada botón de opción o respuestas del test, además de los botones generales */
    .option-btn, .boton-respuesta, button, input[type="submit"] {
        /* Fuerza a que cada botón de respuesta ocupe el 100% del ancho del celular, facilitando el diseño */
        width: 100%;
        /* Amplía el área táctil: 15px arriba/abajo para que sea muy fácil de pulsar con el dedo pulgar */
        padding: 15px 10px;
        /* Define un tamaño de texto estándar y claro para las respuestas */
        font-size: 1rem;
        /* Centra el texto dentro del botón */
        text-align: center;
        /* Asegura que el padding no deforme el tamaño del botón */
        box-sizing: border-box;
    }

    /* === AJUSTE DE CAMPOS DE ESCRITURA (INPUTS) === */

    /* Selecciona las cajas de texto donde el usuario escribe su nombre, correo o respuestas abiertas */
    input[type="text"], input[type="email"], textarea {
        /* Hace que la caja de texto abarque todo el ancho disponible del smartphone */
        width: 100%;
        /* ¡TRUCO DE ORO!: Configura la letra exactamente a 16px. En iPhones (iOS), si pones menos de 16px, el navegador hace un zoom automático molesto al escribir que descuadra la pantalla. Con 16px lo evitas por completo */
        font-size: 16px;
        /* Deja un espacio interno de 12px para que el texto ingresado no se pegue a los bordes de la caja */
        padding: 12px;
        /* Controla que la caja respete el 100% de ancho asignado */
        box-sizing: border-box;
    }

    /* === AJUSTE DE LA CABECERA (SI EL DIAGNÓSTICO LA INCLUYE) === */

    /* Selecciona la barra de navegación superior del diagnóstico */
    header {
        /* Apila verticalmente el logotipo comercial y el menú de enlaces */
        flex-direction: column;
        /* Deja un espacio de 15 píxeles de separación entre el logo y el menú */
        gap: 15px;
        /* Centra todo el contenido de la cabecera en el móvil */
        text-align: center;
    }

    /* Selecciona los links de navegación */
    .nav-links {
        /* Acomoda los enlaces uno abajo del otro en vertical */
        flex-direction: column;
        /* Separa los enlaces 10 píxeles entre sí para mejorar la navegación táctil */
        gap: 10px;
        /* Añade un relleno de 10px arriba y abajo al menú */
        padding: 10px 0;
    }
}