/* Campañas de la portada (anuncios.go, js/anuncios.js). Tres estilos que el admin escoge:
   escaparate (uno grande con letras que entran, la foto que flota y miniaturas), baraja
   (tarjetas que se avientan) y pila (cada una se queda pegada y la siguiente la tapa al bajar).
   Solo se anima transform, opacity y clip-path; con "reducir movimiento" todo se queda quieto. */

.an{max-width:var(--container-max);margin:0 auto;padding:var(--space-5) var(--gutter-mobile) 0;box-sizing:border-box}
/* Los colores vienen de cada anuncio (anuncios.go: colores), en su style: fondo (--an-bg), letra
   (--an-fg) y el acento del botón, la etiqueta y el sello (--an-acc, con su letra --an-acc-fg).
   Estos son los de siempre por si faltan. .an-claro: fondo claro, la tarjeta lleva su orilla. */
.esc,.bj-card,.pl-card{--an-bg:var(--koff-ink);--an-fg:var(--koff-cream);--an-acc:var(--an-fg);--an-acc-fg:var(--an-bg)}

/* Lo que comparten los tres: etiqueta, título de dos renglones (el segundo hueco), texto y botón. */
.an-tag{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--an-acc);color:var(--an-acc-fg)}
.an-title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.03em;margin:var(--space-4) 0 0;display:flex;flex-direction:column;gap:.1em;
  font-size:clamp(36px,6vw,86px)}
@supports (font-size:1cqi){.an-title{font-size:min(86px,calc(100cqi / (var(--len) * .7)))}}
.an-linea{white-space:nowrap}
.an-hueca{color:transparent;-webkit-text-stroke:2px var(--an-fg)}
.an-copy{font-size:18px;line-height:1.55;max-width:34ch;margin:var(--space-4) 0 var(--space-5);opacity:.88}
.an .an-cta,.an .esc-cta{background:var(--an-acc);color:var(--an-acc-fg);border-color:var(--an-acc)}
/* Los títulos y textos toman el color del anuncio (no el de los h2/h3 de la página). */
.an .esc-title,.an .an-title,.an .esc-copy,.an .an-copy{color:var(--an-fg)}

/* ─── Escaparate ─── */
.esc{position:relative;overflow:hidden;isolation:isolate;color:var(--an-fg);background:var(--esc-base,var(--an-bg));border-radius:40px}
.esc-revela{position:absolute;inset:0;z-index:0}
.esc-revela.rv-a{animation:esc-revela-a .9s cubic-bezier(.65,0,.35,1) both}
.esc-revela.rv-b{animation:esc-revela-b .9s cubic-bezier(.65,0,.35,1) both}
@keyframes esc-revela-a{from{clip-path:circle(0% at var(--cx,50%) var(--cy,50%))}to{clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}}
@keyframes esc-revela-b{from{clip-path:circle(0% at var(--cx,50%) var(--cy,50%))}to{clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}}
.esc-mq{position:absolute;left:-10%;right:-10%;top:0;bottom:0;z-index:1;pointer-events:none;transform:rotate(-5deg)}
.esc-mq-lane{position:absolute;left:0;white-space:nowrap}
.esc-mq-lane--1{top:14%}
.esc-mq-lane--2{top:58%}
.esc-mq-track{display:inline-flex}
.esc-mq-lane--1 .esc-mq-track{animation:esc-izq 48s linear infinite}
.esc-mq-lane--2 .esc-mq-track{animation:esc-der 64s linear infinite}
@keyframes esc-izq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes esc-der{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.esc-mq-track span{font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:-.03em;text-transform:uppercase;padding-right:.3em}
.esc-mq-lane--1 span{font-size:180px;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--an-fg) 16%,transparent)}
.esc-mq-lane--2 span{font-size:120px;color:color-mix(in srgb,var(--an-fg) 6%,transparent)}
.esc-mq .mq-in{animation:esc-mq-in .9s ease both}
@keyframes esc-mq-in{from{opacity:0;transform:translateY(30px)}}

.esc-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding:56px 48px 24px}
.esc-text{min-width:0;container-type:inline-size}
/* El título siempre cabe: se ajusta al renglón más largo en el ancho de su columna, las palabras
   nunca se parten y el acento (Ú) no se corta con la máscara de la animación. */
