/* ================================================================
   HENRY'S PIZZA THEME — azul marino boricua + acentos multicolor
   (rojo pizza / naranja / teal / verde), fiel a su carta.
   Se activa con data-theme="henrys" (api-loader lo pone desde config.theme).
   ================================================================ */
:root[data-theme="henrys"] {
  --h-navy:    #1B1F4B;   /* base del logo */
  --h-navy-2:  #232a5e;   /* superficies / cards */
  --h-navy-3:  #2c3470;   /* card hover / bordes */
  --h-red:     #D8312A;   /* rojo pizza (hero) */
  --h-orange:  #F0842B;   /* naranja cálido */
  --h-teal:    #35A9A7;
  --h-green:   #7CB342;
  --h-cream:   #F4ECDC;   /* texto claro */
  --h-muted:   #A7AEDA;   /* texto suave sobre navy */
  --h-white:   #FFFFFF;

  /* Redefinición de variables del framework */
  --gold:      #F0842B;   /* acento principal → naranja */
  --gold-2:    #D8312A;   /* rojo pizza */
  --gold-3:    #35A9A7;
  --cream:     #F4ECDC;
  --muted:     #A7AEDA;
  --platinum:  #A7AEDA;
  --card:      #232a5e;
  --line:      rgba(255,255,255,0.08);
  --red-2:     #FF6B60;
}

