/* ══════════════════════════════════════════════════════════════════════════════════════════
   AUREON · NAVEGACIÓN ABAJO (HUD de juego) + acabado de la casa
   Se carga el ÚLTIMO del <head>, así manda sobre aureon.css, kit.css, kit-adapt.css y
   aureon-v2.css sin tener que tocar ninguno de ellos.

   Reglas de la casa que se respetan aquí:
     · el DORADO manda; el cian solo como acento mínimo (nada de azul con glow por todo)
     · NINGÚN color fijo: todo por variables (--tinta, --borde, --sup, --oro, --radio…)
     · se mueve por transform/opacity (barato): ni sombras animadas ni blur repintándose
     · nada vibra, tiembla ni oscila: solo aparece, se eleva y se enciende
     · el elemento <nav class="pestanas"> y sus <button class="pestana" data-vista="…">
       siguen intactos: el router de js/aureon.js y el vigilante de almacen-modular.js
       (que observa nav.pestanas) funcionan igual, solo cambia dónde se ven.

   Uso: navegacion.css (el HUD es la barra fija de abajo, #hud / .hud-abajo).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --hud-alto:78px;                 /* alto real de la barra de abajo (se usa también de relleno) */
}
@media (max-width:900px){:root{--hud-alto:70px}}
@media (max-width:560px){:root{--hud-alto:64px}}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   1 · LA CABECERA DE ARRIBA: FINA Y CON LO JUSTO
   Emblema + buscador + usuario + tema + salir. Ni una pestaña más arriba.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
.barra{
  flex-wrap:nowrap!important;
  overflow:visible!important;         /* el desplegable del buscador ya no se recorta */
  gap:14px!important;
  padding:8px 18px!important;
  min-height:56px;
  align-items:center!important;
  background:var(--barra)!important;
  border-bottom:1px solid var(--borde)!important;
  backdrop-filter:blur(14px) saturate(125%);
}
html[data-tema="claro"] .barra{background:rgba(255,255,255,.92)!important;border-bottom-color:rgba(18,24,38,.1)!important}
.barra::after{                         /* filo dorado: el sello de la casa, sin ruido */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,var(--oro) 50%,transparent 96%);opacity:.35;
}
.barra-marca{flex:0 0 auto!important;min-width:0!important}
.barra-marca-texto{display:flex;flex-direction:column;gap:1px;min-width:0}
.barra-titulo-img{height:26px!important;width:auto;display:block}
.barra-emblema{width:36px!important;height:36px!important;filter:drop-shadow(0 0 10px rgba(221,179,130,.35))}
.barra-sub{display:none!important}

/* el buscador respira: crece en medio y nunca empuja al usuario fuera */
.caja-buscar{
  flex:1 1 auto!important;
  max-width:560px!important;
  min-width:0!important;
  margin-inline:auto;
  background:var(--hundido)!important;
  border:1px solid var(--borde)!important;
  border-radius:var(--radio)!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.caja-buscar:focus-within{border-color:var(--oro)!important;box-shadow:0 0 0 1px rgba(221,179,130,.28),0 6px 18px rgba(0,0,0,.18)!important}
.caja-buscar input{color:var(--tinta)!important}
.caja-buscar svg{color:var(--tinta-3)!important}
.barra-derecha{flex:0 0 auto!important;gap:10px!important}
#yo{background:transparent!important;border-color:var(--borde)!important;padding:3px 10px 3px 3px!important}
#yo:hover{border-color:var(--oro)!important}
#yo-img{width:28px!important;height:28px!important}
#yo-nombre{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.latido{display:inline-flex!important;font-size:.68rem!important;letter-spacing:.1em!important}
.latido i{background:var(--verde)!important;box-shadow:0 0 8px rgba(34,197,94,.5)!important}
#tema,#salir{padding:8px 12px!important;border-radius:var(--radio-s)!important}
#tema:hover,#salir:hover{border-color:var(--oro)!important;color:var(--tinta)!important;background:var(--cristal-2)!important}

/* el desplegable del buscador, con los colores del tema (antes iba en azul fijo) */
.resultados{
  background:var(--sup-2)!important;
  border:1px solid var(--borde-vivo)!important;
  border-radius:var(--radio)!important;
  box-shadow:var(--sombra)!important;
  color:var(--tinta);
}
.res-grupo{border-top-color:var(--borde)!important}
.res-grupo:first-child{border-top:none}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   2 · LA BARRA DE ABAJO: AQUÍ VIVE TODA LA NAVEGACIÓN (HUD)
   Fija abajo, franja completa, acceso por icono real del juego + nombre corto.
   ═════════════════════════════════════════════════════════════════════════════════════════ */
.hud-abajo{
  position:fixed!important;
  left:0;right:0;bottom:0;
  z-index:34;
  width:100%!important;
  min-height:var(--hud-alto);
  margin:0!important;
  padding:7px max(14px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:2px!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  background:linear-gradient(180deg,rgba(9,14,26,.74) 0%,rgba(9,14,26,.93) 45%,rgba(6,10,19,.99) 100%);
  border-top:1px solid var(--borde);
  box-shadow:0 -14px 34px rgba(0,0,0,.42);
  transform:translateZ(0);              /* capa propia: el HUD no repinta el resto de la página */
  animation:hud-entra .5s cubic-bezier(.2,.9,.25,1) both;
}
html[data-tema="claro"] .hud-abajo{
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(250,251,253,.96) 45%,rgba(255,255,255,.995) 100%);
  box-shadow:0 -12px 28px rgba(18,24,38,.13);
}
.hud-abajo::-webkit-scrollbar{display:none}
.hud-abajo::before{                      /* filo dorado del HUD */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,var(--oro) 50%,transparent 98%);opacity:.55;
}
.hud-abajo::after{                       /* brillo dorado del borde, pintado una vez (sin animación) */
  content:"";position:absolute;top:0;left:18%;right:18%;height:26px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(221,179,130,.16),transparent 70%);
}
@keyframes hud-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hud-abajo{animation:none}}