.esc-title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.035em;margin:var(--space-5) 0 0;font-size:clamp(40px,7vw,110px)}
@supports (font-size:1cqi){.esc-title{font-size:min(124px,calc(100cqi / (var(--len) * .7)))}}
.esc-linea{display:block;white-space:nowrap;clip-path:inset(-.6em -.3em 0 -.3em);padding-bottom:.06em}
.esc-linea:empty{display:none}
.esc-hueca{color:transparent;-webkit-text-stroke:2px var(--an-fg)}
.esc-pal{display:inline-block;white-space:nowrap;margin-right:.24em}
.esc-pal:last-child{margin-right:0}
.esc-ch{display:inline-block}
.esc-entra .esc-ch{animation:esc-sube .85s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i) * 32ms + var(--b, 0ms))}
.esc-sale .esc-ch{animation:esc-cae .34s cubic-bezier(.5,0,.75,0) forwards;animation-delay:calc(var(--i) * 14ms)}
@keyframes esc-sube{from{transform:translateY(112%) rotate(10deg);opacity:0}}
@keyframes esc-cae{to{transform:translateY(112%) rotate(-8deg);opacity:0}}
.esc-copy{font-size:19px;line-height:1.55;max-width:34ch;margin:var(--space-5) 0 var(--space-6);opacity:.88}
.esc-entra-suave{animation:esc-fade .7s .38s ease both}
.esc-sale-suave{animation:esc-fade-sale .25s ease forwards}
@keyframes esc-fade{from{opacity:0;transform:translateY(16px)}}
@keyframes esc-fade-sale{to{opacity:0;transform:translateY(-10px)}}
.esc-cta{transition:transform .25s cubic-bezier(.2,.8,.2,1);transform:translate(var(--bx,0px),var(--by,0px))}
.esc-cta .k-icon{transition:transform .25s ease}
.esc-cta:hover .k-icon{transform:translateX(4px)}

