/* @vertical PET — banner de Cyber Week de la home (carrusel de 2 láminas). Campaña temporal.
 * Para sacarlo: borrar <!--#parte cyber-week--> de index.html y los archivos partes/cyber-week.html,
 * public/cyber-week.css, public/cyber-week.js y public/cyber-week-*.webp. Nada más del sitio depende de esto. */
.cw-marco{position:relative;overflow:hidden}

/* --cw-i (la lámina actual) lo pone cyber-week.js. */
.cw-pista{position:relative;display:flex;touch-action:pan-y;
  transform:translateX(calc(var(--cw-i,0) * -100%));transition:transform .55s cubic-bezier(.22,.7,.2,1)}
@media (prefers-reduced-motion:reduce){ .cw-pista{transition:none} }

/* 340px de alto a 1715px de ancho. Todo va en em y 1em = 10px a ese ancho, así la composición escala entera
 * con la pantalla. Cada lámina es un solo link (.cw-link, por encima de lo demás). */
.cw-lam{position:relative;isolation:isolate;flex:0 0 100%;box-sizing:border-box;min-width:0;
  aspect-ratio:1715/340;font-size:calc(100vw / 171.5);
  background:linear-gradient(105deg,
    color-mix(in srgb,var(--accent) 12%,var(--paper)) 0%,
    color-mix(in srgb,var(--accent-2) 14%,var(--paper)) 58%,
    color-mix(in srgb,var(--accent) 6%,var(--bg)) 100%)}