/* ── las pestañas del HUD ── */
.hud-abajo .pestana{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  min-width:86px!important;
  padding:8px 12px 7px!important;
  scroll-snap-align:center;
  border:none!important;
  border-radius:var(--radio)!important;
  background:transparent!important;
  color:var(--tinta-2)!important;
  font-size:.76rem!important;
  font-weight:600!important;
  letter-spacing:.03em!important;
  line-height:1!important;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,transform .18s cubic-bezier(.2,.9,.25,1);
}
.hud-abajo .pestana img{
  width:26px!important;height:26px!important;
  display:block!important;                 /* gana al «solo texto» de kit-adapt.css */
  object-fit:contain;
  opacity:.72;
  filter:saturate(1.05) brightness(1.03);
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.9,.25,1),filter .2s ease;
}
.hud-abajo .pestana:hover{
  color:var(--tinta)!important;
  background:rgba(221,179,130,.09)!important;
  transform:translateY(-2px);
}
.hud-abajo .pestana:hover img{opacity:1;transform:translateY(-1px) scale(1.06)}
.hud-abajo .pestana:active{transform:translateY(0) scale(.98)}
.hud-abajo .pestana.activa{
  color:var(--oro)!important;
  background:linear-gradient(180deg,rgba(221,179,130,.2),rgba(221,179,130,.04))!important;
}
.hud-abajo .pestana.activa::after{         /* la muesca dorada del menú activo (tapada la cian vieja) */
  content:"";position:absolute;left:16%;right:16%;top:3px;bottom:auto;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);
  box-shadow:0 0 9px rgba(221,179,130,.55);
}
.hud-abajo .pestana.activa img{
  opacity:1;
  filter:saturate(1.1) brightness(1.08) drop-shadow(0 0 7px rgba(221,179,130,.5));
}
html[data-tema="claro"] .hud-abajo .pestana img{filter:saturate(1.04) brightness(.98)}
html[data-tema="claro"] .hud-abajo .pestana.activa img{filter:saturate(1.06) brightness(.96) drop-shadow(0 0 5px rgba(169,127,74,.4))}
html[data-tema="claro"] .hud-abajo .pestana.activa{background:linear-gradient(180deg,rgba(221,179,130,.3),rgba(221,179,130,.08))!important;color:var(--tx-oro)!important}
html[data-tema="claro"] .hud-abajo .pestana:hover{background:rgba(221,179,130,.16)!important}
/* en claro la tinta tiene que ir oscura de verdad (contraste medido ≥ 4.5 : 1) */
html[data-tema="claro"] .hud-abajo .pestana{color:var(--tinta-2)!important}
html[data-tema="claro"] .hud-abajo .pestana.activa{color:var(--tx-oro)!important}
html[data-tema="claro"] .hud-accion{color:var(--tinta-2)}
html[data-tema="claro"] .hud-accion:hover{color:var(--tx-oro)}
.hud-abajo .pestana .hud-txt{white-space:nowrap}
.hud-abajo .punto{position:absolute;top:11px;right:16px;margin:0}

