/* ==========================================================================
   ASCUA · gramática "cutlist": cortes secos, ninguno clavado, la lata en el cromo.
   Tokens en :root. Cambiar el acento es UNA línea (--brasa).
   ========================================================================== */
@font-face { font-family: "Big Shoulders"; src: url(../fuentes/big-shoulders.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(../fuentes/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  /* los seis papeles del motor */
  --carbon: #141110;
  --hueso: #F4EDE3;
  --brasa: #E8452A;          /* el único acento. La lata impresa es #E23B1D; la UI va un punto más clara para cumplir AA */
  --sc-canvas: var(--carbon);
  --sc-surface: #1F1A18;
  --sc-ink: var(--hueso);
  --sc-ink-soft: #CDBFB2;
  --sc-accent: var(--brasa);
  --sc-accent-ink: #0F0C0B;
  --sc-font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --sc-font-text: "Instrument Sans", system-ui, sans-serif;

  /* suelos de corte (no son acentos: son el mundo) */
  --suelo-guindilla: #8E170C;
  --suelo-rosa: #F2A097;
  --suelo-bosque: #1B3A22;

  --barra: 3.5rem;
  --tajo: 12vw;              /* la inclinación de TODOS los cortes (fotos, paneles, barrido): un solo ángulo */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --d-rapido: 140ms;
  --d-base: 220ms;
}

/* [hidden] manda siempre: un display de clase no puede resucitar lo que el HTML esconde */
[hidden] { display: none !important; }

/* el motor impone fondo y fuentes al body: reafirmamos lo nuestro */
html { scroll-padding-top: var(--barra); }
body { background: var(--carbon); color: var(--hueso); font-family: var(--sc-font-text); font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0; }
::selection { background: var(--brasa); color: var(--sc-accent-ink); }
:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }
.suelo-hueso :focus-visible, .suelo-rosa :focus-visible, .suelo-brasa :focus-visible { outline-color: var(--carbon); }

.saltar { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--hueso); color: var(--carbon); padding: .75rem 1rem; font-weight: 600; }
.saltar:focus { top: 1rem; }

/* ------------------------------------------------------------ la barra alta
   Ruidosa a propósito: ancho completo, cinta en marcha, el CTA pesa lo que la marca. */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--barra);
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  background: var(--carbon); border-bottom: 1px solid color-mix(in oklab, var(--hueso) 16%, transparent);
}
.barra__marca {
  display: flex; align-items: center; padding: 0 1.25rem;
  font-family: var(--sc-font-display); font-weight: 900; font-size: 2rem; letter-spacing: .01em; line-height: 1;
  color: var(--hueso); text-decoration: none;
}
.barra__cinta { overflow: hidden; display: flex; align-items: center; border-inline: 1px solid color-mix(in oklab, var(--hueso) 16%, transparent); }
.cinta { display: flex; flex: none; white-space: nowrap; animation: cinta 38s linear infinite; }
.cinta > span {
  font-family: var(--sc-font-text); font-stretch: 78%; font-weight: 650; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); padding-inline: 1.5rem;
}
.cinta > span::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: 3rem; border-radius: 50%; background: var(--brasa); vertical-align: .1em; }
@keyframes cinta { to { transform: translateX(-50%); } }
.barra__pide {
  display: flex; align-items: center; padding: 0 1.5rem;
  background: var(--brasa); color: var(--sc-accent-ink); text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase;
  transition: background-color var(--d-rapido) var(--ease);
}
.barra__pide:hover { background: var(--hueso); }
.barra__pide:active { transform: translateY(1px); }
.barra__avance { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brasa); transform-origin: 0 50%; transform: scaleX(var(--sc-progress, 0)); }

/* ------------------------------------------------------------ el cromo: la lata y la tapa (la lata abierta del pico) */
.lata {
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none;
  height: min(74vh, 58rem); aspect-ratio: 360 / 916;
  transform-origin: 50% 50%; will-change: transform, opacity;
  /* posición inicial sin JS: a la derecha, centrada en alto */
  transform: translate3d(calc(71vw - 50%), calc(50vh - 50% + var(--barra) / 2), 0);
}
.lata__poster, .lata__giro { position: absolute; inset: 0; width: 100%; height: 100%; }
.lata__poster { object-fit: contain; }
.lata.es-viva .lata__poster { opacity: 0; }
.tapa {
  position: fixed; z-index: 5; pointer-events: none; opacity: 0;
  left: 62%; bottom: 0; width: min(64vw, 80vh); aspect-ratio: 680 / 760;   /* a la derecha: «Clac.» queda sobre suelo limpio */
  transform: translateX(-50%);
}
.tapa__lienzo { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ los cortes */
.corte {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--barra) + 4vh) var(--sc-gutter) 7vh;
  overflow: hidden; isolation: auto;
}
.corte__copia { position: relative; z-index: 10; max-width: 36rem; }
.corte__copia--izq { justify-self: start; }
.corte__copia--der { justify-self: end; text-align: left; }
.corte__foto { position: absolute; inset: 0; margin: 0; z-index: 0; }
.corte__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50%) 50%; display: block; }
/* encuadre: dónde cae el sujeto de cada foto */
.foto--pomelo { --encuadre: 90%; } .foto--hielo { --encuadre: 90%; } .foto--guindilla { --encuadre: 85%; }
.foto--lima { --encuadre: 90%; } .foto--mora { --encuadre: 0%; }