/* === FONDO general: navy marino con brillo suave === */
body[data-theme="henrys"] {
  background: radial-gradient(130% 100% at 18% -5%, #2a3168 0%, #1B1F4B 45%, #12153a 100%) !important;
  background-attachment: fixed !important;
  color: var(--h-cream) !important;
  -webkit-font-smoothing: antialiased;
}
body[data-theme="henrys"] .screen,
body[data-theme="henrys"] .home,
body[data-theme="henrys"] main,
body[data-theme="henrys"] .menu-container,
body[data-theme="henrys"] .m-section,
body[data-theme="henrys"] .menu,
body[data-theme="henrys"] .app-shell {
  background: transparent !important;
  color: var(--h-cream) !important;
}

/* === SPLASH: la PORTADA real del menú (config.splashImage) — estático, claro, texto navy === */
body[data-theme="henrys"] .splash-bg { background: #ECE0C8; }
body[data-theme="henrys"] .splash-bg .splash-video,
body[data-theme="henrys"] .splash-bg video { display: none !important; }
/* Neutralizar el velo OSCURO del template → velo crema MUY suave (colores vivos, no opaco) */
body[data-theme="henrys"] .splash-bg::after {
  background: rgba(240,232,214,0.22) !important;
}
/* CERO deriva Ken Burns del template (kbDrift corroborado con document.getAnimations) */
body[data-theme="henrys"] .splash-bg {
  animation: none !important;
}
/* CERO movimiento en el inicio (pedido del CEO): sin llama, sin pulsos */
body[data-theme="henrys"] .splash-screen .ember,
body[data-theme="henrys"] .ember { display: none !important; animation: none !important; }
body[data-theme="henrys"] .splash-screen .corners::before,
body[data-theme="henrys"] .splash-screen .corners::after { animation: none !important; }
/* Texto del splash: NAVY sobre crema, como el menú físico */
body[data-theme="henrys"] .splash-card .gold-text,
body[data-theme="henrys"] .splash-card h1 {
  background: none !important; -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #1B1F4B !important; color: #1B1F4B !important;
  animation: none !important; font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}
body[data-theme="henrys"] .splash-card .eyebrow,
body[data-theme="henrys"] .splash-card .sub,
body[data-theme="henrys"] .splash-card button[data-action="skipHome"] {
  color: #1B1F4B !important; -webkit-text-fill-color: #1B1F4B !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important; font-weight: 700 !important;
}
/* Logo del splash: ESTÁTICO (el CEO pidió cero movimiento), sombra sutil */
body[data-theme="henrys"] .splash-card .logo,
body[data-theme="henrys"] .splash-card img.logo {
  box-shadow: none !important;
  filter: drop-shadow(0 8px 18px rgba(27,31,75,0.22)) !important;
  animation: none !important;
}

/* Título del splash (nombre) → gradiente multicolor de la marca */
body[data-theme="henrys"] .display.gold-text,
body[data-theme="henrys"] h1.gold-text,
body[data-theme="henrys"] .splash-card .gold-text {
  background: linear-gradient(90deg, #D8312A 0%, #F0842B 30%, #F4ECDC 50%, #35A9A7 72%, #7CB342 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: henrysShine 7s linear infinite !important;
  font-weight: 800 !important; text-shadow: none !important;
}
@keyframes henrysShine { 0%{background-position:0% center} 100%{background-position:220% center} }
body[data-theme="henrys"] .splash-card .eyebrow,
body[data-theme="henrys"] .splash-card .sub { color: var(--h-cream) !important; opacity:.9; }

/* === TOPBAR === */
body[data-theme="henrys"] .topbar,
body[data-theme="henrys"] header.topbar {
  background: rgba(20,24,56,0.72) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(240,132,43,0.18) !important;
}
body[data-theme="henrys"] .topbar button,
body[data-theme="henrys"] .topbar .iconbtn {
  color: var(--h-cream) !important; background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
body[data-theme="henrys"] .topbar button:hover,
body[data-theme="henrys"] .topbar .iconbtn:hover { color: var(--h-orange) !important; border-color: rgba(240,132,43,.5) !important; }
body[data-theme="henrys"] .topbar svg { color: var(--h-cream) !important; stroke: currentColor !important; }

/* === HERO del menú ("Nuestro Menú") — LIMPIO, sin barra roja (pedido CEO) === */
body[data-theme="henrys"] .menu-hero {
  background: transparent !important; padding: 4px 0 8px !important; box-shadow: none !important;
}
body[data-theme="henrys"] .menu-hero .mh-kicker { color: var(--h-orange) !important; -webkit-text-fill-color: var(--h-orange) !important; }
body[data-theme="henrys"] .menu-hero .mh-title  { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
body[data-theme="henrys"] .menu-hero .mh-sub    { color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important; }

/* === Menú LIMPIO: fuera romanos, adornos ❖ y divisores (plantilla de resto formal, no pega en pizzería) === */
body[data-theme="henrys"] .m-sec-head,
body[data-theme="henrys"] .menu-hero .orn,
body[data-theme="henrys"] .m-fin { display: none !important; }

/* === BOTONES === */
/* Botones PLANOS estilo portada: rojo tomate sólido, sin brillo ni glow — como una forma más de la ilustración */
body[data-theme="henrys"] .btn-gold,
body[data-theme="henrys"] .btn-primary {
  background: #D8312A !important;
  color: #F7EFDF !important; border: none !important;
  box-shadow: none !important; font-weight: 800 !important;
  border-radius: 16px !important; letter-spacing: .04em;
}
body[data-theme="henrys"] .btn-gold:hover,
body[data-theme="henrys"] .btn-primary:hover { background: #C02A24 !important; transform: none; box-shadow: none !important; }
body[data-theme="henrys"] .btn-outline {
  background: rgba(255,255,255,0.05) !important; color: var(--h-cream) !important;
  border: 1px solid rgba(240,132,43,0.45) !important;
}
body[data-theme="henrys"] .btn-ghost, body[data-theme="henrys"] .btn-ghost * { color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important; }

/* === CHIPS de categorías + toggle Lista/Fotos === */
body[data-theme="henrys"] .chip,
body[data-theme="henrys"] .cat-chip,
body[data-theme="henrys"] .filter-chip,
body[data-theme="henrys"] .menu-view-toggle,
body[data-theme="henrys"] .view-toggle {
  background: rgba(255,255,255,0.06) !important; color: var(--h-cream) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
body[data-theme="henrys"] .chip.active,
body[data-theme="henrys"] .cat-chip.active,
body[data-theme="henrys"] .filter-chip.sel,
body[data-theme="henrys"] .chip.sel {
  background: #D8312A !important; color: #fff !important;
  border-color: transparent !important; font-weight: 700 !important;
}
body[data-theme="henrys"] .menu-view-toggle button, body[data-theme="henrys"] .view-toggle button { color: var(--h-muted) !important; }
body[data-theme="henrys"] .menu-view-toggle button svg { color: var(--h-muted) !important; stroke: currentColor !important; }
body[data-theme="henrys"] .menu-view-toggle button.active,
body[data-theme="henrys"] .view-toggle button.active { background: #D8312A !important; color:#fff !important; }
body[data-theme="henrys"] .menu-view-toggle button.active svg { color:#fff !important; stroke:#fff !important; }

/* === BANNER de categoría (.rb "APERITIVOS") === */
body[data-theme="henrys"] .m-section .rb,
body[data-theme="henrys"] .rb {
  background: #D8312A !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; border:none !important;
  padding: 9px 26px !important; border-radius: 999px !important; letter-spacing:.16em !important;
  text-transform: uppercase !important; font-weight: 800 !important; font-size: 13px !important;
  width: fit-content !important; margin: 0 auto 16px !important; display:block !important;
  box-shadow: none !important;
}
/* numeral romano + adornos → naranja */
body[data-theme="henrys"] .m-sec-num { color: var(--h-orange) !important; -webkit-text-fill-color: var(--h-orange) !important; }
body[data-theme="henrys"] .m-sec-head .orn, body[data-theme="henrys"] .m-sec-head .orn i { color: var(--h-orange) !important; }
body[data-theme="henrys"] .m-nota { color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important; text-align:center !important; }

/* === CARDS navy (fotos del menú, ofertas, opciones, tiles del home) — NO los ítems de lista === */
body[data-theme="henrys"] .mitem-card,
body[data-theme="henrys"] .item,
body[data-theme="henrys"] .card,
body[data-theme="henrys"] .offer-card,
body[data-theme="henrys"] .option,
body[data-theme="henrys"] .hub-card {
  background: rgba(35,42,94,0.85) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--h-cream) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
  border-radius: 14px !important;
}

/* === MENÚ vista LISTA como el menú FÍSICO: sin cajas, fila con líder de puntos (pedido CEO) === */
body[data-theme="henrys"] .m-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 4px 12px !important;
  margin-bottom: 8px !important;
}
body[data-theme="henrys"] .mitem {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 11px 2px !important;
  align-items: baseline !important;
}
body[data-theme="henrys"] .mitem + .mitem { border-top: 1px solid rgba(255,255,255,0.10) !important; }
body[data-theme="henrys"] .mitem .dots { border-bottom: 1px dotted rgba(255,255,255,0.30) !important; }
body[data-theme="henrys"] .mitem .info .n,
body[data-theme="henrys"] .n { color: var(--h-white) !important; -webkit-text-fill-color: var(--h-white) !important; font-weight: 700 !important; }
body[data-theme="henrys"] .m-item-desc,
body[data-theme="henrys"] .mitem-card .info .d,
body[data-theme="henrys"] .d { color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important; }
/* Precio → naranja fuerte */
body[data-theme="henrys"] .mitem .p,
body[data-theme="henrys"] .p,
body[data-theme="henrys"] .price,
body[data-theme="henrys"] .item-price {
  color: var(--h-orange) !important; -webkit-text-fill-color: var(--h-orange) !important;
  font-weight: 800 !important; background: none !important; text-shadow: none !important;
}
body[data-theme="henrys"] .dots { color: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.18) !important; }
/* placeholder de foto sin imagen → gradiente marca */
body[data-theme="henrys"] .mitem-card .ph:not([style*="background-image"]) {
  background: linear-gradient(135deg,#D8312A 0%, #F0842B 60%, #35A9A7 100%) !important; opacity:.55 !important;
}

/* === HEADINGS === */
body[data-theme="henrys"] h1, body[data-theme="henrys"] h2,
body[data-theme="henrys"] h3, body[data-theme="henrys"] h4 { color: var(--h-cream) !important; }

/* === INPUTS === */
body[data-theme="henrys"] input, body[data-theme="henrys"] textarea,
body[data-theme="henrys"] select, body[data-theme="henrys"] .input,
body[data-theme="henrys"] .input-tel {
  background: rgba(255,255,255,0.06) !important; color: var(--h-cream) !important;
  border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 12px !important;
}
body[data-theme="henrys"] input::placeholder, body[data-theme="henrys"] textarea::placeholder { color: rgba(167,174,218,0.65) !important; }
body[data-theme="henrys"] label, body[data-theme="henrys"] .label { color: var(--h-cream) !important; -webkit-text-fill-color: var(--h-cream) !important; font-weight: 600 !important; }

/* === HUB CARDS (panel dueño) === */
body[data-theme="henrys"] .hub-card .h { color: var(--h-white) !important; }
body[data-theme="henrys"] .hub-card .d { color: var(--h-muted) !important; }
body[data-theme="henrys"] .hub-card .ic, body[data-theme="henrys"] .ic { color: var(--h-orange) !important; stroke: var(--h-orange) !important; }
body[data-theme="henrys"] .stat .num { color: var(--h-orange) !important; -webkit-text-fill-color: var(--h-orange) !important; }
body[data-theme="henrys"] .stat .lbl { color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important; }

/* === Banners / ofertas / notas / legal === */
body[data-theme="henrys"] .offers-banner,
body[data-theme="henrys"] .nota, body[data-theme="henrys"] .cat-note {
  background: rgba(255,255,255,0.05) !important; color: var(--h-cream) !important;
  border: 1px solid rgba(240,132,43,0.22) !important; border-radius: 12px !important;
}
body[data-theme="henrys"] .menu-legal, body[data-theme="henrys"] .footer, body[data-theme="henrys"] footer { color: var(--h-muted) !important; }

/* === Pills flotantes (ACCESO / EN): planas estilo portada — crema con borde navy === */
body[data-theme="henrys"] .lang-float {
  background: rgba(244,236,220,0.92) !important; color: #1B1F4B !important;
  -webkit-text-fill-color: #1B1F4B !important;
  border: 1.5px solid #1B1F4B !important; box-shadow: none !important; font-weight: 700 !important;
}

/* respeta reduce motion */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="henrys"] .splash-card .logo,
  body[data-theme="henrys"] .display.gold-text { animation: none !important; }
}

/* ================================================================
   OVERRIDES FINALES DEL SPLASH (al final del archivo para ganar la
   cascada — el título heredaba henrysShine del bloque global)
   ================================================================ */
/* Título del splash: ESTÁTICO y navy (cero animación — corroborado) */
body[data-theme="henrys"] .splash-card h1.display.gold-text,
body[data-theme="henrys"] .splash-screen h1.gold-text {
  background: none !important; background-clip: initial !important; -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #1B1F4B !important; color: #1B1F4B !important;
  animation: none !important; text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}
/* Logo del splash MÁS GRANDE (pedido del CEO) — con su propio margen interno
   transparente para que NUNCA se vea cortado contra el borde de la tarjeta.
   clip-path:none ANULA el recorte global de brand-overrides.css:422
   (inset(0 0 23%) que esconde el texto "INFINITY FUSION" del logo por defecto
   y le comía el 23% inferior al logo de Henry's — CAUSA REAL del "cortado"). */
body[data-theme="henrys"] .splash-screen .logo,
body[data-theme="henrys"] .splash-card img.logo,
body[data-theme="henrys"] .splash-card .logo {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  max-width: 320px !important;
  width: 84% !important;
  margin: 0 auto 4px !important;
  display: block !important;
}

/* ================================================================
   SPLASH SIN NOMBRE: solo "BIENVENIDO" + el mensaje (pedido del CEO).
   El logo ya dice "Henry's Pizza", así que el h1 del nombre se omite
   en el render (app.js) y aquí acomodamos el escrito de abajo.
   ================================================================ */
body[data-theme="henrys"] .splash-card .eyebrow.henrys-welcome {
  color: #1B1F4B !important; -webkit-text-fill-color: #1B1F4B !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin: 6px 0 8px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5) !important;
}
body[data-theme="henrys"] .splash-card .sub {
  color: #2a2f5e !important; -webkit-text-fill-color: #2a2f5e !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  max-width: 280px !important;
  margin: 0 auto 26px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* ================================================================
   CONEXIÓN CON LA CARTA FÍSICA (pedido CEO):
   título de categoría en SCRIPT + hojas multicolor (firma del menú)
   + línea inferior — en vez del pill rojo. Solo en las secciones del menú
   (el CTA del home usa .rb sin .m-section, no se afecta).
   ================================================================ */
body[data-theme="henrys"] .m-section .rb {
  background: transparent !important;
  box-shadow: none !important;
  color: #F4ECDC !important; -webkit-text-fill-color: #F4ECDC !important;
  font-family: 'Dancing Script', cursive !important;
  font-weight: 700 !important;
  font-size: 2.15rem !important;
  line-height: 1.05 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  width: 100% !important; max-width: none !important;
  display: block !important;
  margin: 10px 0 12px !important;
  padding: 0 0 5px 44px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid rgba(255,255,255,0.16) !important;
  position: relative !important;
}
body[data-theme="henrys"] .m-section .rb::before {
  content: '';
  position: absolute; left: 2px; top: 1px;
  width: 34px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg transform='translate(17 25)'%3E%3Cellipse cx='0' cy='-10' rx='3.2' ry='9.5' fill='%237CB342' transform='rotate(-34)'/%3E%3Cellipse cx='0' cy='-10' rx='3.2' ry='9.5' fill='%2335A9A7' transform='rotate(-12)'/%3E%3Cellipse cx='0' cy='-10' rx='3.2' ry='9.5' fill='%23F0842B' transform='rotate(11)'/%3E%3Cellipse cx='0' cy='-10' rx='3.2' ry='9.5' fill='%23D8312A' transform='rotate(33)'/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat;
}

/* ================================================================
   FOTOS: thumbnail a la IZQUIERDA + info a la DERECHA, fotos más chicas
   (pedido CEO — antes eran cuadros grandes en 2 columnas)
   ================================================================ */
body[data-theme="henrys"] .menu-view-grid .m-section > .mitem-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body[data-theme="henrys"] .menu-view-grid .mitem-card {
  flex-direction: row !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}
body[data-theme="henrys"] .menu-view-grid .mitem-card .ph {
  width: 110px !important;
  min-width: 110px !important;
  aspect-ratio: auto !important;
  align-self: stretch !important;
  border-radius: 0 !important;
}
body[data-theme="henrys"] .menu-view-grid .mitem-card .info {
  justify-content: center !important;
  padding: 10px 14px !important;
  gap: 3px !important;
}
body[data-theme="henrys"] .menu-view-grid .mitem-card .n { font-size: 15px !important; color: var(--h-white) !important; -webkit-text-fill-color: var(--h-white) !important; }
body[data-theme="henrys"] .menu-view-grid .mitem-card .d { font-size: 12.5px !important; flex: none !important; color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important; }
body[data-theme="henrys"] .menu-view-grid .mitem-card .p { font-size: 15px !important; font-weight: 800 !important; color: var(--h-orange) !important; -webkit-text-fill-color: var(--h-orange) !important; margin-top: 3px !important; }

/* ================================================================
   LETRA MANUSCRITA como la CARTA FÍSICA (pedido CEO):
   nombres y descripciones de los platos en "Kalam" (hand-lettered),
   para que se vea escrito a mano como el menú de ellos.
   ================================================================ */
body[data-theme="henrys"] .mitem .n,
body[data-theme="henrys"] .mitem .info .n,
body[data-theme="henrys"] .menu-view-grid .mitem-card .n {
  font-family: 'Kalam', 'Inter', cursive !important;
  font-weight: 700 !important;
  font-size: 1.24rem !important;
  line-height: 1.15 !important;
  letter-spacing: .005em !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
body[data-theme="henrys"] .mitem .m-item-desc,
body[data-theme="henrys"] .menu-view-grid .mitem-card .d {
  font-family: 'Kalam', 'Inter', cursive !important;
  font-weight: 400 !important;
  font-size: .98rem !important;
  line-height: 1.32 !important;
  opacity: .92 !important;
}
/* precio también manuscrito, en el naranja de la marca (números legibles) */
body[data-theme="henrys"] .mitem .p,
body[data-theme="henrys"] .menu-view-grid .mitem-card .p {
  font-family: 'Kalam', 'Inter', cursive !important;
  font-weight: 700 !important;
}
body[data-theme="henrys"] .mitem .p .desde { font-family: 'Kalam','Inter',cursive !important; }
/* líder de puntos un poco más presente, como el físico */
body[data-theme="henrys"] .mitem .dots { min-width: 26px !important; opacity: .9 !important; }

/* ================================================================
   PIZZA TRADICIONAL — sección por TAMAÑOS (esencia de la carta física):
   toppings + 3 columnas Personal/Mediana/Familiar con pizzas dibujadas.
   ================================================================ */
body[data-theme="henrys"] .pz-toppings {
  text-align: center;
  font-family: 'Kalam','Inter',cursive !important;
  color: var(--h-cream) !important; -webkit-text-fill-color: var(--h-cream) !important;
  font-size: 1.02rem !important; line-height: 1.35;
  margin: 0 auto 18px !important; max-width: 300px; opacity: .95;
}
body[data-theme="henrys"] .pz-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; align-items: start; margin-bottom: 6px;
}
body[data-theme="henrys"] .pz-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
}
body[data-theme="henrys"] .pz-name {
  font-family: 'Kalam','Inter',cursive !important;
  font-weight: 700 !important; text-transform: uppercase;
  color: #FF6B60 !important; -webkit-text-fill-color: #FF6B60 !important;
  font-size: .92rem !important; letter-spacing: .03em; line-height: 1;
}
body[data-theme="henrys"] .pz-pedazos {
  font-family: 'Kalam','Inter',cursive !important;
  color: var(--h-muted) !important; -webkit-text-fill-color: var(--h-muted) !important;
  font-size: .76rem !important; margin-top: -2px;
}
/* precios ARRIBA (pegados al tamaño, como el físico) → cada precio junto a su tamaño;
   la pizza va ABAJO, alto fijo + anclada abajo para que los bottoms alineen */
body[data-theme="henrys"] .pz-ill {
  color: var(--h-cream); margin: 10px 0 0; height: 74px;
  display: flex; align-items: flex-end; justify-content: center;
}
body[data-theme="henrys"] .pz-ill .pz-svg { width: 100%; height: auto; display: block; }
body[data-theme="henrys"] .pz-prices { width: 100%; display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
body[data-theme="henrys"] .pz-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 3px;
  font-family: 'Kalam','Inter',cursive !important;
  font-size: .78rem !important; color: var(--h-cream) !important; -webkit-text-fill-color: var(--h-cream) !important;
  border-bottom: 1px dotted rgba(255,255,255,.20); padding-bottom: 2px;
  white-space: nowrap;
}
body[data-theme="henrys"] .pz-row span { opacity: .85; }
body[data-theme="henrys"] .pz-row b { color: var(--h-orange) !important; -webkit-text-fill-color: var(--h-orange) !important; font-weight: 700; }

/* ================================================================
   LOGO FLOTANTE del splash (pedido CEO): flotación sutil arriba/abajo.
   Solo el logo — el fondo sigue estático. Gana la cascada (va al final)
   sobre el animation:none previo. Respeta prefers-reduced-motion.
   ================================================================ */
@keyframes henrysFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
body[data-theme="henrys"] .splash-screen .logo,
body[data-theme="henrys"] .splash-card img.logo,
body[data-theme="henrys"] .splash-card .logo {
  animation: henrysFloat 3.8s ease-in-out infinite !important;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="henrys"] .splash-screen .logo,
  body[data-theme="henrys"] .splash-card img.logo,
  body[data-theme="henrys"] .splash-card .logo { animation: none !important; }
}