.cw-link{position:absolute;z-index:3;inset:0}
.cw-escena{position:absolute;left:0;right:0;bottom:0}
.cw-escena img{display:block;width:100%;height:auto}
.cw-etiqueta{position:absolute;height:auto}
.cw-msj{position:absolute}
.cw-titulo{margin:0;font-weight:700;line-height:1.14;letter-spacing:-.035em;color:var(--ink)}
.cw-titulo span{display:block}
.cw-titulo em{font-style:normal}
.cw-fecha{display:flex;width:max-content;align-items:center;gap:.5em;margin:.5em 0 0;font-size:2.5em;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.cw-fecha svg{width:1.1em;height:1.1em;flex:none;color:var(--accent)}

.cw-lam-1 .cw-etiqueta{left:33em;top:.8em;width:21em}
.cw-lam-1 .cw-msj{left:57em;top:3.2em}
.cw-lam-1 .cw-titulo{font-size:4.6em}

/* cuenta regresiva de la lámina 1, en el hueco entre el título y los equipos */
.cw-reloj{position:absolute;left:107.5em;top:6.4em;width:25em;text-align:center}
.cw-reloj-tit{margin:0 0 .4em;font-size:max(2em,13px);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.cw-cajas{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.cw-caja{display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.8em .2em .7em;border-radius:1.2em;
  background:color-mix(in srgb,var(--paper) 80%,transparent)}
.cw-caja b{font-size:3.2em;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent)}
.cw-caja span{font-size:max(1.25em,10px);font-weight:500;color:var(--ink-soft)}

/* la góndola de fondo de la lámina 2 */
.cw-lam-2::before{content:"";position:absolute;z-index:-1;inset:0 0 0 auto;width:44%;
  background:url(/pet-mostrador-sistema.jpg) right 12% / 125% auto no-repeat;filter:blur(5px);opacity:.36;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)}
.cw-lam-2 .cw-etiqueta{left:8em;top:.8em;width:23em}
.cw-lam-2 .cw-msj{left:31.5em;top:2.6em}
.cw-lam-2 .cw-titulo{font-size:3.7em}
.cw-ofertas{position:absolute;right:8.5em;top:50%;transform:translateY(-50%);width:73em;display:grid;grid-template-columns:1fr 1fr;gap:1.6em}
.cw-tarjeta{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;padding:1.5em 1.6em 1.6em;border-radius:1.8em;text-align:center;
  background:color-mix(in srgb,var(--paper) 80%,transparent)}
.cw-tarjeta p{margin:0}
.cw-tarjeta-tit{font-size:2.5em;font-weight:700;line-height:1.16;letter-spacing:-.02em;color:var(--ink)}
.cw-tarjeta-tit b{display:block;font-weight:700}
.cw-tarjeta-sub{padding-top:.3em;font-size:1.6em;font-weight:500;color:var(--ink-soft)}
.cw-tarjeta .cw-tarjeta-tit,.cw-tarjeta .cw-tarjeta-sub{margin-bottom:.5em}
/* margin-top:auto: el descuento queda a la misma altura en las dos tarjetas, tengan o no subtítulo */
.cw-tarjeta .cw-dto{margin-top:auto;padding:.7em .5em;border-radius:1em;background:var(--accent-mist)}
.cw-dto b{display:block;font-size:4em;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.cw-dto span{font-size:1.7em;font-weight:500;color:var(--ink-soft)}
.cw-como{grid-column:1/-1;display:flex;align-items:center;gap:1.4em;padding:0 .6em}
.cw-como svg{width:2.8em;height:2.8em;flex:none;color:var(--accent)}
.cw-como div{padding-left:1.4em;border-left:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.cw-como p{margin:0;color:var(--ink);line-height:1.3}
.cw-como-tit{font-size:max(1.6em,12px);font-weight:700}
.cw-como .cw-como-tit{color:var(--accent)}
.cw-como-txt{font-size:max(1.45em,11px);font-weight:500}
.cw-como-txt b{font-weight:700;color:var(--accent)}

.cw-fle{position:absolute;top:50%;z-index:4;width:46px;height:46px;margin-top:-23px;display:grid;place-items:center;
  padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--paper);color:var(--accent);
  box-shadow:0 6px 18px rgba(18,20,28,.14);transition:transform .16s ease}
.cw-fle:hover{transform:scale(1.07)}
.cw-fle svg{width:22px;height:22px}
.cw-fle.izq{left:16px}
.cw-fle.der{right:16px}

.cw-puntos{display:flex;justify-content:center;padding-top:8px}
.cw-puntos button{width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.cw-puntos button::before{content:"";width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 28%,transparent);transition:background-color .2s ease}
.cw-puntos button.on::before{background:var(--accent)}

@media (max-width:1180px){ .cw-lam-2::before{display:none} }

/* Sin ancho para la fila única: etiqueta y mensaje arriba, las ofertas abajo y la escena al pie. */
@media (max-width:1100px){
  .cw-lam{aspect-ratio:auto;font-size:10px;padding:16px 20px 0;
    display:grid;grid-template-columns:clamp(92px,17vw,170px) minmax(0,1fr);align-items:center;align-content:space-between;column-gap:14px}
  .cw-lam .cw-etiqueta,.cw-lam .cw-msj,.cw-reloj,.cw-ofertas,.cw-escena{position:static}
  .cw-lam .cw-etiqueta{width:100%}
  .cw-lam .cw-titulo{font-size:clamp(1.12rem,5.2vw,2.1rem)}
  .cw-fecha{margin-top:6px;font-size:clamp(.82rem,4.1vw,1.35rem)}
  .cw-ofertas{grid-column:1/-1;width:auto;margin-top:12px;gap:10px;transform:none}
  .cw-tarjeta{padding:10px;border-radius:14px}
  .cw-tarjeta-tit{font-size:clamp(.8rem,3.4vw,1.15rem)}
  .cw-tarjeta-sub{padding-top:3px;font-size:clamp(.66rem,2.8vw,.9rem)}
  .cw-tarjeta .cw-dto{padding:6px 4px;border-radius:10px}
  .cw-dto b{font-size:clamp(1.25rem,5.4vw,1.9rem)}
  .cw-dto span{font-size:clamp(.72rem,2.9vw,.9rem)}
  .cw-como{gap:10px;padding:0 2px}
  .cw-como svg{width:24px;height:24px}
  .cw-como div{padding-left:10px}
  .cw-como-tit{font-size:clamp(.8rem,3.3vw,1rem)}
  .cw-como-txt{font-size:clamp(.72rem,3vw,.92rem)}
  .cw-escena{display:block;order:9;grid-column:1/-1;margin:10px -20px 0}
  .cw-reloj{grid-column:1/-1;width:min(100%,420px);margin:12px auto 0}
  .cw-reloj-tit{margin-bottom:6px;font-size:clamp(.86rem,3.6vw,1.05rem)}
  .cw-cajas{gap:8px}
  .cw-caja{padding:7px 2px 6px;border-radius:12px}
  .cw-caja b{font-size:clamp(1.25rem,5.4vw,1.7rem)}
  .cw-caja span{font-size:clamp(.68rem,2.8vw,.8rem)}
}

/* Celular: se pasa de lámina con el dedo. */
@media (max-width:760px){ .cw-fle{display:none} }

/* La lámina 1 no tiene ofertas: etiqueta y título más grandes, para llenar el alto que marca la lámina 2. */
@media (max-width:560px){
  .cw-lam-1{grid-template-columns:clamp(108px,34vw,160px) minmax(0,1fr)}
  .cw-lam-1 .cw-titulo{font-size:clamp(1.35rem,6.6vw,1.8rem)}
}