/* =============================================================================
   DIAGNÓSTICO EXPRESS — landing v2 (tono comercial/pyme, tema claro, misma
   identidad de marca del sitio: negro + amarillo + rojo + blanco/gris).
   Vive aparte de diagnostico.css: en vez de reescribir cada componente,
   sobreescribimos las variables de FONDO/TEXTO dentro de .dgx-page pero
   dejamos los colores de marca (amarillo/rojo/negro) heredar el valor real
   de :root (variables.css) — así no se inventa una paleta nueva. Como casi
   todos los componentes reutilizados (front-pain-card, dg-feature, dg-plan,
   dg-table, dg-step, dg-domain, dg-col, dg-faq) ya están escritos con
   var(--color-*), heredan el tema claro automáticamente sin tocar su CSS.
   Los modales de contratación/llamada quedan FUERA de .dgx-page a propósito,
   así conservan su estilo oscuro original sin cambios.

   Única excepción de paleta: el verde (#16A34A) se mantiene SOLO como señal
   funcional de "cumple / riesgo bajo" en el mockup y los checks de garantía
   — es una convención universal de UX (verde = correcto), no una decisión
   de marca. El amarillo de marca (#F4D800) es demasiado claro para usarse
   como texto sobre blanco, así que se reserva para fondos/bordes/badges
   (con texto oscuro encima, igual que el botón "Iniciar Sesión" del sitio);
   el énfasis de texto usa negro/gris oscuro.
   ============================================================================= */

.dgx-page {
    /* Fondos y texto: tema claro. Los colores de marca (amarillo/rojo/negro)
       NO se sobreescriben acá — se heredan tal cual de :root (variables.css)
       a través de --color-accent-primary/secondary. */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F8FAFC;
    --color-bg-tertiary: #F1F5F9;
    --color-bg-card: #FFFFFF;
    --color-bg-light: #F8FAFC;
    --color-text-primary: #111111;
    --color-text-secondary: #44474D;
    --color-text-muted: #6B7280;
    --color-text-on-dark: #FFFFFF;
    --color-border: #E5E5E5;
    --color-border-hover: #C9C9C9;

    background: #FFFFFF;
    color: #111111;
}

/* --color-text-accent y --color-border-focus SÍ se ajustan: el amarillo de
   marca (var(--color-enfasis-amarillo), #F4D800) no es legible como texto
   sobre blanco, así que el foco de inputs usa el mismo amarillo (funciona
   bien como anillo, no como texto) pero el texto-acento pasa a negro. */
.dgx-page { --color-text-accent: #111111; }

.dgx-page .front-btn--primary:hover {
    box-shadow: 0 8px 24px rgba(244, 216, 0, 0.35);
}

.dgx-page .front-btn--outline:hover {
    box-shadow: 0 8px 24px rgba(244, 216, 0, 0.18);
}

/* .front-section-label usa var(--color-accent-primary) como color de TEXTO
   (además del guioncito ::before) — en tema oscuro eso es amarillo sobre
   negro (perfecto contraste); en tema claro sería amarillo sobre blanco
   (ilegible). Acá el texto pasa a negro; el guioncito ::before conserva el
   amarillo de marca (--color-accent-primary), que como elemento decorativo
   sí funciona bien. */
.dgx-page .front-section-label { color: #111111; }

/* Mismo problema de contraste (amarillo de marca como texto sobre blanco,
   ~1.4:1 — muy por debajo del mínimo WCAG de 3:1) en otros componentes
   reutilizados que en el tema oscuro original usan
   var(--color-accent-primary) como color de texto real (no decorativo):
   la frase de transición del dolor, la etiqueta "NIVEL X" de cada plan, y
   los números grandes de "Cómo funciona". Los íconos/guiones puramente
   decorativos (::before de checks, +, etc.) sí se dejan en amarillo. */
.dgx-page .front-pain-transition,
.dgx-page .dg-plan__tag,
.dgx-page .dg-step__n {
    color: #111111;
}

/* Texto secundario/gris: en home-sections.css estos selectores tienen un
   color HARDCODEADO (#b8b8b8, ~2:1 sobre blanco) pensado para AAA sobre el
   fondo casi negro del tema original — no usa var(--color-text-secondary),
   así que el override de variables de arriba no le llega. Sobre blanco es
   casi invisible. Se fuerza un gris oscuro legible (9:1). Afecta, entre
   otros, TODOS los subtítulos de sección (front-section-subtitle) y el
   texto de las tarjetas de dolor. */
.dgx-page .front-trust-card__text,
.dgx-page .front-pain-card__text,
.dgx-page .front-service-card__text,
.dgx-page .front-process__text,
.dgx-page .front-section-subtitle,
.dgx-page .front-contact__item-label,
.dgx-page .front-marquee__item,
.dgx-page .front-tech-label {
    color: #44474D;
}

/* ===========================================================================
   HEADER / CTA persistente
   =========================================================================== */

.dgx-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #E5E5E5;
}

.dgx-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family-headings);
    font-weight: var(--font-bold);
    color: #111111;
    font-size: var(--text-base);
    text-decoration: none;
}

