/* Apartado Ofertas (solo localhost por ahora): oferta de la semana, ofertas del mes y liquidación */
.pagina.of-ancho{max-width:1240px;padding:28px 20px 70px}
.of-aviso{background:#FFF6DD;border:1px solid #F0DCA0;color:#7A5B00;border-radius:10px;padding:9px 14px;font-size:13px;margin:0 0 16px}
.of-nota{color:var(--gris);font-size:13px;margin:18px 0 0}
.of-carga{min-height:340px;display:flex;align-items:center;justify-content:center}
.of-hero{position:relative;display:grid;grid-template-columns:minmax(300px,5fr) 7fr;background:#fff;border:1px solid var(--linea);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(8,42,116,.08)}
.of-hero-txt{position:relative;z-index:1;padding:28px 30px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.of-pill{align-self:flex-start;background:var(--rojo);color:#fff;font-weight:700;font-size:14px;padding:7px 14px;border-radius:7px}
.of-hero h2{font-size:clamp(24px,3vw,38px);line-height:1.12;color:var(--azul);font-weight:800;margin:0}
.of-hero-cols{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:14px 0}
.of-hero-cols small{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--azul);margin-bottom:2px}
.of-pct{font-size:clamp(34px,4.4vw,56px);line-height:1;color:var(--rojo);font-weight:800}
.of-final{font-size:clamp(30px,3.8vw,46px);line-height:1;color:var(--rojo);font-weight:800}
.of-hero-cols s{display:block;color:var(--gris);font-size:15px;margin-top:3px}
.of-vig{margin:0;color:var(--azul);font-weight:700;font-size:14px}
.of-tiempo{display:flex;flex-direction:column;gap:8px}
.of-fechas{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--gris)}
.of-fechas span{display:flex;flex-direction:column;line-height:1.3}
.of-fechas span:last-child{text-align:right}
.of-fechas b{color:var(--azul);font-size:13px;font-weight:700;text-transform:capitalize}
.of-barra{height:10px;background:#E3E6EC;border-radius:6px;overflow:hidden}
.of-barra i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--azul),var(--rojo));border-radius:6px;transition:width .9s linear}
.of-queda{font-size:12px;color:var(--gris);margin-top:-2px}
.of-reloj{display:flex;gap:8px}
.of-reloj span{flex:1;max-width:78px;background:var(--azul);color:#fff;border-radius:9px;padding:7px 4px 6px;text-align:center;font-size:11px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.of-reloj b{display:block;font-size:26px;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums;margin-bottom:2px}
.of-urgente .of-barra i{background:var(--rojo)}
.of-urgente .of-reloj span{background:var(--rojo)}
.of-btn{align-self:flex-start;background:var(--rojo);color:#fff;border:0;border-radius:9px;padding:13px 26px;font-weight:700;font-size:16px;cursor:pointer}
.of-btn:hover{background:var(--rojo-osc)}
.of-hero-img{min-height:340px;position:relative;margin-left:-14%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.of-hero-img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.of-dos{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;margin-top:22px;align-items:start}
.of-tit{font-size:20px;color:var(--azul);font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin:0 0 14px}
.of-mes{min-width:0}
.of-lista{margin-top:34px}
.of-pagina:not([hidden]){animation:ofEntra .35s ease both}
@keyframes ofEntra{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.of-puntos{display:flex;gap:8px;justify-content:center;margin-top:14px}
.of-punto{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#C9CED8;cursor:pointer}
.of-punto.on{width:24px;border-radius:6px;background:var(--azul)}
.of-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.of-card{position:relative;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s,transform .2s}
.of-card:hover,.of-card:focus-visible{box-shadow:0 8px 22px rgba(8,42,116,.14);transform:translateY(-2px)}
.of-cinta{position:absolute;top:10px;left:10px;background:var(--rojo);color:#fff;font-weight:700;font-size:13px;padding:3px 9px;border-radius:6px;z-index:1}
.of-card-img{aspect-ratio:1/1;background:#F4F5F8;border-radius:10px;overflow:hidden}
.of-card-img img{width:100%;height:100%;object-fit:contain;display:block}
.of-card h3{font-size:14px;line-height:1.25;color:var(--texto);font-weight:600;margin:0;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.of-card-pr s,.of-fila-pr s{color:var(--gris);font-size:13px;margin-right:6px}
.of-card-pr strong{color:var(--azul);font-size:19px;font-weight:800}
.of-lista{background:#fff;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.of-fila{display:grid;grid-template-columns:64px 1fr auto auto;gap:14px;align-items:center;padding:10px 16px;border-top:1px solid var(--linea);cursor:pointer}
.of-fila:first-child{border-top:0}
.of-fila:hover,.of-fila:focus-visible{background:#F6F8FC}
.of-fila-img{width:64px;height:64px;background:#F4F5F8;border-radius:8px;overflow:hidden}
.of-fila-img img{width:100%;height:100%;object-fit:contain;display:block}
.of-fila-info h3{font-size:15px;margin:0 0 4px;color:var(--texto);font-weight:600}
.of-ult{display:inline-block;background:var(--rojo);color:#fff;font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px}
.of-fila-pr{text-align:right;white-space:nowrap}
.of-fila-pr strong{color:var(--azul);font-size:18px;font-weight:800}
.of-fila-pct{color:var(--rojo);font-weight:800;font-size:17px;min-width:56px;text-align:right}
@media (max-width:860px){
  .of-hero{grid-template-columns:1fr}
  .of-hero-img{order:-1;min-height:220px;max-height:280px;margin-left:0;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .of-hero-txt{padding:0 18px 20px}
  .of-dos{grid-template-columns:1fr}
  .of-lista{margin-top:10px}
  .of-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .of-fila{grid-template-columns:52px 1fr auto;gap:10px;padding:10px 12px}
  .of-fila-img{width:52px;height:52px}
  .of-fila-pct{display:none}
}

/* ===== Tipografías propias de Ofertas: Bebas Neue (números, etiquetas) y Barlow Condensed (títulos) ===== */
.of-hero h2,.of-tit,.of-card h3,.of-fila-info h3{font-family:'Barlow Condensed','Roboto Condensed',sans-serif}
.of-hero h2{font-weight:800;font-size:clamp(32px,3.8vw,52px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.of-tit{font-weight:800;font-size:28px;letter-spacing:.03em}
.of-card h3,.of-fila-info h3{font-weight:700;font-size:16.5px;letter-spacing:.01em;line-height:1.15}
.of-pct,.of-final,.of-reloj b,.of-cinta,.of-fila-pct,.of-card-pr strong,.of-fila-pr strong,.of-tag,.of-banda strong,.of-banda-pill,.of-pill,.of-ult{font-family:'Bebas Neue','Barlow Condensed',sans-serif;font-weight:400;letter-spacing:.03em}
.of-pct{font-size:clamp(50px,5.8vw,76px)}
.of-final{font-size:clamp(46px,5.2vw,68px);display:inline-block;transform-origin:left center}
.of-hero-cols small,.of-fechas,.of-reloj span,.of-btn,.of-vig{font-family:'Barlow Condensed','Roboto Condensed',sans-serif}
.of-hero-cols small{font-weight:700;font-size:14px;letter-spacing:.08em}
.of-pill{font-size:19px;padding:6px 14px 3px}
.of-btn{font-weight:800;font-size:19px;letter-spacing:.05em;text-transform:uppercase;padding:12px 28px 11px}
.of-reloj b{font-size:36px;font-weight:400}
.of-reloj span{font-weight:700;font-size:12px}
.of-cinta{font-size:16px;padding:4px 9px 2px}
.of-card-pr strong{font-size:24px}
.of-fila-pr strong{font-size:23px}
.of-fila-pct{font-size:22px}
.of-ult{font-size:14px;padding:3px 8px 1px}
.of-fechas b{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:15px}

/* ===== Animación del logo al entrar a Ofertas ===== */
#ofIntro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,#fff 0,#EEF3FF 58%,#D9E4FA 100%);animation:ofiEntra .25s both;cursor:pointer}
#ofIntro.sale{animation:ofiSale .45s ease both;pointer-events:none}
.ofi-in{text-align:center;padding:0 16px}
.ofi-logo{width:min(200px,44vw);display:block;margin:0 auto;animation:ofiCae .85s cubic-bezier(.2,1.5,.4,1) both}
.ofi-txt{display:flex;justify-content:center;gap:5px;margin-top:4px;font-family:'Bebas Neue','Barlow Condensed',sans-serif;font-size:clamp(60px,12vw,118px);line-height:1;color:var(--azul)}
.ofi-txt span{display:inline-block;animation:ofiLetra .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.6s + var(--k)*.07s)}
.ofi-txt span:nth-child(even){color:var(--rojo)}
.ofi-sub{margin-top:2px;font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-weight:700;font-size:clamp(14px,2.2vw,20px);letter-spacing:.26em;text-transform:uppercase;color:var(--gris);animation:ofiFade .5s 1.25s both}
.ofi-barra{width:190px;height:5px;background:#D5DCEC;border-radius:4px;margin:18px auto 0;overflow:hidden}
.ofi-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--rojo));border-radius:4px;animation:ofiBarra 1.75s linear both}
@keyframes ofiEntra{from{opacity:0}to{opacity:1}}
@keyframes ofiSale{to{opacity:0;transform:scale(1.04)}}
@keyframes ofiCae{0%{opacity:0;transform:translateY(-70px) scale(.8)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ofiLetra{from{opacity:0;transform:translateY(34px) scale(.7)}to{opacity:1;transform:none}}
@keyframes ofiFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ofiBarra{from{width:0}to{width:100%}}

/* ===== Etiqueta «en oferta» en todos los lugares donde aparece el producto ===== */
.of-host{position:relative}
.of-tag{position:absolute;top:8px;left:8px;z-index:3;background:var(--rojo);color:#fff;font-size:16px;line-height:1.1;padding:4px 10px 2px;border-radius:6px;box-shadow:0 3px 10px rgba(200,35,27,.35);pointer-events:none;white-space:nowrap}
.of-tag::before{content:attr(data-t)}
.of-tag-peq::before{content:none}
.of-tag-peq{top:-3px;left:-3px;font-size:0;width:17px;height:17px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:none}
.of-tag-peq::after{content:"%";font-size:11px;font-family:'Bebas Neue',sans-serif}
.of-banda{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 6px;padding:8px 14px 8px 8px;border-radius:12px;background:linear-gradient(90deg,#FFF0EE,#fff);border:1px solid #F4C3BD;position:relative;overflow:hidden}
.of-banda-pill{background:var(--rojo);color:#fff;font-size:19px;padding:4px 12px 2px;border-radius:8px}
.of-banda strong{font-size:34px;color:var(--rojo);line-height:1}
.of-banda-txt{color:var(--azul);font-weight:600;font-size:13.5px}
.of-banda::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:ofBrillo 4.5s ease-in-out infinite}

/* Banner propio de la oferta (abrazaderas): más grande y pegado a la derecha para que se vea el producto completo */
.of-hero-img.of-banner{margin-left:-8%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.of-hero-img.of-banner img{inset:auto;right:0;top:-10%;height:122%;width:auto;min-width:100%;max-width:none;object-fit:cover;transform-origin:right center}
/* celular: la animación ofZoom pisa el transform, así que la foto se ancla a la derecha (donde está el producto) sin translate */
@media (max-width:860px){.of-hero-img.of-banner{margin-left:0;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}.of-hero-img.of-banner img{top:0;height:100%;left:auto;right:0}}

/* ===== Animaciones de la oferta de la semana (suaves, para invitar a comprar sin cargar la vista) ===== */
.of-hero-img{overflow:hidden}
.of-hero:not(.in) .of-hero-txt>*{opacity:0;animation:ofMostrar .01s 3.5s forwards}
.of-hero.in .of-hero-txt>*{animation:ofSube .65s cubic-bezier(.2,.8,.2,1) both}
.of-hero.in .of-hero-txt>:nth-child(2){animation-delay:.08s}
.of-hero.in .of-hero-txt>:nth-child(3){animation-delay:.16s}
.of-hero.in .of-hero-txt>:nth-child(4){animation-delay:.24s}
.of-hero.in .of-hero-txt>:nth-child(5){animation-delay:.32s}
.of-hero.in .of-hero-img img{animation:ofZoom 18s ease-in-out infinite alternate}
.of-hero.in .of-final{animation:ofLate 2.8s ease-in-out 1.2s infinite}
.of-pill{position:relative;padding-left:30px}
.of-pill::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-5px;border-radius:50%;background:#fff;animation:ofParpadeo 1.4s ease-in-out infinite}
.of-btn{position:relative;overflow:hidden}
.of-btn::after{content:"";position:absolute;top:0;bottom:0;width:50px;left:-70px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:ofBrillo 3.6s ease-in-out 1.5s infinite}
.of-reloj b.tic{animation:ofTic .45s ease}
.of-card{animation:none}
@keyframes ofSube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ofMostrar{to{opacity:1}}
@keyframes ofZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes ofLate{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes ofParpadeo{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes ofBrillo{0%{left:-80px}45%,100%{left:120%}}
@keyframes ofTic{0%{transform:translateY(-5px);opacity:.55}100%{transform:none;opacity:1}}
/* Título de la liquidación dentro de su caja y página sin ofertas vigentes */
.of-liq{min-width:0}
.of-liq>.of-lista{margin-top:0}
@media (max-width:860px){.of-liq{margin-top:10px}}
.of-vacio{max-width:520px;margin:30px auto 50px;text-align:center;color:var(--gris)}
.of-vacio img{width:110px;height:auto;margin:0 auto 10px;display:block}
.of-vacio h2{color:var(--azul);font-size:22px;margin:0 0 6px}

/* v120: carrusel de ofertas destacadas (página Ofertas, inicio y mayorista) */
.of-rot{position:relative}
.of-rot>.of-slide[hidden]{display:none}
.of-rot>.of-slide.on{animation:ofRotEntra .45s ease}
@keyframes ofRotEntra{from{opacity:.25;transform:translateX(14px)}to{opacity:1;transform:none}}
.of-rot-b{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(8,42,116,.25);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.of-rot-b:hover{transform:translateY(-50%) scale(1.08)}
.of-rot-b svg{width:20px;height:20px;fill:none;stroke:var(--azul);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.of-rot-b.izq{left:-14px}.of-rot-b.der{right:-14px}
.of-rot-p{display:flex;justify-content:center;gap:8px;margin-top:10px}
.of-rot-p button{width:10px;height:10px;border-radius:10px;border:0;padding:0;background:#C9D3E6;cursor:pointer;transition:width .25s,background .25s}
.of-rot-p button.on{width:26px;background:var(--rojo)}
@media (max-width:700px){.of-rot-b{top:110px;width:36px;height:36px}.of-rot-b.izq{left:6px}.of-rot-b.der{right:6px}}

/* oferta de Navidad: verde y rojo con estrellitas */
.of-hero.of-navidad{border-color:#BFE3CC;background:linear-gradient(135deg,#fff 0%,#F2FBF5 100%)}
.of-hero.of-navidad .of-pill{background:#14804A}
.of-hero.of-navidad .of-pill::before{display:none}
.of-hero.of-navidad .of-hero-txt::after{content:"✦  ✧  ✦";position:absolute;top:14px;right:18px;color:#D4A017;font-size:18px;letter-spacing:4px;opacity:.9}
.of-hero.of-navidad .of-hero-img{background:radial-gradient(circle at 60% 40%,#fff 0,#EAF6EE 60%,#D7EEDF 100%)}
.of-hero.of-navidad .of-hero-img img{object-fit:contain;padding:18px}

/* barra simple del estilo mayorista */
.of-rot-m .of-rot-b{width:34px;height:34px}
.of-rot-m .of-rot-b.izq{left:-10px}.of-rot-m .of-rot-b.der{right:-10px}
.of-rot-m .of-rot-p{margin-top:6px}
.ofb{display:grid;grid-template-columns:84px minmax(0,1fr) auto auto;align-items:center;gap:16px;background:#fff;border:1px solid var(--linea);border-left:5px solid var(--rojo);border-radius:12px;padding:10px 26px 10px 12px;cursor:pointer;box-shadow:0 3px 12px rgba(8,42,116,.07);transition:box-shadow .2s}
.ofb:hover{box-shadow:0 6px 18px rgba(8,42,116,.14)}
.ofb.of-navidad{border-left-color:#14804A;background:linear-gradient(90deg,#F2FBF5,#fff 40%)}
.ofb-img{width:84px;height:84px;border-radius:10px;overflow:hidden;background:#F4F6FA}
.ofb-img img{width:100%;height:100%;object-fit:contain}
.ofb-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ofb-pill{align-self:flex-start;background:var(--rojo);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 9px;border-radius:10px}
.ofb.of-navidad .ofb-pill{background:#14804A}
.ofb-txt strong{font-size:16px;color:var(--azul);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofb-queda{font-size:12.5px;color:var(--gris)}
.ofb-pr{display:flex;align-items:center;gap:10px}
.ofb-pct{background:#FDECEB;color:var(--rojo);font-weight:800;font-size:15px;padding:4px 9px;border-radius:8px}
.ofb-pr>span:last-child{display:flex;flex-direction:column;line-height:1.1}
.ofb-pr s{font-size:12px;color:var(--gris)}
.ofb-pr b{font-size:22px;color:var(--rojo);font-weight:800}
.ofb-btn{background:var(--rojo);color:#fff;font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:20px;white-space:nowrap}
.ofb.of-navidad .ofb-btn{background:#14804A}
@media (max-width:700px){
  .ofb{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px 12px}
  .ofb-img{width:64px;height:64px;grid-row:span 2}
  .ofb-pr{grid-column:2}
  .ofb-btn{display:none}
  .of-rot-m .of-rot-b{top:42px}
}
/* tablet (la tarjeta grande ya va en columna, con la foto arriba): las flechas van a la altura de la foto */
@media (min-width:701px) and (max-width:860px){.of-rot:not(.of-rot-m)>.of-rot-b{top:120px}.of-rot:not(.of-rot-m)>.of-rot-b.izq{left:8px}.of-rot:not(.of-rot-m)>.of-rot-b.der{right:8px}}

/* v123: cada producto destacado con su propio banner */
.of-hero.of-navidad .of-hero-img.of-banner{background:none}
.of-hero.of-navidad .of-hero-img.of-banner img{object-fit:cover;padding:0}
/* barra del mayorista con el banner de fondo */
.ofb.ofb-ban{position:relative;overflow:hidden;min-height:118px;border-left-width:0;color:#fff;background:#0B2A6B}
.ofb-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0}
.ofb.ofb-ban::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,20,52,.92) 0%,rgba(6,20,52,.78) 45%,rgba(6,20,52,.15) 85%)}
.ofb.ofb-ban.of-navidad::before{background:linear-gradient(90deg,rgba(6,42,24,.94) 0%,rgba(8,52,30,.8) 45%,rgba(8,52,30,.1) 85%)}
.ofb.ofb-ban>*:not(.ofb-fondo){position:relative;z-index:2}
.ofb.ofb-ban .ofb-img{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.ofb.ofb-ban .ofb-txt strong{color:#fff}
.ofb.ofb-ban .ofb-queda{color:#D7E3FA}
.ofb.ofb-ban .ofb-pr{background:rgba(255,255,255,.95);padding:6px 10px;border-radius:12px}
/* fila con todos los productos en oferta */
.of-todas{margin-top:14px}
.of-todas-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.of-todas-cab strong{font-size:15px;color:var(--azul)}
.of-todas-cab a{font-size:13px;color:var(--azul);font-weight:600}
.of-todas-pista{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.of-todas-pista .of-card{scroll-snap-align:start;min-width:0}
.of-todas-m .of-todas-pista{grid-auto-columns:minmax(130px,170px)}
.of-todas-m .of-card h3{font-size:13px}
@media (max-width:700px){.ofb.ofb-ban{min-height:0}.ofb.ofb-ban::before{background:linear-gradient(90deg,rgba(6,20,52,.92),rgba(6,20,52,.7))}.ofb.ofb-ban.of-navidad::before{background:linear-gradient(90deg,rgba(6,42,24,.94),rgba(8,52,30,.72))}.of-todas-pista{grid-auto-columns:42%}}
.of-todas .of-card-pr s{font-size:12px}
.of-todas .of-card-pr strong{font-size:19px}
.of-todas .of-card{transition:box-shadow .2s,border-color .2s,transform .2s}
.of-todas .of-card.of-actual{border:2px solid var(--rojo);box-shadow:0 6px 18px rgba(200,35,27,.22);transform:translateY(-2px)}
@media (max-width:700px){
  .of-rot-m .of-rot-p{margin-top:10px;min-height:28px;align-items:center}
  .of-rot-m .of-rot-b{top:auto;bottom:0;transform:none;width:28px;height:28px}
  .of-rot-m .of-rot-b:hover{transform:scale(1.08)}
  .of-rot-m .of-rot-b.izq{left:calc(50% - 80px)}.of-rot-m .of-rot-b.der{right:calc(50% - 80px)}
}

/* v129: el producto del banner va centrado y resaltado (punto --foco de FOCO_BANNERS), sin agrandar de más la foto */
.of-hero-img.of-banner img{inset:0;top:0;left:0;right:0;width:100%;height:100%;min-width:0;max-width:100%;object-fit:cover;object-position:50% 50%;transform-origin:var(--foco,62% 50%)}
.of-hero-img.of-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 42% 58% at var(--foco,62% 50%),rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.30) 100%)}
@keyframes ofZoomB{from{transform:scale(1)}to{transform:scale(1.04)}}
.of-hero.in .of-hero-img.of-banner img{animation:ofZoomB 16s ease-in-out infinite alternate}
@media (max-width:860px){.of-hero-img.of-banner{min-height:240px;max-height:300px}}
/* celular/tablet: la foto va arriba a todo el ancho; el recorte tiene el producto al 62 %, así que se agranda y se corre para que quede al medio */
@media (max-width:860px){.of-hero-img.of-banner img{width:132%;max-width:none;left:-31.8%;right:auto}}

/* v132: debajo de la oferta grande, los productos de esa oferta (cambian con el carrusel); al final, todos los productos en oferta */
.of-rel{margin-top:26px}
.of-rel.cambia>*{animation:ofRelEntra .5s ease both}
@keyframes ofRelEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.of-rel-esp{border-radius:18px;padding:18px 18px 20px;background:#F4F7FD}
.of-rel-esp.of-navidad{background:linear-gradient(135deg,#F2FBF5,#FFF7F6)}
.of-rel-esp.of-navidad .of-tit{color:#14804A}
.of-rel-esp .of-grid{margin-top:12px}
.of-todos-g{margin-top:34px;padding-top:24px;border-top:1px solid var(--linea)}
.of-todos-g .of-grid{margin-top:12px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.of-todos-g .of-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.of-todos-g .of-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.of-todos-g .of-grid,.of-rel-esp .of-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tarjetitas «Agregaste al carrito» debajo del carrito: se apilan (la nueva arriba, las anteriores bajan suave) */
#avisoCarro{position:fixed;z-index:950;width:min(340px,calc(100vw - 20px));display:flex;flex-direction:column;pointer-events:none}
.ac-tarjeta{position:relative;background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(8,42,116,.28);border:1px solid #DCE5F6;overflow:hidden;cursor:pointer;pointer-events:auto;visibility:hidden;opacity:0;max-height:0;margin-bottom:0;transform-origin:top right}
#avisoCarro::before{content:"";position:absolute;top:-7px;right:22px;width:14px;height:14px;background:var(--azul);transform:rotate(45deg);opacity:0;transition:opacity .25s}
#avisoCarro:has(> .ac-tarjeta.entra:first-child:not(.sale))::before{opacity:1}
.ac-tarjeta.entra{visibility:visible;opacity:1;max-height:220px;margin-bottom:10px;transform:none;animation:acEntra .5s cubic-bezier(.2,.9,.3,1.2) both}
.ac-tarjeta.sale{visibility:visible;opacity:0;max-height:0;margin-bottom:0;animation:acSale .65s ease both}
@keyframes acEntra{0%{opacity:0;transform:translateY(-14px) scale(.96);max-height:0;margin-bottom:0}45%{max-height:220px;margin-bottom:10px}100%{opacity:1;transform:none;max-height:220px;margin-bottom:10px}}
@keyframes acSale{0%{opacity:1;transform:none;max-height:220px;margin-bottom:10px}60%{opacity:0;transform:translateY(-14px) scale(.96);max-height:220px;margin-bottom:10px}100%{opacity:0;transform:translateY(-14px) scale(.96);max-height:0;margin-bottom:0}}
.ac-cab{position:relative;background:var(--azul);color:#fff;font-weight:700;font-size:14px;padding:9px 14px;display:flex;align-items:center;gap:8px}
.ac-tilde{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1FA855;font-size:13px}
.ac-cuerpo{display:flex;gap:12px;padding:12px 14px 10px;align-items:center}
.ac-img{flex:0 0 64px;width:64px;height:64px;border-radius:10px;object-fit:contain;background:#F4F6FA;border:1px solid var(--linea)}
.ac-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ac-nom{font-size:14px;color:var(--texto);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-cant{font-size:13px;color:var(--gris)}
.ac-pr{font-size:13px;color:var(--gris)}
.ac-pr b{color:var(--rojo);font-size:16px}
.ac-barra{height:4px;background:#E6EDFB}
.ac-barra i{display:block;height:100%;background:var(--rojo);width:100%;transform-origin:left}
/* entrada: la foto y los textos aparecen de a uno; salida: se van igual, en orden inverso */
.ac-tarjeta.entra .ac-tilde{animation:acPop .45s .25s both}
.ac-tarjeta.entra .ac-img{animation:acImg .55s .2s both}
.ac-tarjeta.entra .ac-nom{animation:acTxt .45s .35s both}
.ac-tarjeta.entra .ac-cant{animation:acTxt .45s .47s both}
.ac-tarjeta.entra .ac-pr{animation:acTxt .45s .59s both}
.ac-tarjeta.entra .ac-barra i{animation:acTiempo 4.2s linear both}
.ac-tarjeta:hover .ac-barra i{animation-play-state:paused}
.ac-tarjeta.sale .ac-pr{animation:acTxtSale .3s 0s both}
.ac-tarjeta.sale .ac-cant{animation:acTxtSale .3s .06s both}
.ac-tarjeta.sale .ac-nom{animation:acTxtSale .3s .12s both}
.ac-tarjeta.sale .ac-img{animation:acImgSale .35s .1s both}
@keyframes acImg{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes acImgSale{from{opacity:1;transform:none}to{opacity:0;transform:scale(.4) rotate(-12deg)}}
@keyframes acTxt{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes acTxtSale{from{opacity:1;transform:none}to{opacity:0;transform:translateX(14px)}}
@keyframes acPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes acTiempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* v134: contador tipo almanaque, limpio: la hoja nueva tiene exactamente el mismo tamaño que la de abajo
   (las dos ocupan la misma celda) y cae desde el borde de arriba; la sombra solo se ve mientras cae */
.of-reloj span{position:relative;--hoja:var(--azul)}
.of-urgente .of-reloj span,.of-reloj.of-urgente span{--hoja:var(--rojo)}
.of-reloj span::before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:44%;height:4px;background:radial-gradient(circle,rgba(255,255,255,.75) 1.4px,transparent 1.8px) 0 0/8px 4px repeat-x;opacity:.85}
.of-reloj b{display:grid;perspective:260px;line-height:1;margin:5px 0 3px}
.of-reloj .hoja{grid-area:1/1;display:block;font-style:normal;background:var(--hoja);padding:1px 0;border-top:1px solid rgba(255,255,255,.18);backface-visibility:hidden}
.of-reloj .hoja.nueva{transform-origin:50% 0;animation:hojaCae .5s cubic-bezier(.3,.85,.4,1) both}
@keyframes hojaCae{0%{transform:rotateX(-88deg);filter:brightness(1.35)}100%{transform:rotateX(0);filter:none}}
/* descuento y precio final a la misma altura */
.of-hero-cols{align-items:flex-start}
.of-pct,.of-final{font-size:clamp(46px,5.2vw,68px)}

/* v134: banda «En oferta» de la ficha: el almanaque ocupa todo el lado derecho (sin espacio muerto) */
.of-banda{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:4px;padding:10px 12px}
.of-banda .of-banda-pill{grid-column:1;grid-row:1}
.of-banda>strong{grid-column:2;grid-row:1}
.of-banda .of-banda-txt{grid-column:1/3;grid-row:2}
.of-banda .of-reloj-mini{grid-column:3;grid-row:1/3;margin-left:0;justify-self:stretch;gap:8px}
.of-reloj-mini span{flex:1;max-width:none;min-width:0;padding:8px 4px 6px;font-size:11px;border-radius:9px}
.of-reloj-mini b{font-size:clamp(24px,2.6vw,32px)}
@media (max-width:600px){
  .of-banda{grid-template-columns:auto 1fr}
  .of-banda .of-banda-txt{grid-column:1/3}
  .of-banda .of-reloj-mini{grid-column:1/3;grid-row:3;margin-top:6px}
}

/* v135: la estrella de «★ Especial Navidad» centrada (el cartel común deja lugar a la izquierda para el puntito) */
.of-hero.of-navidad .of-pill{padding-left:14px;padding-right:14px}