.suelo-carbon { background: var(--carbon); color: var(--hueso); }
.suelo-noche  { background: #0B0908; color: var(--hueso); }
.suelo-guindilla { background: var(--suelo-guindilla); color: var(--hueso); --sc-ink-soft: #F2D5CC; }
.suelo-rosa   { background: var(--suelo-rosa); color: var(--carbon); --sc-ink: var(--carbon); --sc-ink-soft: #4A2620; }
.suelo-bosque { background: var(--suelo-bosque); color: var(--hueso); --sc-ink-soft: #D2DCC9; }
.suelo-hueso  { background: var(--hueso); color: var(--carbon); --sc-ink: var(--carbon); --sc-ink-soft: #4E423A; }
.suelo-brasa  { background: var(--brasa); color: #0F0C0B; --sc-ink: #0F0C0B; --sc-ink-soft: #2A0E08; }

/* ------------------------------------------------------------ tipografía */
.heroe__titulo, .titular, .cifra {
  font-family: var(--sc-font-display); text-transform: uppercase; margin: 0;
  font-weight: 900; line-height: .84; letter-spacing: -.005em; text-wrap: balance;
}
/* por ancho Y por alto: en una pantalla baja (un teléfono en horizontal) el titular no puede comerse el corte. En los
   escritorios de la matriz (1280×800 a 1920×1080) manda el ancho: ahí el tamaño no cambia */
.heroe__titulo { font-size: clamp(5.5rem, min(15.5vw, 25vh), 16rem); }
.titular { font-size: clamp(3.4rem, min(8.4vw, 15vh), 8.5rem); font-weight: 850; }
.titular--gigante { font-size: clamp(5rem, min(15vw, 26vh), 15rem); font-weight: 900; hyphens: manual; }
.cifra { font-size: clamp(6.5rem, min(19vw, 34vh), 19rem); font-variant-numeric: tabular-nums; line-height: .8; }
.texto { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.42; font-weight: 500; max-width: 30ch; margin: 1.25rem 0 0; text-wrap: pretty; }
.texto--estrecho { max-width: 44ch; font-size: 1rem; line-height: 1.55; }
.nota { font-size: .875rem; line-height: 1.45; max-width: 44ch; margin: 1.75rem 0 0; color: var(--sc-ink-soft); }
.nota sup, .texto sup { font-size: .7em; line-height: 0; }
.texto sup a { color: inherit; font-weight: 700; text-underline-offset: .15em; }

/* ------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.6rem;
  font-family: var(--sc-font-display); font-weight: 900; font-size: 1.375rem; letter-spacing: .02em; text-transform: uppercase;
  background: var(--brasa); color: var(--sc-accent-ink); border: 0; border-radius: 0; text-decoration: none; cursor: pointer;
  transition: background-color var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.boton:hover { background: var(--hueso); color: var(--carbon); }
.boton:active { transform: translateY(1px); }
.boton--linea { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.boton--linea:hover { background: currentColor; }
.suelo-rosa .boton--linea:hover, .suelo-hueso .boton--linea:hover { color: var(--hueso); background: var(--carbon); }
.suelo-bosque .boton--linea:hover { color: var(--suelo-bosque); background: var(--hueso); }
.boton--carbon { background: #0F0C0B; color: var(--hueso); }
.boton--carbon:hover { background: var(--hueso); color: #0F0C0B; }
.enlace { color: inherit; font-weight: 600; text-underline-offset: .22em; text-decoration-thickness: 1px; margin-left: 1.25rem; }
.enlace:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------ cortes con carácter propio */
.heroe { align-items: end; padding-bottom: 9vh; }
.heroe__copia { max-width: none; }
.heroe__titulo { position: relative; z-index: 1; }        /* la lata pasa POR DELANTE del titular */
.heroe .corte__copia { z-index: auto; }
.heroe__texto, .heroe__acciones { position: relative; z-index: 10; }
.heroe__texto { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); max-width: 34ch; margin: 2rem 0 0; font-weight: 500; line-height: 1.42; }
.heroe__acciones { margin: 2rem 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 0; }

.guindilla .titular--gigante { letter-spacing: -.01em; }
.frio { align-items: end; }
.frio__copia { justify-self: start; }
.cafeina .cifra { color: var(--carbon); }

.pico { min-height: 100vh; min-height: 100svh; background: transparent; }
.pico--clac { background: var(--carbon); align-items: start; }
.pico__copia { justify-self: start; }
.pico__copia--abajo { align-self: end; }
.pico__copia--izq { justify-self: start; max-width: 26rem; }
.pico .titular { color: var(--hueso); }

.sabor__precio { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: .01em; text-transform: uppercase; margin: 1.75rem 0 1rem; }

.etiqueta-corte { align-items: center; }
.etiqueta-corte__copia { justify-self: end; max-width: 34rem; }
.nutri { width: 100%; max-width: 30rem; border-collapse: collapse; margin: 1.75rem 0 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.nutri caption { text-align: left; font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; padding-bottom: .6rem; border-bottom: 3px solid currentColor; }
.nutri th, .nutri td { padding: .5rem 0; border-bottom: 1px solid color-mix(in oklab, currentColor 30%, transparent); font-weight: 500; }
.nutri th { text-align: left; }
.nutri td { text-align: right; }
.aviso { margin: 1.5rem 0 0; max-width: 30rem; padding: 1rem 1.1rem; border: 2px solid currentColor; font-weight: 650; font-size: .9375rem; line-height: 1.45; }

/* el cierre: la placa del pedido, seca, sin fundido */
.pedido { align-items: start; grid-template-rows: 1fr auto; row-gap: 3rem; }
.pedido__copia { max-width: 44rem; }
.pedido__form { margin-top: 2rem; display: grid; gap: 1.5rem; }
.pedido__sabores { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pedido__sabores legend { font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; margin-bottom: .75rem; }
.pedido__sabores label {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: 0 1rem 0 .85rem;
  box-shadow: inset 0 0 0 2px #0F0C0B; font-weight: 600; cursor: pointer;
  background: var(--brasa);   /* opaca: en pantallas altas (1366×1024) las latas del cierre pasan por detrás */
  transition: background-color var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease);
}
.pedido__sabores input { accent-color: #0F0C0B; width: 1.05rem; height: 1.05rem; margin: 0; }
.pedido__sabores label:has(input:checked) { background: #0F0C0B; color: var(--hueso); }
.pedido__sabores label:has(input:checked) input { accent-color: var(--brasa); }
.pedido__sabores label:has(input:focus-visible) { outline: 3px solid #0F0C0B; outline-offset: 3px; }
.pedido__fila { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
.pedido__cajas { font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; }
.paso { display: inline-flex; box-shadow: inset 0 0 0 2px #0F0C0B; }
.paso__btn { width: 3rem; height: 3rem; border: 0; background: transparent; color: inherit; font-size: 1.5rem; font-weight: 600; cursor: pointer; }
.paso__btn:hover { background: #0F0C0B; color: var(--hueso); }
.paso__btn:disabled { opacity: .35; cursor: not-allowed; background: transparent; color: inherit; }
.paso input { width: 3.5rem; border: 0; background: transparent; color: inherit; text-align: center; font: 700 1.25rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.paso input::-webkit-inner-spin-button, .paso input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pedido__total { margin: 0; font-size: 1.25rem; }
.pedido__total strong { font-family: var(--sc-font-display); font-weight: 900; font-size: 2rem; letter-spacing: .01em; }
.pedido__form > .boton { justify-self: start; }
.pedido__error { margin: 0; font-weight: 700; }
.pie { position: relative; z-index: 10; grid-column: 1 / -1; font-size: .875rem; line-height: 1.5; max-width: 62ch; border-top: 2px solid #0F0C0B; padding-top: 1.25rem; }
.pie p { margin: 0 0 .5rem; }
.pie a { color: inherit; font-weight: 700; }


.aviso-pedido { max-width: 30rem; border: 0; padding: 2rem; background: var(--hueso); color: var(--carbon); }
.aviso-pedido::backdrop { background: rgb(11 9 8 / .72); }
.aviso-pedido h2 { font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: 2.5rem; line-height: .9; margin: 0 0 1rem; }
.aviso-pedido p { margin: 0 0 1rem; }
.aviso-pedido .boton { margin-top: .5rem; }

/* ------------------------------------------------------------ teléfono
   La lata baja al pie y encoge; la copia manda arriba. */
/* la barra se estrecha SOLO en el teléfono: en una tableta en vertical cabe entera, con su cinta en marcha */
@media (max-width: 760px) {
  :root { --barra: 3.25rem; }
  .barra { grid-template-columns: auto 1fr; }
  .barra__cinta { display: none; }
  .barra__marca { font-size: 1.75rem; }
  .barra__pide { justify-self: end; font-size: 1.25rem; padding: 0 1rem; }
}
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .lata { height: 42svh; transform: translate3d(calc(50vw - 50%), calc(97svh - 100%), 0); }   /* sin JS, donde la pone ascua.js: al pie, en el centro */
  .tapa { width: 86vw; left: 50%; }
  .corte { align-items: start; padding-top: calc(var(--barra) + 3vh); padding-bottom: 46svh; }
  .corte__copia, .corte__copia--der, .etiqueta-corte__copia { justify-self: stretch; max-width: none; }
  .heroe { align-items: start; padding-bottom: 46svh; }
  /* y en una tableta en vertical, sin pasarse de alto */
  .heroe__titulo { font-size: min(24vw, 17svh); }
  .titular--gigante { font-size: min(20vw, 15svh); }
  .cifra { font-size: min(30vw, 22svh); }
  .titular { font-size: min(15vw, 11svh); }
  .enlace { margin-left: 1rem; }
  .pedido { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cinta { animation: none; }
  .lata, .tapa { transition: none; }
}

/* ==========================================================================
   MOVIMIENTO. Todo con transform, opacity y clip-path. Se arma con .js y se
   dispara con .ha-entrado (una vez: lo que vuelve a esconderse al subir es un
   defecto, no un efecto). En movimiento reducido: solo opacidad.
   ========================================================================== */
:root { --golpe: cubic-bezier(0.2, 0.9, 0.1, 1); --muelle: cubic-bezier(0.34, 1.56, 0.64, 1); --telon: cubic-bezier(0.77, 0, 0.18, 1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* titulares: letra a letra, de golpe desde el corte de su palabra (la palabra es la máscara).
   El lector de pantalla lee la copia .sr; lo partido (.partido) va aria-hidden.
   La máscara deja .2em por arriba para que el rebote no se corte. */
.a-palabras .pal { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding: .2em .03em .06em; margin: -.2em -.03em -.06em; }
.a-palabras .car { display: inline-block; }
.js .a-palabras .car { transform: translate3d(0, 118%, 0) rotate(7deg); transform-origin: 0 100%; transition: transform 520ms cubic-bezier(.3, 1.5, .45, 1); transition-delay: calc(var(--i, 0) * 22ms + 40ms); }
.js .ha-entrado .a-palabras .car, .js .a-palabras.ha-entrado .car { transform: none; }

/* velocidad: los titulares a la vista se inclinan con la rueda (JS escribe skewX con muelle) */
.titular, .heroe__titulo, .cifra { transform-origin: 50% 60%; }
.en-vista.titular, .en-vista.heroe__titulo, .en-vista.cifra { will-change: transform; }

/* re-entrada sin transición (el héroe se arma de nuevo al salir la precarga) */
.sin-trans, .sin-trans * { transition: none !important; }

/* cifras: letra a letra, caen y rebotan */
.a-cifra { white-space: nowrap; }
.a-cifra .car { display: inline-block; white-space: pre; }
.js .a-cifra .car { transform: translate3d(0, -60%, 0); opacity: 0; transition: transform 560ms var(--muelle), opacity 200ms linear; transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.js .ha-entrado .a-cifra .car { transform: none; opacity: 1; }

/* bloques de texto: suben en cascada */
.js .a-sube > :not(.a-palabras):not(.a-cifra):not(h1):not(h2) { opacity: 0; transform: translate3d(0, 1.4rem, 0); transition: opacity 420ms var(--ease), transform 620ms var(--golpe); transition-delay: calc(var(--i, 0) * 80ms + 260ms); }
.js .ha-entrado .a-sube > :not(.a-palabras):not(.a-cifra):not(h1):not(h2) { opacity: 1; transform: none; }


/* la barra baja al cargar */
.js .barra { transform: translate3d(0, -100%, 0); transition: transform 520ms var(--golpe) 80ms; }
.js.ha-cargado .barra { transform: none; }

/* la cinta gigante: dos filas que se cruzan con la rueda (--sc-p lo publica el motor) */
.cinta-gigante { min-height: 78vh; min-height: 78svh; align-content: center; gap: 0; padding-inline: 0; }
.cinta-gigante__fila {
  position: relative; z-index: 3; margin: 0; white-space: nowrap;   /* sobre el suelo fijo (2) */
  font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(5rem, 15vw, 15rem); line-height: .86; letter-spacing: -.005em;
  will-change: transform;
}
.cinta-gigante__fila > span { display: inline-block; padding-inline: .12em; }
.cinta-gigante__fila > span:nth-child(odd) { color: var(--brasa); }
.cinta-gigante__fila--a { transform: translate3d(calc((var(--sc-p, .5) - .5) * -60vw - 18vw), 0, 0); }
.cinta-gigante__fila--b { transform: translate3d(calc((var(--sc-p, .5) - .5) * 60vw - 60vw), 0, 0); -webkit-text-stroke: 0; color: var(--hueso); }
.cinta-gigante__fila--b > span:nth-child(odd) { color: #5B4B44; }

/* el cierre: las tres latas, salta la elegida */
.pedido { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-rows: auto auto; align-items: center; }
.pedido__copia { grid-column: 1; grid-row: 1; }
.pedido__latas { grid-column: 2; grid-row: 1; position: relative; z-index: 6; display: flex; justify-content: center; align-items: end; height: min(64vh, 40rem); }
.pedido__latas img { height: 100%; width: auto; margin-inline: -1.6rem; transform: translate3d(0, 5%, 0) scale(.86); transform-origin: 50% 100%; transition: transform 460ms var(--muelle), filter 260ms var(--ease); filter: brightness(.78) drop-shadow(0 1.4rem 1.2rem rgb(40 8 2 / .35)); }
.pedido__latas img.es-elegida { transform: translate3d(0, -3%, 0) scale(1); filter: brightness(1) drop-shadow(0 1.8rem 1.4rem rgb(40 8 2 / .4)); z-index: 1; position: relative; }
.pie { grid-row: 2; }
.pedido .titular--gigante { font-size: clamp(4.5rem, 10vw, 10rem); }

@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .pedido { grid-template-columns: 1fr; }
  .pedido__latas { grid-column: 1; grid-row: 2; height: 38svh; }
  .pie { grid-row: 3; }
  .cinta-gigante { min-height: 60svh; padding-bottom: 44svh; }
  /* en el teléfono la foto baja al pie, detrás de la lata, cortada en diagonal (el mismo tajo), y la copia queda sobre suelo limpio */
  .corte__foto { top: 38%; }
  .pico__copia--abajo { align-self: start; }
  /* «Clac.»: la lata abierta (entera en su fotograma) al pie, y una veladura por encima (z 6) protege la palabra al cruzarse */
  .tapa { width: min(92vw, 44svh); }   /* en una tableta en vertical, sin comerse la pantalla */
  .pico--clac::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 58svh; z-index: 6; pointer-events: none; background: linear-gradient(180deg, var(--carbon) 0%, rgb(20 17 16 / .92) 55%, transparent 100%); opacity: 0; clip-path: inset(var(--clac-arriba, 0px) 0 0 0); }   /* empieza en el borde de «Clac.»: no tiñe el corte de encima */
  .pico--clac.es-activo::before { opacity: 1; }
  .cinta-gigante__fila { font-size: 24vw; }
}

@media (prefers-reduced-motion: reduce) {
  .js .a-palabras .car, .js .a-cifra .car, .js .a-sube > * { transform: none !important; transition-duration: 300ms; }
  .js .barra { transform: none; }
  .cinta-gigante__fila--a, .cinta-gigante__fila--b { transform: none; }
  .pedido__latas img { transition: filter 200ms linear; }
}

/* unidades: mg y ml no se ponen en mayúsculas (MG sería megagramo) */
.unidad { text-transform: none; }
/* objetivos táctiles de 44 px sin mover el texto: «Los tres sabores», la nota al pie y los enlaces del pie se tocan
   por un área invisible (::after) centrada en el enlace */
.enlace, .texto sup a, .pie a { position: relative; }
.enlace::after, .texto sup a::after, .pie a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: 2.75rem; transform: translate(-50%, -50%); }
/* tableta (o teléfono) en horizontal y escritorio estrecho: la copia de los sabores no entra en el panel de la foto
   (42 % del ancho) ni baja hasta el tajo del corte siguiente (12vw, que en una pantalla baja es media copia) */
@media (min-width: 761px) and (max-width: 1279px) and (orientation: landscape) {
  .sabor .corte__copia { max-width: calc(42vw - var(--sc-gutter)); }
  .sabor { padding-bottom: calc(var(--tajo) + 1.5rem); }
  /* pomelo: veladura de columna bajo la copia, como la de 4 °C: aquí «rosa.» llega a la mitad clara del pomelo */
  .pomelo::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgb(11 9 8 / .88) 0%, rgb(11 9 8 / .7) 45%, transparent 75%); }
}
/* pantalla baja en horizontal: el héroe entero (titular, texto y CTA) en la primera pantalla */
@media (min-width: 761px) and (max-height: 500px) and (orientation: landscape) {
  .heroe__titulo { font-size: 21vh; }
  .heroe { padding-bottom: 6vh; }
}
/* 4 °C: veladura de columna solo donde va la copia, sobre la foto y bajo la lata */
.frio::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(20deg, rgb(11 9 8 / .85) 0%, rgb(11 9 8 / .5) 32%, transparent 55%); }

/* fluidez de las capas fijas: nada aparece ni desaparece de golpe */
.tapa { transition: opacity 420ms var(--ease), transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.tapa:not(.es-visible) { transform: translateX(-50%) translateY(6%) scale(.9); }
.lata__poster { transition: opacity 360ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .tapa, .lata__poster { transition: opacity 200ms linear; }
  .tapa:not(.es-visible) { transform: translateX(-50%); }
}

/* ==========================================================================
   PRECARGA · la lata se enfría (21 → 4 °C) mientras bajan sus 48 fotogramas
   de giro; a 4 °C, corte seco al héroe y la lata cae. Solo con JS y sin
   movimiento reducido. Red de seguridad si el JS no llega: a los 2 s se
   esconde sola (animation), pase lo que pase.
   ========================================================================== */
.precarga { display: none; }
/* centrada y medida por ancho Y alto: anclada abajo y a 36vw se salía por el pie en pantallas anchas o bajas */
.js .precarga {
  position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: start; gap: .75rem;
  padding: 0 var(--sc-gutter); background: var(--carbon); color: var(--hueso); overflow: hidden;
  animation: precarga-tope 1ms linear 2s forwards;
}
@keyframes precarga-tope { to { visibility: hidden; } }
.precarga__rotulo { margin: 0; font-family: var(--sc-font-text); font-stretch: 78%; font-weight: 650; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.precarga__cifra { margin: 0; font-family: var(--sc-font-display); font-weight: 900; font-size: min(34vw, 62svh); line-height: .82; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.precarga__u { color: var(--brasa); margin-left: .08em; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) { .precarga__cifra { font-size: min(52vw, 44svh); } }
@media (prefers-reduced-motion: reduce) { .js .precarga { display: none; } }

/* ==========================================================================
   CORTES · fotos y paneles con un solo ángulo (--tajo).
   La FIGURA tiene su forma fija (panel en diagonal, o el tajo por arriba en
   el teléfono) y no se anima: Chrome mide el IntersectionObserver con el
   clip-path de la propia figura, y una forma de salida degenerada no "entra"
   nunca. Lo que entra por el tajo es su CONTENIDO (la <img>),
   DESPUÉS de decodificarse (fluidez.js pone .es-visible). Mismo ángulo, dos
   sentidos: data-fluida="corte" (de izquierda a derecha) y "corte-der".
   Sin JS y con movimiento reducido: la forma fija y el fundido de fluidez.css.
   ========================================================================== */
.sabor__foto { z-index: 3; }                /* sobre el suelo fijo (2), bajo la lata (5) y la copia (10) */
.sabor__foto--der { left: 42%; clip-path: polygon(var(--tajo) 0, 100% 0, 100% 100%, 0 100%); }
.sabor__foto--izq { right: 42%; clip-path: polygon(0 0, 100% 0, calc(100% - var(--tajo)) 100%, 0 100%); }
@media (prefers-reduced-motion: no-preference) {
  /* html.js: gana a «.js .fluida.es-visible» de fluidez.css (la figura ni funde, ni desenfoca, ni se recorta al entrar) */
  html.js .fluida[data-fluida^="corte"] { opacity: 1; filter: none; clip-path: none; transition: none; }
  html.js .fluida.sabor__foto--der { clip-path: polygon(var(--tajo) 0, 100% 0, 100% 100%, 0 100%); }
  html.js .fluida.sabor__foto--izq { clip-path: polygon(0 0, 100% 0, calc(100% - var(--tajo)) 100%, 0 100%); }
  html.js .fluida[data-fluida^="corte"] > img {
    transition: transform 1800ms var(--fluida-curva), clip-path 820ms cubic-bezier(.86, 0, .07, 1);
  }
  html.js .fluida[data-fluida="corte"] > img { clip-path: polygon(0 0, 0 0, calc(0% - var(--tajo)) 100%, calc(0% - var(--tajo)) 100%); }
  html.js .fluida[data-fluida="corte-der"] > img { clip-path: polygon(calc(100% + var(--tajo)) 0, calc(100% + var(--tajo)) 0, 100% 100%, 100% 100%); }
  html.js .fluida[data-fluida^="corte"].es-visible > img { clip-path: polygon(0 0, calc(100% + var(--tajo)) 0, 100% 100%, calc(0% - var(--tajo)) 100%); }
}
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  /* en el teléfono todas las fotos bajan al pie con el mismo tajo por arriba y su contenido sube desde abajo */
  .sabor__foto--der, .sabor__foto--izq { left: 0; right: 0; top: auto; bottom: 0; height: 44svh; }
  .corte__foto, .sabor__foto--der, .sabor__foto--izq { clip-path: polygon(0 var(--tajo), 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference), (max-width: 1100px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  html.js .fluida[data-fluida^="corte"], html.js .fluida.sabor__foto--der, html.js .fluida.sabor__foto--izq { clip-path: polygon(0 var(--tajo), 100% 0, 100% 100%, 0 100%); }
  html.js .fluida[data-fluida^="corte"] > img { clip-path: polygon(0 calc(100% + var(--tajo)), 100% 100%, 100% calc(100% + var(--tajo)), 0 calc(100% + var(--tajo))); }
  html.js .fluida[data-fluida^="corte"].es-visible > img { clip-path: polygon(0 0, 100% calc(0% - var(--tajo)), 100% calc(100% + var(--tajo)), 0 calc(100% + var(--tajo))); }
}

/* ==========================================================================
   EL TAJO ENTRE SABORES · el borde de arriba de cada corte de sabor (y de la
   cinta, que cierra la zona) es un tajo «/» que cae --tajo de derecha a
   izquierda: el ::before pinta, encima del borde, un triángulo del color del
   corte. Avanza con el scroll porque ES el borde: progresivo, reversible y
   exacto tras un salto de ancla, sin JS. Va sobre las fotos del corte de
   arriba (z 4) y bajo la lata (5) y la copia (10). La lata se pinta con la
   misma recta (ascua.js · saborDeLata).
   ========================================================================== */
.sabor, .cinta-gigante { overflow: clip visible; }   /* a lo ancho recortado (la cinta desborda); a lo alto, el tajo asoma */
.sabor::before, .cinta-gigante::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--tajo); z-index: 4;
  background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none;
}

/* ==========================================================================
   AVISOS DE IA · RIA art. 50 · contrato del 2026-10-01 (sustituye al distintivo
   fijo). HTML real los dos, nunca aria-hidden; el reloj es de ascua.js.
   A · El aviso inicial (#aviso-ia): placa hueso, tinta carbón y el punto brasa
       de la cinta. Escritorio: se pone ENCIMA de la cinta de la barra (ruido
       decorativo, aria-hidden): no tapa titular, CTA ni contenido. Teléfono: la
       cinta no existe; banda al pie (tapa solo la base de la lata, decorativa).
       Entra y sale por un tajo «/»: en el escritorio el corte cruza la placa de
       izquierda a derecha; en el teléfono la línea sube y baja con el ángulo de
       las fotos del teléfono (12vw a lo ancho).
   B · La micro-marca (.marca-ia): el rótulo de la cinta sobre placa carbón
       translúcida, en una esquina del MARCO de su foto, nunca en
       la lata (render propio). Entra por un tajo pequeño y se va.
   Sin JS: el aviso es un bloque más bajo la barra (en el flujo: no tapa nada) y
   las marcas, fijas. Retirados: recortados y a opacidad 0, pero EN el árbol de
   accesibilidad (ni display:none, ni visibility:hidden, ni aria-hidden).
   Movimiento reducido: sin transición, el mismo tiempo en pantalla.
   ========================================================================== */
/* sin JS, escritorio: bajo la barra, en el flujo; el margen negativo se come el hueco de la barra que el héroe
   ya reserva, así que el héroe baja solo lo que mide el aviso (el CTA sigue en la primera pantalla) */
.aviso-ia {
  position: relative; z-index: 60; margin: var(--barra) 0 calc(-1 * var(--barra)); padding: .9rem var(--sc-gutter) .95rem;
  background: var(--hueso); color: var(--carbon); pointer-events: none;
  font-family: var(--sc-font-text); font-weight: 600; font-size: .9375rem; line-height: 1.4; text-wrap: pretty;
}
/* sin JS, teléfono: empujar el héroe metería el CTA bajo la lata fija; el aviso se ancla al pie de la PRIMERA
   pantalla (absoluto, se va con el scroll), sobre el hueco que el héroe deja para la lata */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  html:not(.js) .aviso-ia { position: absolute; left: 0; right: 0; top: 100vh; top: 100svh; margin: 0; transform: translateY(-100%); }
}
.aviso-ia::before { content: ""; display: inline-block; flex: none; width: .45rem; height: .45rem; margin-right: .7rem; border-radius: 50%; background: var(--brasa); vertical-align: .08em; }
.js .aviso-ia {
  position: fixed; top: 0; left: var(--aviso-x, 0px); width: var(--aviso-w, 100%); margin: 0;
  min-height: calc(var(--barra) - 1px); display: flex; align-items: center; padding: .5rem 1.5rem;   /* -1px: el borde y el avance de la barra siguen a la vista */
  --corte: .75rem;           /* el tajo a la escala de la placa (≈ la inclinación de las fotos) */
  opacity: 0; clip-path: polygon(0 0, 0 0, calc(0% - var(--corte)) 100%, calc(0% - var(--corte)) 100%);
}
.js .aviso-ia.es-dentro { opacity: 1; clip-path: polygon(0 0, calc(100% + var(--corte)) 0, 100% 100%, calc(0% - var(--corte)) 100%); transition: clip-path 560ms var(--golpe); }
.js .aviso-ia.es-ida { opacity: 0; clip-path: polygon(calc(100% + var(--corte)) 0, calc(100% + var(--corte)) 0, 100% 100%, 100% 100%); transition: clip-path 460ms var(--telon), opacity 0s linear 460ms; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .js .aviso-ia {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; min-height: 0; display: block;
    padding: 1rem var(--sc-gutter) calc(1.1rem + env(safe-area-inset-bottom, 0px));
    clip-path: polygon(0 calc(100% + var(--tajo)), 100% 100%, 100% calc(100% + var(--tajo)), 0 calc(100% + var(--tajo)));
  }
  .js .aviso-ia.es-dentro { clip-path: polygon(0 0, 100% calc(0% - var(--tajo)), 100% calc(100% + var(--tajo)), 0 calc(100% + var(--tajo))); }
  .js .aviso-ia.es-ida { clip-path: polygon(0 calc(100% + var(--tajo)), 100% 100%, 100% calc(100% + var(--tajo)), 0 calc(100% + var(--tajo))); }
}

/* pantalla baja en horizontal (un teléfono girado): sobre la cinta no cabe en una línea y, al crecer hacia abajo,
   tapaba el titular; al pie tapaba el texto del héroe. Va arriba a la derecha, bajo la barra y a la derecha de la lata,
   donde el héroe no tiene nada */
@media (min-width: 761px) and (max-height: 500px) and (orientation: landscape) {
  .js .aviso-ia { top: var(--barra); left: auto; right: 0; width: min(28vw, 18rem); min-height: 0; }
}

/* B · la micro-marca. Escritorio: arriba a la derecha, bajo la barra (lejos de la lata y del tajo del corte
   siguiente, que muerde la esquina de abajo a la derecha). Teléfono: arriba a la derecha, por debajo del
   tajo de la figura. */
.marca-ia {
  position: absolute; z-index: 2; top: calc(var(--barra) + .75rem); right: .75rem; margin: 0; pointer-events: none;
  display: flex; align-items: center; gap: .4rem; padding: .26rem .5rem .24rem .45rem;
  background: rgb(20 17 16 / .78); color: var(--hueso);
  font-family: var(--sc-font-text); font-stretch: 78%; font-weight: 650; font-size: .75rem; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.js .marca-ia { --corte: .4rem; opacity: 0; clip-path: polygon(0 0, 0 0, calc(0% - var(--corte)) 100%, calc(0% - var(--corte)) 100%); }
.js .marca-ia.es-dentro { opacity: 1; clip-path: polygon(0 0, calc(100% + var(--corte)) 0, 100% 100%, calc(0% - var(--corte)) 100%); transition: clip-path 320ms var(--golpe); }
.js .marca-ia.es-ida { opacity: 0; clip-path: polygon(calc(100% + var(--corte)) 0, calc(100% + var(--corte)) 0, 100% 100%, 100% 100%); transition: clip-path 280ms var(--telon), opacity 0s linear 280ms; }
@media (prefers-reduced-motion: reduce) {
  .js .aviso-ia.es-dentro, .js .aviso-ia.es-ida, .js .marca-ia.es-dentro, .js .marca-ia.es-ida { transition: none; }
}
.marca-ia::before { content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--brasa); }
.marca-ia > span { white-space: nowrap; }
.sabor__foto--izq .marca-ia { right: auto; left: .75rem; }   /* lima: el panel está a la izquierda y la lata, a su derecha */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  /* la lata ocupa la columna central: el rótulo cabe en la de la derecha partido en tres líneas
     («con&nbsp;IA» no se separa) */
  .marca-ia, .sabor__foto--izq .marca-ia { top: calc(var(--tajo) * .5 + .5rem); right: .625rem; left: auto; align-items: flex-start; }
  .marca-ia > span { white-space: normal; width: min-content; }
  .marca-ia::before { margin-top: .3rem; }
}

/* CTA magnéticos (solo ratón): ascua.js mueve el botón con `translate` y la etiqueta un poco más */
.iman__txt { display: inline-block; pointer-events: none; }