/* 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: var(--haon-blue-deep); 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; }
/* Velo del hero (Capitán, 16-oct noche): desenfoque ligero y capa azul de la marca (~35 %) encima; el video se sigue viendo.
En celular o con movimiento reducido el <video> se queda sin <source> y enseña el póster, con el mismo velo. */
.hero-vgm .overlay { background: linear-gradient(var(--haon-blue-deep-a35), var(--haon-blue-deep-a35)), linear-gradient(180deg, var(--haon-blue-deep-a20) 0%, var(--haon-blue-deep-a00) 45%, var(--haon-blue-deep-a40) 100%); }
/* el hero empieza igual en todos los sitios (criterios-landings, 17-oct noche): variables de NOM-035 en el :root de landing.css; --barra-alto es la de VGM.
El hero va sobre el video también en tema claro: su texto se queda blanco (antes el título heredaba el azul marino del tema claro). */
.hero-inicio { justify-content: flex-start; padding-top: calc(var(--barra-alto) + var(--hero-arriba)); color: var(--haon-white); }
/* logo y barra (criterios-landings, 17-oct noche): HAON VGM completo en el hero (80 px, 56 en celular); la barra (40 px) lo recibe
con un fundido cuando el hero sale de la pantalla (vgm-landing.js pone body.logo-en-barra). El logo son dos ligas: HAON → haon.com.mx
y VGM → inicio. El HAON acaba en el 35 % del ancho del archivo (la raya «|»). */
.logo-doble { position: relative; display: inline-block; line-height: 0; }
.logo-doble img { display: block; }
.logo-doble a { position: absolute; top: 0; bottom: 0; }
.logo-doble .zona-haon { left: 0; width: 35%; }
.logo-doble .zona-producto { left: 35%; right: 0; }
nav.haon-nav .marca-nav { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
body.logo-en-barra nav.haon-nav .marca-nav { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
nav.haon-nav .logo-claro, [data-tema="claro"] nav.haon-nav .logo-oscuro { display: none; }
[data-tema="claro"] nav.haon-nav .logo-claro { display: block; }
@media (prefers-reduced-motion: reduce) {
  nav.haon-nav .marca-nav, body.logo-en-barra nav.haon-nav .marca-nav { transition: none; }
}
nav.haon-nav .ajustes { display: inline-flex; gap: 4px; }
nav.haon-nav .ajuste { min-width: var(--barra-control); height: var(--barra-control); padding: 0 8px; border-radius: var(--barra-radio); border: 1px solid var(--bg-glass-border); background: var(--bg-glass); color: var(--text-primary); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
/* los mismos estados que la barra de haon.com.mx y Cert: al pasar, el idioma abierto y el foco (2 px en la barra) */
nav.haon-nav .ajuste:hover, nav.haon-nav .idioma-trigger:hover, nav.haon-nav .barra-menu:hover, nav.haon-nav .idioma-dd[open] > .idioma-trigger { border-color: var(--haon-accent); color: var(--haon-accent); }
nav.haon-nav a:focus-visible, nav.haon-nav button:focus-visible, nav.haon-nav summary:focus-visible { outline-width: 2px; }
/* hero: dos botones */
/* 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 var(--haon-white-a18); border-radius: 4px; background: var(--haon-blue-deep-a35); }
.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: var(--haon-white-a85); }
/* 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); }
/* en el menú ☰ (celular y tableta) los controles van a 44 px, para el dedo */
@media (max-width: 1199px) {
  nav.haon-nav .ajuste { min-width: 44px; height: 44px; }
  [data-tema="claro"] nav.haon-nav .enlaces { background: var(--haon-white); border-bottom-color: var(--haon-blue-deep-a14); }
}
/* ===== tema claro (el hero se queda sobre el video) ===== */
[data-tema="claro"] body { background: var(--azul-eef3fa); color: var(--haon-blue-deep); }
[data-tema="claro"] nav.haon-nav { background: var(--haon-white-a92); border-bottom-color: var(--haon-blue-deep-a14); }
[data-tema="claro"] nav.haon-nav a { color: var(--haon-blue-deep); }
[data-tema="claro"] nav.haon-nav a:hover { color: var(--haon-blue); }
[data-tema="claro"] nav.haon-nav .ajuste, [data-tema="claro"] nav.haon-nav .idioma-trigger, [data-tema="claro"] nav.haon-nav .barra-menu { color: var(--haon-blue-deep); background: var(--haon-white); border-color: var(--haon-blue-deep-a25); }
[data-tema="claro"] nav.haon-nav .idioma-menu { background: var(--haon-white); border-color: var(--haon-blue-deep-a20); }
[data-tema="claro"] nav.haon-nav .idioma-menu a:hover { background: var(--azul-eef3fa); }
[data-tema="claro"] nav.haon-nav .btn.secundario { color: var(--haon-blue-deep); }
[data-tema="claro"] .banda { color: var(--haon-blue-deep); }
[data-tema="claro"] .banda.vidrio { background: var(--haon-white); border-color: var(--haon-blue-deep-a10); }
[data-tema="claro"] .banda.gris { background: var(--azul-e3ebf5); }
[data-tema="claro"] .banda.azul { background: var(--azul-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"] .faq summary::after { color: var(--naranja-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"] .incluye, [data-tema="claro"] .faq details p { color: var(--azul-2b3f58); }
[data-tema="claro"] .modulo, [data-tema="claro"] .faq details { background: var(--haon-white); border-color: var(--haon-blue-deep-a16); box-shadow: 0 6px 20px var(--haon-blue-deep-a08); }
[data-tema="claro"] .banda.vidrio .modulo { background: var(--azul-f5f8fc); }
[data-tema="claro"] .pasos li, [data-tema="claro"] .mini li { border-color: var(--haon-blue-deep-a16); }
[data-tema="claro"] .cita { border-left-color: var(--amarillo-c78a00); }
[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: var(--haon-blue); }
#como .col-txt .foto { margin-top: 28px; }
.banda.azul .nota { color: var(--haon-white-a92); }
/* contraste AA sobre el azul de la banda (axe) */
[data-tema="claro"] .banda.azul .nota { color: var(--azul-2b3f58); }
#haon .mini li { grid-template-columns: minmax(90px, 150px) 1fr; }
.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: var(--haon-white); }
.paquete .monto span { font-weight: 400; font-size: 0.9rem; color: var(--haon-white-a80); }
.paquete .btn, #acceso .modulo .btn { margin-top: auto; align-self: flex-start; border-radius: 4px; }
#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"] .paquete .monto span { color: var(--azul-2b3f58); }
[data-tema="claro"] .paquete .monto { color: var(--haon-blue-deep); }
[data-tema="claro"] #que .modulo .dato a { color: var(--naranja-8a5a00); }
#precio .paquete .sello { color: var(--haon-blue-deep); 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: var(--naranja-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: var(--naranja-8a5a00); }
.incluye { margin: 22px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--haon-white-a85); line-height: 1.5; }
@media (max-width: 900px) {
  #precio .modulos.paquetes.dos { grid-template-columns: 1fr; }
}
/* Botón de WhatsApp (criterios 6), el mismo de la landing de NOM-035 */
.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--verde-25d366); color: var(--haon-white); box-shadow: 0 6px 18px var(--negro-a35); }
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--negro-a40); }
@media print {
  .wa-flotante { display: none; }
}
/* banderas del menú de idioma (antes con style= en el HTML) */
.bandera.b-es { background-image: url(/assets/img/banderas/es.png); }
.bandera.b-en { background-image: url(/assets/img/banderas/en.png); }
.bandera.b-pt { background-image: url(/assets/img/banderas/pt.png); }
.bandera.b-fr { background-image: url(/assets/img/banderas/fr.png); }
.bandera.b-it { background-image: url(/assets/img/banderas/it.png); }
.bandera.b-zh { background-image: url(/assets/img/banderas/zh.png); }
.bandera.b-ru { background-image: url(/assets/img/banderas/ru.png); }
.bandera.b-ja { background-image: url(/assets/img/banderas/ja.png); }