/* «Inicio» (el Panel) siempre reconocible como la casa */
.hud-abajo .pestana-inicio::before{
  content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--oro);opacity:.75;
}
.hud-abajo .pestana-inicio.activa::before{opacity:1;box-shadow:0 0 8px rgba(221,179,130,.6)}

/* ── accesos rápidos: lo que faltaba a mano (buscar · tesorería · tema) ── */
.hud-raya{
  flex:0 0 1px;align-self:center;height:44px;margin:0 8px;
  background:linear-gradient(180deg,transparent,var(--borde-vivo),transparent);
}
.hud-accion{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:78px;padding:8px 11px 7px;
  border:1px solid transparent;border-radius:var(--radio);
  background:transparent;color:var(--tinta-3);cursor:pointer;
  font-size:.72rem;font-weight:600;letter-spacing:.03em;line-height:1;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s cubic-bezier(.2,.9,.25,1);
}
.hud-accion img,.hud-accion svg{
  width:22px;height:22px;display:block;object-fit:contain;opacity:.66;
  filter:saturate(1.05) brightness(1.05);
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.9,.25,1);
}
.hud-accion:hover{
  color:var(--oro);background:rgba(221,179,130,.1);border-color:var(--borde-vivo);
  transform:translateY(-2px);
}
.hud-accion:hover img,.hud-accion:hover svg{opacity:1;transform:scale(1.06)}
.hud-accion:active{transform:translateY(0) scale(.98)}
html[data-tema="claro"] .hud-accion:hover{background:rgba(221,179,130,.18)}

/* ── la barra NO tapa nada: el contenido y el pie reservan su alto ── */
.contenido{padding-bottom:calc(var(--hud-alto) + 40px)!important}
main.contenido{padding-bottom:calc(var(--hud-alto) + 40px)!important}
.pie{padding-bottom:calc(var(--hud-alto) + 22px)!important;margin-bottom:0!important}
html{scroll-padding-bottom:calc(var(--hud-alto) + 24px)}
/* el brindis (aviso) nunca tapa ni bloquea la barra de abajo: sube por encima y no traga clics */
.brindis{bottom:calc(var(--hud-alto) + 24px)!important;pointer-events:none!important}
.brindis:not(.visible){opacity:0}

/* el buscador cerrado en pantalla estrecha se abre desde el acceso «Buscar» del HUD */
/* si la barra no cabe de sobra, se alinea a la izquierda para que TODO sea alcanzable
   (con justify-content:center en un contenedor con scroll, el primer acceso queda fuera) */
@media (max-width:1120px){
  .hud-abajo{justify-content:flex-start!important}
}
@media (max-width:820px){
  .caja-buscar{display:flex!important;flex:1 1 auto!important;max-width:none!important;min-width:0!important}
  .caja-buscar input{display:block!important}
  .barra{width:calc(100% - 12px)!important;padding:7px 11px!important;gap:9px!important}
  .barra-titulo-img{height:22px!important}
  .barra-emblema{width:30px!important;height:30px!important}
  #yo-nombre{display:none}
  .hud-abajo{justify-content:flex-start!important;padding-left:10px!important;padding-right:10px!important}
  .hud-abajo .pestana{min-width:74px!important;padding:7px 9px 6px!important;font-size:.7rem!important}
  .hud-abajo .pestana img{width:23px!important;height:23px!important}
  .hud-accion{min-width:64px;font-size:.66rem}
  .hud-accion img,.hud-accion svg{width:20px;height:20px}
  .hud-raya{margin:0 4px}
}
@media (max-width:1020px){
  /* kit-adapt esconde los iconos de las pestañas por debajo de 1020 px: en el HUD no */
  .hud-abajo .pestana img{display:block!important}
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   3 · ACABADO DE LA CASA (lo de arriba se quita del medio, lo importante se ve)
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* foco visible, dorado y con el mismo aire en toda la web (ratón y teclado) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--oro);
  outline-offset:2px;
  border-radius:var(--radio-s);
}
.hud-abajo .pestana:focus-visible,.hud-accion:focus-visible{outline-offset:-2px;background:rgba(221,179,130,.14)}

/* la vista que entra, entra suave (transform/opacity, nada de saltos) */
.seccion{animation:aparecer .34s cubic-bezier(.2,.9,.25,1) both}
@keyframes aparecer{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.seccion{animation:none}}

/* el filo de las tarjetas, en dorado y no en azul (el cian queda de acento) */
.tarjeta::before{background:linear-gradient(90deg,var(--oro),transparent 70%)!important;opacity:.55!important}
.tarjeta.oro::before{opacity:.9!important}
.tarjeta:hover{border-color:var(--oro)!important;box-shadow:var(--sombra)!important}

