/* ===================================================================== temporada-buenfin.css — Biomix · temporada de noviembre 2026 (capa sutil) — 1-nov-2026 ENCENDIDO / APAGADO = la clase "buenfin" en , junto a "otono" (esta capa se pone ENCIMA del otoño). · La clase NO va escrita en el HTML: la pone el script de guarda de cada página SOLO del 3-nov-2026 00:00 al 1-dic-2026 00:00 (hora de CDMX). Fuera de esa ventana esta hoja no aplica nada. · El 3-nov a las 00:00 la guarda de la ofrenda quita "muertos" en el MISMO instante en que esta pone "buenfin": nunca están las dos a la vez ni hay un momento sin ninguna. El 1-dic se apagan a la vez esta capa y el otoño. · Para apagarla antes: aplicar_temporada_buenfin_biomix.py --quitar (la guarda deja de poner la clase) y publicar. Reglas de este archivo: · Todo va con el prefijo html.buenfin -> sin la clase, el sitio queda exactamente como el otoño. · Solo acentos: la identidad de la marca (crema, verde hoja, tinta) no cambia. · Ningún texto nombra el evento ni promete ofertas, precios o %: la temporada la dicen la foto (bolsas rojas, etiquetas lisas, la diagonal roja) y el acento rojo. Textos y enlaces: los de siempre (los del otoño). · Las fotos son las escenas de temporada de noviembre 2026 con el producto REAL (gel y crema con su etiqueta real pegada). ===================================================================== */ html.buenfin{ --bf-rojo:#A8202E; /* texto pequeño sobre crema (6,5:1) */ --bf-rojo-d:#86182A; /* hover */ --bf-rojo-v:#C8283A; /* rojo vivo: solo decoración */ --bf-crema:#F8EEE6; /* franjas */ --bf-arena:#EBD9CC; /* bordes */ } html:not(.buenfin) .bf-only{display:none !important} html.buenfin .hero-scene.bf-scene{display:block !important} /* la foto va escondida en el HTML (style) por si esta hoja no cargara */ /* la ofrenda nunca convive con esta capa (aunque el navegador no ejecute la guarda) */ html.buenfin .mu-only{display:none !important} /* etiqueta de precio lisa (decoración, junto a los avisos de temporada) */ html.buenfin .topbar .ot-link.mu-hide::before,html.buenfin .ot-ribbon.mu-hide::before{content:"";display:inline-block;width:9px;height:13px; flex:0 0 9px;margin-right:8px;vertical-align:-2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Cpath d='M5.5 1h7L17 5.5V23a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5.5z' fill='%23C8283A'/%3E%3Ccircle cx='9' cy='6.2' r='1.9' fill='%23F8EEE6'/%3E%3C/svg%3E") center/contain no-repeat} /* ---------- barra superior y franja de las páginas interiores ---------- */ html.buenfin .topbar{background:var(--bf-crema) !important;color:var(--bf-rojo) !important;border-bottom-color:var(--bf-arena) !important} html.buenfin .topbar a{color:var(--bf-rojo) !important} html.buenfin .topbar .ot-link{display:inline-flex;align-items:center} html.buenfin .ot-ribbon{background:var(--bf-crema);color:var(--bf-rojo);border-bottom-color:var(--bf-arena)} html.buenfin .ot-ribbon:hover{color:var(--bf-rojo-d)} /* ---------- PORTADA · héroe: el kit (gel limpiador + crema + mascarilla) con la bolsa roja y la diagonal roja ---------- Escritorio: la foto cuelga desde arriba del héroe y su borde derecho coincide con el de la pantalla (la piedra acaba justo antes). Su ancho es 1.4155 veces su alto. Dos reglas, gana la que deje la foto más grande: · siempre vale: su borde izquierdo no pasa de 50 % + 280 px (el texto del héroe acaba en 50 % + 274 px, medido); · desde 1280 px: si la foto no baja de 350 px (la 3.ª línea del titular empieza a 356-375 px, medido de 1280 a 2560), su borde izquierdo puede llegar a 50 % + 130 px (lo más ancho de arriba es la línea «Ciencia botánica…», que acaba en 50 % + 102 px). Tope: el alto del héroe. Se disuelve a la izquierda (solo la pared y la diagonal: la bolsa queda entera) y abajo, en un fondo del mismo tono que su pared y su lino (sin recuadro). Celular: la foto entera arriba, a lo ancho. */ html.buenfin .hero-scene:not(.bf-scene){display:none !important} html.buenfin.otono .hero-scene.bf-scene img{left:100%;transform:translateX(-100%);top:0; height:min(100%,calc((50vw - 280px) * 0.7065)); -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 3.5%,#000 7.2%); mask-image:linear-gradient(180deg,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 3.5%,#000 7.2%); -webkit-mask-composite:source-in;mask-composite:intersect} @media (min-width:1280px){ html.buenfin.otono .hero-scene.bf-scene img{height:min(100%,max(calc((50vw - 280px) * 0.7065),min(350px,calc((50vw - 130px) * 0.7065))))} } @media (min-width:981px){ html.buenfin.otono .hero-bg{background:radial-gradient(55% 50% at 86% 88%,rgba(229,218,211,.85),rgba(229,218,211,0) 100%), linear-gradient(90deg,#FAF4EE 0%,#F7EDE4 45%,#F5E6DA 70%,#F3E2D4 100%) !important} } @media (max-width:980px){ html.buenfin.otono .hero-scene.bf-scene img{position:static;left:auto;top:auto;transform:none;height:auto;width:100%; -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%); -webkit-mask-composite:source-over;mask-composite:add} } html.buenfin .ot-tag{border-color:rgba(168,32,46,.3);color:var(--bf-rojo)} html.buenfin .ot-tag i{background:var(--bf-rojo-v)} /* cinta de atributos: crema con letra roja oscura; los rombos, rojo vivo */ html.buenfin .marq{background:var(--bf-crema) !important;color:var(--bf-rojo) !important;border-block:1px solid var(--bf-arena) !important} html.buenfin .marq-track span::after{color:var(--bf-rojo-v);opacity:1} /* ---------- la edición de temporada: franja de lino crema con la cinta roja y las bolsas (sin producto) ---------- */ html.buenfin .ot-band{background:#EFE6DC url("media/temporada-bf/banda-1600.webp") center 50%/cover no-repeat;min-height:clamp(320px,34vw,500px)} @media (min-width:1300px),(min-resolution:1.5dppx) and (min-width:621px){html.buenfin .ot-band{background-image:url("media/temporada-bf/banda-2400.webp")}} html.buenfin .ot-head{background:radial-gradient(closest-side,rgba(246,239,231,.7),rgba(246,239,231,0))} html.buenfin .ot-script{color:var(--bf-rojo)} html.buenfin .ot-rule{background:var(--bf-rojo-v)} html.buenfin .ot-intro{color:#3F362C} html.buenfin .ot-gk,html.buenfin .ot-card .ot-cat{color:var(--bf-rojo)} html.buenfin .ot-gk::after{background:rgba(168,32,46,.18)} @media (max-width:620px){ html.buenfin .ot-band{background:#FCFAF4 url("media/temporada-bf/banda-s-900.webp") center top/100% auto no-repeat;min-height:0;padding:42.4vw 0 0} html.buenfin .ot-head{background:none} } /* ---------- PÁGINAS INTERIORES: etiquetas lisas colgando arriba y las bolsas rojas abajo, en el lado derecho ---------- (sustituye a las ramas de otoño). Recortes sin fondo: se posan sobre el crema de la página, sin recuadro. */ html.buenfin.bx-sub .hero::after{background:url("media/temporada-bf/etiquetas-der.svg") right top/min(17vw,230px) auto no-repeat, url("media/temporada-bf/bolsas-der.webp") right bottom/min(13vw,180px) auto no-repeat !important; width:min(24vw,320px) !important;opacity:1;-webkit-mask-image:none;mask-image:none} @media (max-width:760px){html.buenfin.bx-sub .hero::after{background:url("media/temporada-bf/etiquetas-der.svg") right top/24vw auto no-repeat !important; width:26vw !important;opacity:1}} html.buenfin.bx-sub .hero > .wrap{position:relative;z-index:1} html.buenfin.bx-sub .hero .eyebrow{color:var(--bf-rojo)} /* ---------- CATÁLOGO: etiquetas colgando arriba y bolsas abajo, en las dos esquinas, a los lados del titular ---------- Medido de 1240 a 2560 px (desde arriba de #catalog): el titular ocupa y 99-188 y llega hasta 70 px del borde a 1240; las píldoras de filtro, y 299-350, empiezan a 160 px del borde a 1240. ⇒ las bolsas van ABAJO (de y 202 a 350, alto 148 px, ancho 114 px): junto a las píldoras y nunca encima del titular. Las etiquetas cuelgan por encima del titular. */ @media (min-width:1240px){ html.buenfin.bx-cat #catalog{position:relative} html.buenfin.bx-cat #catalog::before,html.buenfin.bx-cat #catalog::after{content:"";position:absolute;top:0; width:min(15vw,230px);height:350px;pointer-events:none;z-index:0} html.buenfin.bx-cat #catalog::before{left:0;background:url("media/temporada-bf/etiquetas-izq.svg") left top/100% auto no-repeat, url("media/temporada-bf/bolsas-izq.webp") left bottom/auto 148px no-repeat} html.buenfin.bx-cat #catalog::after{right:0;background:url("media/temporada-bf/etiquetas-der.svg") right top/100% auto no-repeat, url("media/temporada-bf/bolsas-der.webp") right bottom/auto 148px no-repeat} html.buenfin.bx-cat #catalog > .wrap{position:relative;z-index:1} } @media (prefers-reduced-motion:reduce){html.buenfin .ot-ribbon .ot-arw{transition:none}}