/* vgm-landing.css — lo propio de la landing de HAON VGM (haonvgm-app#10), copiado de la del NOM-035 (nom035#19, Taco) sobre el molde
   de haon.com.mx (que no se toca). Paquetes de créditos, preguntas frecuentes, tema claro, tamaño de letra y foco visible. Esquinas de 4 px. */

/* accesibilidad */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 4px; background: var(--haon-accent); color: #0f2847; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--haon-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-v6 video.bg { display: none; } .hero-v6 { background: url(/video/haon-acceso.jpg) center / cover; } }

/* barra: marca con sello VGM y ajustes de lectura */
nav.haon-nav .marca-nav { display: inline-flex; align-items: center; gap: 10px; }
nav.haon-nav .sello-nom { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15rem; color: #0f2847; background: var(--haon-accent); padding: 3px 8px; border-radius: 4px; }
nav.haon-nav .ajustes { display: inline-flex; gap: 4px; }
nav.haon-nav .ajuste { min-width: 34px; height: 30px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--bg-glass-border); background: var(--bg-glass); color: var(--text-primary); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
nav.haon-nav .ajuste:hover { border-color: var(--haon-accent); color: var(--haon-accent); }
nav.haon-nav .idioma-trigger { border-radius: 4px; }
nav.haon-nav .idioma-menu { border-radius: 4px; }

/* hero: dos botones */
.hero-v6 .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-v6 .cifras b { font-size: 1.4rem; }

/* tarjetas: el sello amarillo a 4 px en lo nuevo */
#que .sello, #precio .sello { border-radius: 4px; }
#que .modulo .dato { margin-top: auto; }
#que .modulo .dato a { color: var(--haon-accent); font-weight: 700; }

/* preguntas frecuentes */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.faq details { border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; background: rgba(15,40,71,0.35); }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--haon-accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 18px 18px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.cta-final { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.cta-final .btn { border-radius: 4px; }
.lnk-cotizar { color: var(--haon-accent); font-weight: 600; }

/* HAON con su corazón */
#haon .avatar-haon { width: 140px; }
#haon .dos-col > .cita { grid-column: 1 / -1; margin-top: 8px; }

/* pie: los títulos de columna son h2 por orden de encabezados, con la cara de los h4 del molde */
.pie .h4 { margin: 0 0 6px; font-size: 0.75rem; letter-spacing: 0.25rem; text-transform: uppercase; color: var(--haon-accent); }

@media (max-width: 900px) {
  nav.haon-nav .ajustes .ajuste { min-width: 30px; }
}
@media (max-width: 640px) {
  nav.haon-nav .sello-nom { display: none; }
  nav.haon-nav .nav-corazon { display: none; }
}

/* ===== tema claro (el hero se queda sobre el video) ===== */
[data-tema="claro"] body { background: #eef3fa; color: #0f2847; }
[data-tema="claro"] nav.haon-nav { background: rgba(255,255,255,0.92); border-bottom-color: rgba(15,40,71,0.14); }
[data-tema="claro"] nav.haon-nav a { color: #0f2847; }
[data-tema="claro"] nav.haon-nav a:hover { color: #1a5bb8; }
[data-tema="claro"] nav.haon-nav .ajuste, [data-tema="claro"] nav.haon-nav .idioma-trigger { color: #0f2847; background: #fff; border-color: rgba(15,40,71,0.25); }
[data-tema="claro"] nav.haon-nav .idioma-menu { background: #fff; border-color: rgba(15,40,71,0.2); }
[data-tema="claro"] nav.haon-nav .idioma-menu a:hover { background: #eef3fa; }
[data-tema="claro"] nav.haon-nav .btn.secundario { color: #0f2847; }
[data-tema="claro"] .banda { color: #0f2847; }
[data-tema="claro"] .banda.vidrio { background: #ffffff; border-color: rgba(15,40,71,0.1); }
[data-tema="claro"] .banda.gris { background: #e3ebf5; }
[data-tema="claro"] .banda.azul { background: #dbe8fa; }
[data-tema="claro"] .banda .kicker, [data-tema="claro"] .sub-h, [data-tema="claro"] .mini b, [data-tema="claro"] .modulo .idx,
[data-tema="claro"] .modulo .dato, [data-tema="claro"] .tabla-precios thead th, [data-tema="claro"] .lnk-cotizar,
[data-tema="claro"] .tabla-precios td a, [data-tema="claro"] .faq summary::after { color: #8a5a00; }
[data-tema="claro"] .banda .lead, [data-tema="claro"] .modulo p, [data-tema="claro"] .nota, [data-tema="claro"] .narrativa p,
[data-tema="claro"] .mini span, [data-tema="claro"] .pasos p, [data-tema="claro"] .cita, [data-tema="claro"] .kpi span,
[data-tema="claro"] .incluye, [data-tema="claro"] .faq details p, [data-tema="claro"] .calc-ayuda, [data-tema="claro"] .calc-nota,
[data-tema="claro"] .calc-unidad, [data-tema="claro"] .calc-resultado dt, [data-tema="claro"] .calc-banda,
[data-tema="claro"] .tabla-precios caption, [data-tema="claro"] .tabla-precios td span { color: #2b3f58; }
[data-tema="claro"] .modulo, [data-tema="claro"] .kpi, [data-tema="claro"] .faq details, [data-tema="claro"] .calculadora {
  background: #ffffff; border-color: rgba(15,40,71,0.16); box-shadow: 0 6px 20px rgba(15,40,71,0.08); }
[data-tema="claro"] .banda.vidrio .modulo, [data-tema="claro"] .banda.vidrio .calculadora { background: #f5f8fc; }
[data-tema="claro"] .kpi b, [data-tema="claro"] .calc-resultado .total dt, [data-tema="claro"] .calc-resultado .total dd { color: #0f2847; }
[data-tema="claro"] .pasos li, [data-tema="claro"] .mini li, [data-tema="claro"] .calc-resultado dl > div,
[data-tema="claro"] .tabla-precios th, [data-tema="claro"] .tabla-precios td { border-color: rgba(15,40,71,0.16); }
[data-tema="claro"] .calc-fila input { color: #0f2847; background: #fff; border-color: rgba(15,40,71,0.35); }
[data-tema="claro"] .cita { border-left-color: #c78a00; }
[data-tema="claro"] .calc-banda.error { color: #a12a14; }
[data-tema="claro"] .tabla-precios tr.activa th, [data-tema="claro"] .tabla-precios tr.activa td { background: #fff1c9; }
[data-tema="claro"] a:focus-visible, [data-tema="claro"] button:focus-visible, [data-tema="claro"] summary:focus-visible,
[data-tema="claro"] input:focus-visible { outline-color: #1a5bb8; }
#como .col-txt .foto { margin-top: 28px; }
.banda.azul .nota { color: rgba(255,255,255,0.92); }   /* contraste AA sobre el azul de la banda (axe) */
[data-tema="claro"] .banda.azul .nota { color: #2b3f58; }
#haon .mini li { grid-template-columns: minmax(90px, 150px) 1fr; }   /* "No exhibe respuestas" en un renglón (revisión de Juan, 13-oct) */

/* paquetes de créditos: tres tarjetas .modulo con el precio de config/landing-precios.json */
.precio-credito { margin: 0 0 22px; font-size: 1.15rem; }
.precio-credito b { color: var(--haon-accent); font-size: 1.4rem; }
.precio-credito span { color: rgba(255,255,255,0.85); }
.modulos.paquetes { grid-template-columns: repeat(3, 1fr); }
.paquete { display: flex; flex-direction: column; gap: 12px; }
.paquete h3 b { font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.paquete h3 span { font-weight: 400; font-size: 1rem; }
.paquete .monto { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.paquete .monto span { font-weight: 400; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.paquete .btn, #acceso .modulo .btn { margin-top: auto; align-self: flex-start; border-radius: 4px; }
.paquete.destacado { border-color: var(--haon-accent); }
#acceso .modulo { display: flex; flex-direction: column; gap: 12px; }
#para .modulos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .modulos.paquetes, #para .modulos { grid-template-columns: 1fr; } }
[data-tema="claro"] .precio-credito b { color: #8a5a00; }
[data-tema="claro"] .precio-credito span, [data-tema="claro"] .paquete .monto span { color: #2b3f58; }
[data-tema="claro"] .paquete .monto { color: #0f2847; }
[data-tema="claro"] .paquete.destacado { border-color: #c78a00; }
[data-tema="claro"] #que .modulo .dato a { color: #8a5a00; }
#precio .paquete .sello { color: #0f2847; font-size: 0.68rem; font-weight: 700; }   /* el sello va en azul marino sobre amarillo (axe), no con el gris de los span de la tarjeta */
.modulos.paquetes.dos { grid-template-columns: repeat(2, 1fr); }   /* suscripción + costo por certificado (Capitán, 13-oct) */
.paquete .cotizar { font-size: 1.05rem; font-weight: 700; color: var(--haon-accent); }
[data-tema="claro"] .paquete .cotizar { color: #8a5a00; }
@media (max-width: 900px) { .modulos.paquetes.dos { grid-template-columns: 1fr; } }
#precio .modulos.paquetes.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#precio .paquete .monto .cotizar { font-size: 1.05rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--haon-accent); }
[data-tema="claro"] #precio .paquete .monto .cotizar { color: #8a5a00; }
.incluye { margin: 22px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: rgba(255,255,255,0.85); line-height: 1.5; }
@media (max-width: 900px) { #precio .modulos.paquetes.dos { grid-template-columns: 1fr; } }