.esc-stage{position:relative;display:flex;justify-content:center;perspective:1100px;touch-action:pan-y;cursor:pointer}
.esc-tilt{position:relative;transition:transform .35s ease-out;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.esc-flota{position:relative;animation:esc-flota 6s ease-in-out infinite}
@keyframes esc-flota{50%{transform:translateY(-18px) rotate(1.5deg)}}
.esc-img{display:block;width:min(100%,440px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:36px;box-shadow:0 40px 70px -34px rgba(0,0,0,.65)}
.esc-img.esc-entra-img{animation:esc-img-entra 1s cubic-bezier(.2,.9,.2,1) both}
.esc-img.esc-sale-img{animation:esc-img-sale .34s cubic-bezier(.5,0,.75,0) forwards}
@keyframes esc-img-entra{from{opacity:0;transform:scale(.78) rotate(-12deg) translateY(40px)}}
@keyframes esc-img-sale{to{opacity:0;transform:scale(.86) rotate(10deg) translateX(40px)}}
.esc-piso{position:absolute;left:15%;right:15%;bottom:-34px;height:26px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(14px);transform:translateZ(-60px);animation:esc-sombra 6s ease-in-out infinite}
@keyframes esc-sombra{50%{transform:translateZ(-60px) scale(.8);opacity:.55}}
.esc-sello{position:absolute;right:-30px;top:-30px;width:136px;height:136px;transform:translateZ(90px)}
.esc-sello svg{width:100%;height:100%;display:block;animation:esc-giro 16s linear infinite}
@keyframes esc-giro{to{transform:rotate(360deg)}}
.esc-sello-fondo{fill:var(--an-acc)}
.esc-sello-txt{font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:2.6px;fill:var(--an-acc-fg);text-transform:uppercase}
.esc-sello-centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:-.01em;color:var(--an-acc-fg);text-transform:uppercase;text-align:center;line-height:1;padding:0 28px}

/* Miniaturas en un solo renglón que se desliza de lado (nunca brincan a otro renglón), todas del
   mismo alto; la pausa es un botón redondo al final, centrado con ellas. */
.esc-pie{position:relative;z-index:2;display:flex;gap:16px;align-items:center;padding:8px 48px 36px}
.esc-thumbs{flex:1;min-width:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px;margin:-4px -2px}
.esc-thumbs::-webkit-scrollbar{display:none}
.esc-thumbs.mas-der{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.esc-thumbs.mas-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.esc-thumbs.mas-izq.mas-der{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.esc-thumb{flex:0 0 clamp(200px,22%,260px);scroll-snap-align:start;min-height:80px;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px 12px 10px;border-radius:20px;border:1.5px solid color-mix(in srgb,var(--an-fg) 18%,transparent);background:color-mix(in srgb,var(--an-fg) 6%,transparent);color:var(--an-fg);text-align:left;cursor:pointer;font:inherit;overflow:hidden;transition:background-color .3s,border-color .3s,transform .3s}
.esc-thumb:hover{transform:translateY(-3px)}
.esc-thumb img{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block}
.esc-thumb[aria-pressed="true"]{background:color-mix(in srgb,var(--an-fg) 16%,transparent);border-color:color-mix(in srgb,var(--an-fg) 55%,transparent)}
.esc-thumb-tag{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.7}
.esc-thumb-t{font-weight:600;font-size:15px;line-height:1.25;margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.esc-thumb-bar{position:absolute;left:0;right:0;bottom:0;height:3px}
.esc-thumb-bar span{display:block;height:100%;background:var(--an-fg);transform-origin:left center;transform:scaleX(0)}
.esc-thumb-bar .corre-a{animation:esc-llena-a 6s linear forwards}
.esc-thumb-bar .corre-b{animation:esc-llena-b 6s linear forwards}
@keyframes esc-llena-a{to{transform:scaleX(1)}}
@keyframes esc-llena-b{to{transform:scaleX(1)}}
.esc-thumbs:hover .esc-thumb-bar span,.esc.en-pausa .esc-thumb-bar span{animation-play-state:paused}
/* Fuera de pantalla o con la pestaña escondida no corre nada (ni la franja ni la foto). */
.esc.en-pausa-auto *,.bj.en-pausa-auto .bj-bar span{animation-play-state:paused}
.esc-pausa{flex:none;width:48px;height:48px;border-radius:var(--radius-pill);--s:20px;border:1.5px solid color-mix(in srgb,var(--an-fg) 18%,transparent);background:color-mix(in srgb,var(--an-fg) 6%,transparent);color:var(--an-fg);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}

/* ─── Baraja ─── */
.bj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}
.bj-h,.pl-h{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1;margin:var(--space-2) 0 0;color:var(--text-strong)}
.bj-ctrl{display:flex;align-items:center;gap:14px}
.bj-btn{width:48px;height:48px;border-radius:var(--radius-pill);border:1.5px solid var(--line-strong);background:transparent;color:var(--text-body);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.bj-count{font-family:var(--font-display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;min-width:52px;text-align:center;color:var(--text-strong)}
.bj-bar{width:140px;height:4px;border-radius:var(--radius-pill);background:var(--line-hairline);overflow:hidden}
.bj-bar span{display:block;height:100%;background:var(--koff-ink);transform-origin:left center;transform:scaleX(0)}
.bj-bar .corre-a{animation:esc-llena-a 5s linear forwards}
.bj-bar .corre-b{animation:esc-llena-b 5s linear forwards}
.bj.en-pausa .bj-bar span{animation-play-state:paused}
.bj-deck{position:relative;height:540px}
.bj-card{position:absolute;top:0;left:0;right:30px;bottom:30px;border-radius:32px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:28px;padding:48px 56px;box-sizing:border-box;overflow:hidden;
  background:var(--an-bg);color:var(--an-fg);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease;will-change:transform;user-select:none;-webkit-user-select:none;touch-action:pan-y;box-shadow:0 34px 60px -34px rgba(42,25,15,.55)}
.bj-card.an-claro{box-shadow:inset 0 0 0 1.5px var(--koff-sand),0 34px 60px -34px rgba(42,25,15,.4)}
.bj-card.al-frente{cursor:pointer}
.bj-card.arrastrando{transition:none;cursor:grabbing}
.bj-txt{min-width:0;container-type:inline-size}
.bj-img{width:min(100%,400px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:28px;justify-self:center;transform:rotate(5deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.45);pointer-events:none}

/* ─── Pila al bajar ─── */
.pl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.pl-pista{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text-muted);--s:18px}
.pl-pista .k-icon{animation:pl-rebota 1.6s ease-in-out infinite}
@keyframes pl-rebota{50%{transform:translateY(5px)}}
.pl-cards{view-timeline-name:--pila;display:flex;flex-direction:column;gap:120px;padding-bottom:40px}
.pl-slot{position:sticky;top:calc(84px + var(--k) * 18px);height:min(72vh,580px)}
.pl-card{position:relative;height:100%;border-radius:36px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:32px;padding:56px 64px;box-sizing:border-box;overflow:hidden;transform-origin:50% 0;will-change:transform;
  background:var(--an-bg);color:var(--an-fg);box-shadow:0 -18px 50px -30px rgba(42,25,15,.5)}
.pl-card.an-claro{box-shadow:inset 0 0 0 1.5px var(--koff-sand),0 -18px 50px -30px rgba(42,25,15,.45)}
.pl-num{position:absolute;top:22px;right:34px;font-family:var(--font-display);font-weight:900;font-size:120px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--an-fg) 30%,transparent)}
.pl-txt{min-width:0;container-type:inline-size;position:relative}
.pl-img{cursor:pointer;width:min(100%,430px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:30px;justify-self:center;transform:rotate(-4deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.45)}
@supports (animation-timeline: view()) {
  .pl-card{animation:pl-hunde linear both;animation-timeline:--pila;animation-range:exit-crossing var(--start) exit-crossing var(--end)}
  .pl-txt > *{animation:pl-aparece linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  .pl-img{animation:pl-gira linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
}
@keyframes pl-hunde{to{transform:scale(var(--to));filter:brightness(.7)}}
@keyframes pl-aparece{from{opacity:0;transform:translateY(40px)}}
@keyframes pl-gira{from{opacity:0;transform:rotate(-16deg) scale(.82)}}

/* Foto a la izquierda (solo en la computadora: en el celular la foto siempre va arriba). */
@media (min-width:861px){
  .esc.an-foto-izq .esc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .esc.an-foto-izq .esc-stage{order:-1}
  .bj-card.an-foto-izq{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .pl-card.an-foto-izq{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .bj-card.an-foto-izq .bj-img,.pl-card.an-foto-izq .pl-img{order:-1}
}

/* ─── Celular ─── */
@media (max-width:860px){
  .an{padding:var(--space-4) 8px 0}
  .esc{border-radius:30px}
  .esc-grid{grid-template-columns:1fr;padding:34px 22px 18px;gap:26px}
  .esc-stage{order:-1}
  .esc-img{width:min(66vw,310px);border-radius:28px}
  .esc-sello{width:96px;height:96px;right:-14px;top:-14px}
  .esc-sello-centro{font-size:13px;padding:0 18px}
  .esc-copy{font-size:17px;margin:var(--space-4) 0 var(--space-5)}
  .esc-pie{padding:4px 22px 26px}
  .esc-thumb{flex-basis:220px}
  .esc-mq-lane--1 span{font-size:110px}
  .esc-mq-lane--2 span{font-size:76px}
  .bj,.pl{padding:0 12px}
  .bj-deck{height:640px}
  .bj-card{grid-template-columns:1fr;align-content:start;align-items:start;gap:18px;padding:26px;right:16px;bottom:22px;border-radius:26px}
  .bj-img{order:-1;width:62%;justify-self:start}
  .bj-bar{width:90px}
  .pl-cards{gap:80px}
  .pl-slot{top:calc(76px + var(--k) * 12px);height:min(76vh,600px)}
  .pl-card{grid-template-columns:1fr;align-content:start;gap:16px;padding:26px;border-radius:28px}
  .pl-img{order:-1;width:58%;justify-self:start}
  .pl-num{font-size:72px;top:18px;right:20px}
  .an-copy{font-size:16px;margin:var(--space-3) 0 var(--space-5)}
}

/* Con "reducir movimiento" (lo prenden muchos celulares, a veces el ahorro de batería) nada se
   mueve, pero los anuncios siguen pasando solos: la franja de avance corre y lo nuevo entra con
   un fundido, sin letras que caen, foto que flota ni marquesina. */
@media (prefers-reduced-motion:reduce){
  .an *,.an *::before,.an *::after{animation:none !important;transition:none !important}
  .an .esc-entra .esc-linea,.an .esc-entra-suave,.an .esc-img.esc-entra-img{animation:an-funde .6s ease both !important}
  .an .esc-thumb-bar .corre-a{animation:esc-llena-a 6s linear forwards !important}
  .an .bj-bar .corre-a{animation:esc-llena-a 5s linear forwards !important}
  .an .bj-card{transition:opacity .45s ease !important}
}
@keyframes an-funde{from{opacity:0}}