/* los accesos rápidos del panel: se elevan al pasar por encima */
.acceso{transition:transform .18s cubic-bezier(.2,.9,.25,1),border-color .18s ease,box-shadow .18s ease}
.acceso:hover{transform:translateY(-3px);border-color:var(--oro)!important}
.acceso img{transition:transform .22s cubic-bezier(.2,.9,.25,1)}
.acceso:hover img{transform:scale(1.06)}

/* cabeceras de sección con el subtítulo más legible */
.cabecera-seccion h2{color:var(--tinta)}
.sub{color:var(--tinta-2)}

/* barra de scroll y selección de la casa */
*{scrollbar-color:var(--oro-hondo) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--borde-vivo);border-radius:999px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--oro-hondo);background-clip:content-box}
::selection{background:rgba(221,179,130,.32)}

/* últimos coletazos del azul dominante: fuera */
.pestana.activa img{filter:saturate(1.1) brightness(1.08) drop-shadow(0 0 7px rgba(221,179,130,.45))}

/* ── AVISOS: ARRIBA, pegados a la cabecera (29-09) ─────────────────────────────────────────
   Antes nacian centrados abajo y, al ser flotantes, se ponian ENCIMA del contenido del Panel
   (tapaban texto) o de la barra de abajo. Ahora salen ARRIBA, justo debajo de la cabecera, donde
   no hay nada que tapar, y se van solos. Compactos y con el ancho limitado. */
.brindis{
  top:74px!important; bottom:auto!important;
  left:50%!important; right:auto!important;
  transform:translate(-50%,-180%)!important;
  max-width:min(620px, calc(100vw - 32px))!important;
  text-align:center;
}
.brindis.visible{transform:translate(-50%,0)!important}
.kori-aviso{top:auto!important; bottom:calc(var(--hud-alto, 78px) + 16px)!important}
@media (max-width:900px){.brindis{top:66px!important}}
@media (max-width:560px){.brindis{top:62px!important; max-width:none!important; left:12px!important; right:12px!important; transform:translateY(-180%)!important}
  .brindis.visible{transform:translateY(0)!important}}

/* ── FONDO: se apaga el canvas y se hace CONTINUO con el body (29-09) ─────────────────────
   El canvas #red (cielo de Aether) TAPABA la barra y el logo en la composicion: al reactivarlo
   hoy, el logo de la cabecera dejaba de verse. La web aprobada funciona SIN canvas, asi que se
   deja apagado y el "fondo que se cortaba" se arregla haciendo el fondo del body FIJO y continuo
   (cubre toda la pagina, sin cortes, sin depender del canvas). */
#red{display:none!important}
body,.vista-app{
  background-attachment:fixed!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  min-height:100vh;
}

/* ═════════════════════════════════════════════════════════════════════════════════════════
   4 · ARREGLOS MEDIDOS CON EL AUDITOR (30-09) · sin tocar la paleta aprobada
   Cada regla sale de una medición real (auditor_diseno.mjs: 8 vistas × 2 temas × 3 anchos).
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* (a) LA BARRA DE ARRIBA NO TENÍA FONDO EN OSCURO: --barra solo estaba definida para el tema
   claro (aureon.css) y aureon-finish.css (que la define en oscuro) NO se carga en index.html.
   Medido: .barra con background transparente y su texto (Zaubel 3.56:1) sobre el fondo de pantalla. */
:root{--barra:var(--sup-2)}

/* (b) --tenue tampoco estaba definida: .mapa-hud y .mapa-ficha la usan SIN valor por defecto, así
   que el color quedaba heredado y cambiaba de una vista a otra. */