.dgx-topbar__ctas {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Botón de WhatsApp: se mantiene en el verde propio de WhatsApp (no es una
   decisión de marca del sitio, es la convención universal — la gente
   reconoce el botón verde como "hablar por WhatsApp" igual que un botón
   "Pagar con PayPal" se reconoce por su azul). */
.dgx-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    background: #25D366;
    color: #05310f;
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    text-decoration: none;
    border: 1px solid #25D366;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.dgx-btn-wa:hover {
    background: #1ebc59;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

@media (max-width: 768px) {
    /* En mobile la barra inferior fija (.dgx-mobilebar) ya cubre WhatsApp +
       Contratar — mostrar también la topbar aquí desbordaba el viewport. */
    .dgx-topbar { display: none; }
}

/* ===========================================================================
   HERO
   =========================================================================== */

.dgx-hero {
    padding: var(--space-12) 0 var(--space-10);
    background: linear-gradient(180deg, #FFFBEA 0%, #FFFFFF 55%);
}

.dgx-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 1024px) {
    .dgx-hero__grid {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

.dgx-hero__seal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: #111111;
    color: #F4D800;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.dgx-hero__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-extrabold);
    color: #111111;
    margin-bottom: var(--space-4);
}

/* Palabra destacada del título: el amarillo de marca no es legible como
   texto sobre blanco, así que se usa como resaltador (marcador) detrás del
   texto en negro — conserva el acento de marca sin problema de contraste. */
.dgx-hero__title em {
    font-style: normal;
    position: relative;
    z-index: 1;
    background-image: linear-gradient(180deg, transparent 62%, #F4D800 62%);
}

.dgx-hero__subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: #44474D;
    margin-bottom: var(--space-6);
    max-width: 56ch;
}

.dgx-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.dgx-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    color: #111111;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dgx-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .dgx-hero__title { font-size: var(--text-3xl); }
    .dgx-hero__subtitle { font-size: var(--text-base); }
}

/* --- Mockup de informe (100% CSS, sin imágenes) --- */

.dgx-mock {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.dgx-mock__card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.25);
    padding: var(--space-6);
    position: relative;
    z-index: 2;
}

.dgx-mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

/* Deja explícito que los datos del mockup (68%, barras de riesgo) son un
   ejemplo ilustrativo del formato del informe, no un resultado real. */
.dgx-mock__example {
    font-size: 10px;
    color: #9CA3AF;
    font-style: italic;
    margin-bottom: var(--space-4);
}

.dgx-mock__brand {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dgx-mock__tag {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: #111111;
    background: #FFF3B0;
    border-radius: var(--radius-full);
    padding: 3px 10px;
}

/* Anillo en tercios Alto/Medio/Bajo (mismos colores que la leyenda de abajo
   "Hallazgos priorizados") en vez de un % de cumplimiento — no hay ninguna
   cifra que se pueda confundir con un resultado real. */
.dgx-mock__ring {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#FF3737 0% 33%, #F4D800 33% 66%, #16A34A 66% 100%);
}

.dgx-mock__ring-inner {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.dgx-mock__ring-icon {
    font-size: 22px;
    line-height: 1;
}

.dgx-mock__ring-label {
    font-size: 10px;
    color: #6B7280;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Anillo de "escaneo": un halo giratorio sutil detrás del anillo — sensación
   tecnológica ("analizando tu sitio") sin mostrar ningún dato específico. */
.dgx-mock__ring--scan {
    position: relative;
}

.dgx-mock__ring--scan::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(244, 216, 0, 0.5) 12%, transparent 24%);
    animation: dgx-scan-spin 3.5s linear infinite;
}

@keyframes dgx-scan-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dgx-mock__ring--scan::before { animation: none; }
}

/* Dos módulos abstractos (no un checklist de ítems específicos) — evita dar
   la impresión de que el visitante puede autoevaluarse con esta tarjeta. */
