/* =====================================================================
   temporada.css — Biomix · temporada de ofrenda 2026 (9-oct-2026)
   ENCENDIDO / APAGADO = la clase "muertos" en <html>. Va JUNTO a "otono": esta capa se pone ENCIMA del otoño.
     · Se apaga sola el 3-nov-2026 a las 00:00 de CDMX (script de guarda en cada página) y el sitio vuelve,
       tal cual, a la edición de otoño (que a su vez se apaga el 1-dic).
     · Para apagarla antes: quitar "muertos" de <html> en las 6 páginas (o correr aplicar_temporada_biomix.py --quitar).
   Reglas de este archivo:
     · Todo va con el prefijo html.muertos -> sin la clase, el sitio queda exactamente como el otoño.
     · Solo acentos: la identidad de la marca (crema, verde hoja, tinta) no cambia.
     · Las fotos son las escenas que Rox aprobó el 9-oct (producto REAL; la crema lleva su tinta real),
       sin calaveras ni velas. Ningún texto dice «Día de Muertos».
   ===================================================================== */
html.muertos{
  --mu-lino:#F4E7D6;      /* lino cálido: franjas */
  --mu-arena:#E7D3BA;     /* bordes */
  --mu-terracota:#9C4524; /* texto pequeño (5,2:1 sobre lino) */
  --mu-terracota-d:#7E3519;
  --mu-cempa:#E08A1F;     /* cempasúchil: solo decoración */
}
html:not(.muertos) .mu-only{display:none !important}
html.muertos .mu-hide{display:none !important}