:root{--tenue:#9fb0c8}
html[data-tema="claro"]{--tenue:#55616F}

/* (c) TEXTO TERCIARIO POR DEBAJO DE AA: 90 de los fallos medidos eran --tinta-3 (2.69:1 … 4.47:1) en
   span.etiqueta, div.etiqueta, .noticias-sello, .noticia-pie, .ab-mini, .ab-est, .vacio-caja…
   Se sube un punto el gris terciario en cada tema. Ningún otro color de la casa se toca. */
:root{--tinta-3:#AEB9CB}
html[data-tema="claro"]{--tinta-3:#55616F}

/* (d) OPACIDAD QUE LAVABA EL TEXTO (no el color): medido 2.81-3.05:1 en .vacio-caja (opacity .62)
   y 4.19-4.49:1 en las etiquetas del banco (opacity .72). El texto se atenúa con el color, no
   apagando el elemento entero. */
.vacio-caja,.vacio{opacity:1!important}
#sec-banco .campo label{opacity:1!important}

/* (e) FOCO VISIBLE EN PÍLDORAS RECORTADAS: el anillo de 2px con offset 2px cae fuera de la píldora
   y el contenedor con overflow lo recorta (medido: «Avisos oficiales (EU) · 0» no mostraba nada).
   Se fuerza el anillo completo con !important porque alguien lo estaba apagando (outline:none). */
.filtro:focus-visible,.boton-fantasma:focus-visible,.boton-fantasma.filtro:focus-visible{
  outline:2px solid var(--oro)!important;outline-offset:-2px!important;border-radius:var(--radio-s)!important}

/* (f) EL HUD EN PANTALLA ESTRECHA: aureon-v2.css conserva el desplegable viejo con hamburguesa
   (max-width:820px) y le colgaba al HUD top:calc(100% + 6px) + flex-direction:column +
   .pestana{width:100%}. Medido a 420×780: la barra quedaba en y=786 (6px por debajo de la pantalla)
   con sus accesos apilados en 655px dentro de una caja de 64px → ningún acceso visible en móvil. */
@media (max-width:820px){
  .hud-abajo{top:auto!important;bottom:0!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;max-height:none!important;height:auto!important}
  .hud-abajo .pestana{width:auto!important;flex:0 0 auto!important;min-width:66px!important;justify-content:center!important}
  .hud-abajo .pestana .hud-txt{font-size:.66rem!important;letter-spacing:0!important}
  .hud-abajo .pestana img{width:22px!important;height:22px!important}
}

/* (g) DESBORDE REAL A 420px (vista claves): .fila-rango es una rejilla de TRES columnas
   (aureon.css:592 → grid-template-columns:2fr 1fr auto) y en pantalla estrecha las pistas no bajan
   de su contenido: medido select#rango-puesto con der=502 en una página de 420 → +136px de
   desborde horizontal. Comprobado que YA pasaba antes de tocar el HUD: inyectando las reglas
   viejas del menú el desborde sigue siendo 136px (no lo trajo el arreglo de la barra). */
@media (max-width:600px){
  .fila-rango{grid-template-columns:1fr!important}
  .fila-rango input,.fila-rango select{min-width:0!important;width:100%!important}
  .fila-rango .boton{width:100%!important;justify-self:stretch!important}
}

/* (h) SEGUNDA TANDA DE OPACIDAD QUE LAVABA TEXTO: medido 3.64-4.06:1 (.kori-barra-nota opacity:.62,
   .ab-ev-num opacity:.7 por estilos que inyecta eventos.js). */
.kori-barra-nota{opacity:1!important}
.ab-ev-num{opacity:1!important}

/* (i) AZULES FIJOS FUERA (regla de la casa: TODO por variables). .chip.activa y .contador llevaban
   rgba(122,192,255,…) escrito a mano y medían 3.87:1 y 4.02-4.43:1. Pasan al dorado de la casa. */
.chip.activa{background:rgba(221,179,130,.16)!important;border-color:var(--borde-vivo)!important;color:var(--tinta)!important}
.contador{background:var(--hundido)!important;color:var(--tinta-2)!important}

/* (i2) ÚLTIMO CONTRASTE REAL DEL BARRIDO FINAL: la píldora verde «AHORA» (texto claro sobre el verde
   del tema) medía 4.17:1 en claro. Se le da un verde más hondo por tema, no se toca --verde. */
:root{--verde-hondo:#15803D}
html[data-tema="claro"]{--verde-hondo:#0F6B3A}
.ab-ev-pill-ahora{background:var(--verde-hondo)!important}

/* (j) TEXTO SOBRE IMAGEN: «Noticias del juego» (h2.caja-titulo) mide 3.53:1 cuando la franja de
   cabecera sale clara. No se toca ningún color del tema: se le da un halo al propio texto. */
.caja-titulo{text-shadow:0 1px 3px rgba(4,6,10,.8),0 0 10px rgba(4,6,10,.55)}
html[data-tema="claro"] .caja-titulo{text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.85)}
.heroe h1,.heroe-sub,.heroe-lema{text-shadow:0 2px 8px rgba(4,6,10,.6),0 1px 2px rgba(4,6,10,.5)}
html[data-tema="claro"] .heroe h1,html[data-tema="claro"] .heroe-sub,html[data-tema="claro"] .heroe-lema{text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.85)}