/*
 * critical-home.css — Dental One El Salvador (HOME / index.php)
 * Above-the-fold del home. El HERO ya tiene su CSS inline en index.php;
 * aquí cubrimos el NAV/HEADER transparente que va ENCIMA del hero para
 * que no parpadee mientras carga el CSS del tema.
 *
 * PRINCIPIO: establecer solo lo IMPRESCINDIBLE para que el nav no salte,
 * usando valores que COINCIDEN con el comportamiento del tema MFN en
 * modo header-transparent + mobile (la mayoría del tráfico). Donde hay
 * duda sobre el valor exacto del tema, NO lo fijamos (lo pone el CSS real).
 *
 * Generado: Junio 2026 · Rev. 2 (bugs corregidos)
 */

/* ── Reset base seguro ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Lato','Poppins',Roboto,Arial,sans-serif;color:#333;background:#fff;line-height:1.6}
img{max-width:100%;height:auto}

/* ── Header transparente sobre el hero ──
   El tema posiciona #Header de forma absoluta sobre el bg-parallax.
   Replicamos solo lo mínimo: que quede arriba, a todo el ancho y por
   encima del hero. NO fijamos altura ni padding (los pone el tema). */
#Wrapper{position:relative;overflow-x:hidden}
#Header_wrapper{position:relative}
#Header{position:absolute;top:0;left:0;width:100%;z-index:30;background:transparent}
#Top_bar{width:100%;background:transparent}

/* ── Logo ──
   FIX bug #2: sobre el hero OSCURO el logo visible debe ser el BLANCO
   (logo-mobile / logo-mobile-sticky usan logo-dentalone-wht.png).
   En móvil Y en desktop transparente, mostramos el blanco para que se
   vea sobre el fondo oscuro. El tema ajustará al hacer sticky. */
.logo{padding:14px 0}
#logo img{max-height:50px;width:auto}
#logo .logo-main,
#logo .logo-sticky,
#logo .logo-mobile-sticky{display:none}
#logo .logo-mobile{display:block;width:auto}

/* ── Botón de menú móvil (hamburguesa) ──
   Visible en móvil, blanco sobre el hero oscuro. */
.responsive-menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;color:#fff;font-size:22px;
  background:transparent;text-decoration:none
}

/* ── Accesibilidad ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FIX bug #1: se elimina el @font-face 'mfn-icons' sin src (era inválido).
   Los iconos del tema cargan con su CSS diferido; el hamburguesa usa
   color/tamaño definidos arriba, así que no hay FOIT visible relevante. */

/* FIX bug #3: se elimina la media query de desktop que mostraba el
   logo-main (oscuro) sobre el hero oscuro y que adivinaba el layout
   del top_bar_right. En desktop el CSS del tema (que carga en ~200ms)
   pone el nav completo. El critical solo garantiza el estado móvil,
   que es el form factor medido por PageSpeed y la mayoría del tráfico. */