/* florecita de cempasúchil (decoración, junto a los avisos de temporada) */
html.muertos .mu-flor{display:inline-block;width:12px;height:12px;flex:0 0 12px;vertical-align:-1px;margin-right:7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23E08A1F'%3E%3Ccircle cx='12' cy='3.6' r='3.4'/%3E%3Ccircle cx='18' cy='6' r='3.4'/%3E%3Ccircle cx='20.4' cy='12' r='3.4'/%3E%3Ccircle cx='18' cy='18' r='3.4'/%3E%3Ccircle cx='12' cy='20.4' r='3.4'/%3E%3Ccircle cx='6' cy='18' r='3.4'/%3E%3Ccircle cx='3.6' cy='12' r='3.4'/%3E%3Ccircle cx='6' cy='6' r='3.4'/%3E%3C/g%3E%3Cg fill='%23C8661A'%3E%3Ccircle cx='12' cy='8' r='2.6'/%3E%3Ccircle cx='16' cy='12' r='2.6'/%3E%3Ccircle cx='12' cy='16' r='2.6'/%3E%3Ccircle cx='8' cy='12' r='2.6'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%238A4316'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- barra superior y franja de las páginas interiores ---------- */
html.muertos .topbar{background:var(--mu-lino) !important;color:var(--mu-terracota) !important;border-bottom-color:var(--mu-arena) !important}
html.muertos .topbar a{color:var(--mu-terracota) !important}
html.muertos .topbar .ot-link{display:inline-flex;align-items:center}
html.muertos .ot-ribbon{background:var(--mu-lino);color:var(--mu-terracota);border-bottom-color:var(--mu-arena)}
html.muertos .ot-ribbon:hover{color:var(--mu-terracota-d)}

/* ---------- PORTADA · héroe: la «ofrenda clara» (caja y gotero de jengibre + crema 20 en 1, papel picado, cempasúchil) ----------
   Escritorio: la foto se ancla por la DERECHA: el borde derecho de la crema (94,24 % del ancho de la foto) queda a 16 px
   del borde de la pantalla. Alto = el que cabe sin que el borde izquierdo de la foto pase de 50 % + 280 px (el texto del
   héroe acaba en 50 % + 274 px, medido); tope = el alto del héroe. La foto cuelga desde arriba (el papel picado «cuelga»
   de la barra) y se disuelve a la izquierda y abajo en un fondo del mismo tono que su pared (sin recuadro). */
html.muertos.otono .hero-scene.mu-scene img{left:calc(100% - 16px);transform:translateX(-94.24%);
  height:min(100%,calc((50vw - 296px) * 1.4933));
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 7%,#000 15%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 7%,#000 15%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (min-width:981px){
  html.muertos.otono .hero-bg{background:radial-gradient(60% 55% at 88% 92%,rgba(214,184,156,.75),rgba(214,184,156,0) 100%),
    linear-gradient(90deg,#F9F3EA 0%,#F7ECDD 45%,#F5E4CF 68%,#EFD9BE 100%) !important}
}
@media (max-width:980px){
  html.muertos.otono .hero-scene.mu-scene img{position:static;left:auto;transform:none;height:auto;width:100%;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}
html.muertos .ot-tag.mu-only{border-color:rgba(156,69,36,.32);color:var(--mu-terracota)}
html.muertos .ot-tag.mu-only i{background:var(--mu-cempa)}

/* cinta de atributos: lino y terracota; los rombos, color cempasúchil */
html.muertos .marq{background:var(--mu-lino) !important;color:var(--mu-terracota) !important;border-block:1px solid var(--mu-arena) !important}
html.muertos .marq-track span::after{color:var(--mu-cempa);opacity:1}

/* ---------- la edición de temporada: franja con papel picado, lino y cempasúchil (sin producto) ---------- */
html.muertos .ot-band{background:#E2C8AC url("media/temporada/banda-1600.webp") center 46%/cover no-repeat;min-height:clamp(320px,34vw,500px)}
@media (min-width:1300px),(min-resolution:1.5dppx) and (min-width:621px){html.muertos .ot-band{background-image:url("media/temporada/banda-2400.webp")}}
html.muertos .ot-head{background:radial-gradient(closest-side,rgba(240,226,207,.62),rgba(240,226,207,0))}
html.muertos .ot-script{color:var(--mu-terracota)}
html.muertos .ot-rule{background:var(--mu-cempa)}
html.muertos .ot-intro{color:#3F362C}
html.muertos .ot-gk,html.muertos .ot-card .ot-cat{color:var(--mu-terracota)}
html.muertos .ot-gk::after{background:rgba(156,69,36,.2)}
@media (max-width:620px){
  html.muertos .ot-band{background:#FCFAF4 url("media/temporada/banda-s-900.webp") center top/100% auto no-repeat;min-height:0;padding:42.4vw 0 0}
  html.muertos .ot-head{background:none}
}

/* ---------- PÁGINAS INTERIORES: papel picado arriba y cempasúchil abajo, en el lado derecho del héroe ----------
   (sustituye a las ramas de otoño). Recortes sin fondo: se posan sobre el crema de la página, sin recuadro. */
html.muertos.bx-sub .hero::after{background:url("media/temporada/papel-der.webp") right top/min(21vw,290px) auto no-repeat,
  url("media/temporada/flores-der.webp") right bottom/min(19vw,250px) auto no-repeat !important;
  width:min(24vw,320px) !important;opacity:1;-webkit-mask-image:none;mask-image:none}
@media (max-width:760px){html.muertos.bx-sub .hero::after{background:url("media/temporada/papel-der.webp") right top/27vw auto no-repeat !important;
  width:28vw !important;opacity:.9}}
html.muertos.bx-sub .hero > .wrap{position:relative;z-index:1}
html.muertos.bx-sub .hero .eyebrow{color:var(--mu-terracota)}

/* ---------- CATÁLOGO: papel picado y cempasúchil en las dos esquinas, a los lados del titular centrado ---------- */
@media (min-width:1240px){
  html.muertos.bx-cat #catalog{position:relative}
  html.muertos.bx-cat #catalog::before,html.muertos.bx-cat #catalog::after{content:"";position:absolute;top:0;
    width:min(16vw,250px);height:clamp(280px,23vw,350px);pointer-events:none;z-index:0}
  html.muertos.bx-cat #catalog::before{left:0;background:url("media/temporada/papel-izq.webp") left top/100% auto no-repeat,
    url("media/temporada/flores-izq.webp") left bottom/86% auto no-repeat}
  html.muertos.bx-cat #catalog::after{right:0;background:url("media/temporada/papel-der.webp") right top/100% auto no-repeat,
    url("media/temporada/flores-der.webp") right bottom/86% auto no-repeat}
  html.muertos.bx-cat #catalog > .wrap{position:relative;z-index:1}
}

@media (prefers-reduced-motion:reduce){html.muertos .ot-ribbon .ot-arw{transition:none}}