.dgx-mock__modules {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.dgx-mock__module {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: #F8FAFC;
    border: 1px solid #F1F5F9;
}

.dgx-mock__module-ico {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.dgx-mock__module-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dgx-mock__module-text strong {
    font-size: var(--text-sm);
    color: #111111;
}

.dgx-mock__module-text span {
    font-size: 11px;
    color: #6B7280;
    line-height: var(--leading-snug);
}

.dgx-mock__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px dashed #E5E5E5;
    font-size: var(--text-xs);
    color: #6B7280;
}

.dgx-mock__footer strong { color: #111111; }

.dgx-mock__float {
    position: absolute;
    /* Por encima de .dgx-mock__card (z-index:2) — si no, la tarjeta blanca
       tapa la insignia flotante y solo se le ve un borde. */
    z-index: 3;
    border-radius: var(--radius-xl);
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111111;
}

.dgx-mock__float--top {
    top: -18px;
    right: -12px;
}

.dgx-mock__float--bottom {
    bottom: -16px;
    left: -18px;
}

@media (max-width: 480px) {
    .dgx-mock__float { display: none; }
}

/* ===========================================================================
   PLAN DESTACADO (sección propia, antes de la grilla de 3 planes)
   Fondo negro + acentos amarillos: la misma identidad "marca" que ya usa el
   resto del sitio (logo negro/amarillo), en vez de un color ajeno.
   =========================================================================== */

.dgx-featured {
    background: linear-gradient(135deg, #17181a 0%, #050707 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    color: #FFFFFF;
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 900px) {
    .dgx-featured {
        grid-template-columns: 1.3fr 1fr;
        align-items: center;
        padding: var(--space-10);
    }
}

.dgx-featured__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F4D800;
    margin-bottom: var(--space-2);
}

.dgx-featured__title {
    /* Los h1-h6 tienen color:var(--color-text-primary) por regla global
       (base.css) — hay que forzar blanco explícito, la herencia del
       contenedor no alcanza a pisar esa regla. */
    color: #FFFFFF;
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-3);
}

.dgx-featured__text {
    color: #D4D4D8;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    max-width: 52ch;
}

.dgx-featured__list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: var(--space-2);
    padding: 0;
}

@media (min-width: 560px) {
    .dgx-featured__list { grid-template-columns: 1fr 1fr; }
}

.dgx-featured__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-sm);
    color: #E5E5E5;
}

.dgx-featured__list li::before {
    content: "✓";
    color: #F4D800;
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.dgx-featured__card {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    color: #111111;
    text-align: center;
}

.dgx-featured__price {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: #111111;
}

.dgx-featured__iva {
    font-size: var(--text-sm);
    color: #6B7280;
    margin-bottom: var(--space-1);
}

.dgx-featured__delivery {
    font-size: var(--text-sm);
    color: #B8281E;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-5);
}

.dgx-featured__card .front-btn {
    width: 100%;
    margin-bottom: var(--space-3);
}

.dgx-featured__note {
    font-size: var(--text-xs);
    color: #9CA3AF;
    line-height: var(--leading-snug);
}

/* ===========================================================================
   CTA final / franja recordatorio
   =========================================================================== */

.dgx-final-note {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: #44474D;
}

/* ===========================================================================
   BARRA FIJA MOBILE
   =========================================================================== */

.dgx-mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid #E5E5E5;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

.dgx-mobilebar a,
.dgx-mobilebar button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    border: none;
    text-decoration: none;
}

.dgx-mobilebar__secondary {
    background: #FFFFFF;
    color: #111111;
    border: 1px solid #C9C9C9;
}

.dgx-mobilebar__cta {
    background: #F4D800;
    color: #111111;
}

@media (max-width: 768px) {
    .dgx-mobilebar { display: flex; }
    body.dgx-has-mobilebar { padding-bottom: 72px; }
}

/* ===========================================================================
   Comparativa — leyenda simple + tabla heredada de diagnostico.css
   =========================================================================== */

.dgx-compare-hint {
    text-align: center;
    color: #6B7280;
    font-size: var(--text-sm);
    margin-top: var(--space-3);
}

/* ===========================================================================
   STAT CALLOUT — dato real citado (sección "Por qué ahora")
   =========================================================================== */

.dgx-stat-callout {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: #FFFBEA;
    border: 1px solid #F4D800;
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-10);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.dgx-stat-callout__num {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    color: #111111;
    line-height: 1;
    flex-shrink: 0;
}

.dgx-stat-callout__text {
    font-size: var(--text-sm);
    color: #33363B;
    line-height: var(--leading-snug);
}

.dgx-stat-callout__text cite {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #6B7280;
    margin-top: 6px;
}

@media (max-width: 560px) {
    .dgx-stat-callout {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }
}

/* Cita de fuente dentro de una tarjeta de dolor (mismo tratamiento que el
   stat-callout: bloque aparte, chico, sin cursiva). */
.front-pain-card__text cite {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #9CA3AF;
    margin-top: 6px;
}

/* ===========================================================================
   Tarjetas de dolor en mobile: carrusel horizontal en vez de columna
   apilada, para no ocupar tanto alto con 6 tarjetas.
   =========================================================================== */

@media (max-width: 768px) {
    .dgx-pain-grid {
        /* .front-container es flex column con align-items:center — sin
           width:100% este item queda centrado y del ancho de su contenido,
           lo que rompe la cuenta del margen negativo de abajo. */
        width: 100%;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--space-4);
        padding-bottom: var(--space-3);
        margin: 0 calc(var(--space-4) * -1);
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .dgx-pain-grid .front-pain-card {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }
}