/* 597A (05/10/2026) · Fondo animado (canvas) de la cabecera de rubro + sombras para separar letras y botones del fondo.
   El canvas aparece con fundido cuando ya pintó (.f597-listo); recién entonces la sección lleva .f597-on y estas reglas aplican.
   Sin JS o con el interruptor apagado se ve la foto de siempre. Prefijo f597. */
.f597{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s ease}
.f597.f597-listo{opacity:1}
@media (prefers-reduced-motion:reduce){.f597{transition:none}}
:root .page-hero.f597-on::after{display:none}
:root .page-hero.f597-on>.wrap{position:relative;z-index:2}

/* letras: sombra corta (borde) + sombra larga (separa del fondo) */
:root .page-hero.f597-on .crumb,:root .page-hero.f597-on .crumb a{color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.55)}
:root .page-hero.f597-on .crumb a:hover{color:#fff}
:root .page-hero.f597-on h1{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45)}
:root .page-hero.f597-on h1 .r588-ini{text-shadow:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
:root .page-hero.f597-on .ph-text>p{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.6)}

/* botones: sombra suave para que floten sobre la escena */
:root .page-hero.f597-on .ph-text .btn{text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.38)}
:root .page-hero.f597-on .ph-text .btn:hover{box-shadow:0 2px 4px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.42)}
:root .page-hero.f597-on .ph-text .btn-ghost{background:rgba(4,10,22,.42);border-color:rgba(255,255,255,.62);color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
:root .page-hero.f597-on .ph-text .btn-ghost:hover{background:rgba(4,10,22,.6);border-color:#fff}

/* el libro 592 / la tarjeta de país quedan por encima del fondo, con su sombra para separarse */
:root .page-hero.f597-on .ph-art{position:relative;z-index:1}
:root .page-hero.f597-on .l592-cap{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6)}

/* franja inferior para la escena (pista, vereda, agua…): margen extra bajo los botones y el libro.
   Va con :has() para que no salte la página cuando el canvas termina de pintar (sin :has() no hay margen extra y la escena se adapta). */
@media (min-width:901px){:root .page-hero.rubro-hero:has(> canvas.f597){padding-bottom:124px}:root .page-hero.rubro-hero:has(> canvas.f597-via){padding-bottom:176px}}
@media (max-width:900px){:root .page-hero.rubro-hero:has(> canvas.f597){padding-bottom:112px}:root .page-hero.rubro-hero:has(> canvas.f597-via){padding-bottom:150px}}

/* locales iluminados (botica, carnicería, bodega, minimarket, ferretería…): fondo claro; el bloque de texto va sobre
   VIDRIO TEMPLADO verde oscuro translúcido. Sin backdrop-filter, respaldo sólido translúcido (contraste AA comprobado). */
@media (min-width:901px){
  :root .page-hero.rubro-hero:has(> canvas.f597-claro){padding-bottom:150px}
  :root .page-hero.rubro-hero:has(> canvas.f597-claro) .ph-text{position:relative;z-index:2;align-self:start;padding:20px 24px 24px;margin-left:-20px;border-radius:8px;
    background:rgba(8,40,33,.9);border:1px solid rgba(255,255,255,.07);box-shadow:0 12px 32px rgba(0,0,0,.16)}
  /* línea superior de 1 px en degradado centrado que se desvanece a los lados (como tarjetas591) */
  :root .page-hero.rubro-hero:has(> canvas.f597-claro) .ph-text::after{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 50%,transparent)}
  @supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
    :root .page-hero.rubro-hero:has(> canvas.f597-claro) .ph-text{background:linear-gradient(160deg,rgba(14,64,52,.76),rgba(6,34,28,.8));-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35)}
  }
  :root .page-hero.rubro-hero:has(> canvas.f597-claro) .ph-text::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:linear-gradient(115deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%)}
}
@media (max-width:900px){:root .page-hero.rubro-hero:has(> canvas.f597-claro){padding-bottom:140px}}
/* en los locales claros, el pie y las pestañas del libro 592 llevan su propio vidrio para leerse */
:root .page-hero.rubro-hero:has(> canvas.f597-claro) .l592-cap{background:rgba(8,40,33,.86);--l-pie:#cfe2dc;color:#cfe2dc;padding:7px 11px;border-radius:6px;text-shadow:none;border:1px solid rgba(255,255,255,.07)}
:root .page-hero.rubro-hero:has(> canvas.f597-claro) .l592-p:not(.on){background:rgba(8,40,33,.86);border-color:rgba(255,255,255,.08);color:#fff}

/* modo liviano (internet lento, tanda 597P): sin canvas ni scripts; fondo oscuro estático, sin imagen, con el texto legible */
html.lite canvas.f597{display:none!important}
html.lite .page-hero.rubro-hero:has(> canvas.f597){background:linear-gradient(160deg,#0c1b2e 0%,#0a1424 60%,#08101c 100%)!important}