/* ==============================================================================
   VELACCIO V2 — páginas interiores: la plantilla de servicio (la misma para
   los cinco), casos, caso, nosotros, contacto y legales.
   Provenance ref: VEL-PROV-9K4XQ7M2
   ============================================================================== */

.t-h1s { font-family: var(--f-sans); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.2; letter-spacing: 0; text-wrap: balance; }

/* ── servicio: cabecera oscura con la pieza en una retícula ────────────────── */
.sx { position: relative; padding-top: calc(var(--hd-h) + clamp(56px, 8vw, 120px)); padding-bottom: clamp(56px, 7vw, 96px); overflow: clip; }
.sx__grid { display: grid; gap: 56px; align-items: center; }
.sx__copy { display: grid; justify-items: start; gap: 20px; max-width: 520px; }
.sx__copy .t-s { max-width: 46ch; }
.sx__crumb a { color: inherit; }
.sx__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (min-width: 1024px) {
  .sx__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .sx__copy { grid-column: 2 / 7; }
  .gridbox { grid-column: 8 / 12; }
}

/* the piece floats in a square of hairlines that run past its edges */
.gridbox { position: relative; display: grid; place-items: center; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; }
.gridbox::before {
  content: ""; position: absolute; inset: -12%; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 6); background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
.gridbox__in { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.gridbox__in--v { width: 42%; aspect-ratio: 9 / 16; }
.gridbox__in .media { position: absolute; inset: 0; }
.gridbox__cap { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--fg-2); }
.gridbox--wide .browser { width: 78%; }
.gridbox__orb { position: relative; width: 70%; color: #fff; }
.gridbox--orb .lev__chip .nb { font-size: .5625rem; }

/* client names in the hero, until the real SVG logos arrive */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(56px, 8vw, 110px); color: var(--fg-2); }
@media (min-width: 1024px) { .logos { padding-inline: calc((100% + 24px) / 12); } }
.logos li { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; }

/* the statement under the hero */
.say { padding-block: clamp(48px, 7vw, 120px); }
.say__in { display: grid; }
.say__in p { max-width: 36ch; }
@media (min-width: 1024px) { .say__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .say__in p { grid-column: 6 / 12; } }

/* "qué incluye" is the palancas component, headed from the left */
.lev--svc { padding-top: clamp(40px, 5vw, 80px); }
.lev__head--left { justify-items: start; text-align: left; margin-bottom: clamp(56px, 7vw, 96px); }
@media (min-width: 1024px) { .lev__head--left { padding-left: calc((100% + 24px) / 12); } }
.lev--svc .lev__it .t-h3 { margin-top: 2px; }

/* ── cómo trabajamos: iconos de línea en columnas ──────────────────────────── */
.how__t { text-align: center; margin-bottom: clamp(48px, 6vw, 88px); }
.how__intro { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(48px, 6vw, 88px); }
.how__intro .t-s { max-width: 46ch; }
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 44px 28px; }
.how__grid li { display: grid; align-content: start; gap: 10px; }
.how__grid .ico { width: 44px; height: 44px; color: var(--fg-3); margin-bottom: 14px; transition: color .4s, transform .6s var(--ease); }
.how__grid li:hover .ico { color: var(--fg); transform: translateY(-3px); }
.how__grid h3 { font-size: 1rem; letter-spacing: .01em; }
.how__grid p { font-size: .8125rem; line-height: 1.45; letter-spacing: .02em; color: var(--fg-2); max-width: 34ch; }
@media (min-width: 1024px) {
  .how__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: calc((100% + 24px) / 12); }
  .how__grid--7 { row-gap: 64px; }
}

/* ── cifras ────────────────────────────────────────────────────────────────── */
.nums__in { display: grid; gap: 28px; }
.nums__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 28px 24px; }
.nums__grid > div { display: grid; gap: 10px; align-content: start; }
.nums__grid .ph { font-size: .9rem; }
@media (min-width: 1024px) {
  .nums__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .nums__t { grid-column: 2 / 5; padding-top: 10px; }
  .nums__grid { grid-column: 5 / 12; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nums__note { grid-column: 5 / 12; }
}

/* ── comparativa ───────────────────────────────────────────────────────────── */
.cmp__in { display: grid; gap: 40px; }
.cmp__t { max-width: 22em; }
.cmp__table { display: grid; }
.cmp__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.45; letter-spacing: .01em; }
.cmp__row > span:nth-child(1) { font-size: .75rem; color: var(--fg-2); }
.cmp__row > span:nth-child(2) { color: var(--c-black); }
.cmp__row > span:nth-child(3) { color: var(--fg-3); }
.cmp__row--h { display: none; }
/* the Velaccio side sits on the warm light: on a phone each answer is its
   own card; from a tablet up, one rounded column behind the whole table */
@media (max-width: 767px) {
  .cmp__row > span:nth-child(2) { padding: 10px 12px; border-radius: 10px; background: var(--warm); }
  .cmp__row > span:nth-child(3) { padding-inline: 12px; }
  .cmp__row > span:nth-child(3)::before { content: "Tradicional: "; }
}
@media (min-width: 768px) {
  /* the column is painted once, behind the rows, at the second track of
     1fr 1.4fr 1.4fr with 24px gaps (--c2 → --c3), so it holds however many
     rows there are. The mesh is drawn wider and taller than the column and
     shows a window of it: at the column's own size its lobes become stripes.
     The rules between rows turn to a light line where they cross it. */
  .cmp__table { position: relative; isolation: isolate; --c2: calc((100% - 48px) / 3.8 + 24px); --c3: calc((100% - 48px) * 2.4 / 3.8 + 24px); }
  .cmp__table::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--c2); width: calc(var(--c3) - var(--c2));
    border-radius: 16px; background: var(--warm);
    background-size: 180px 180px, 240% 140%, 240% 140%, 240% 140%, 240% 140%, 240% 140%, 240% 140%, 100% 100%;
    background-position: 0 0, 30% 60%, 30% 60%, 30% 60%, 30% 60%, 30% 60%, 30% 60%, 0 0;
  }
  .cmp__row {
    grid-template-columns: 1fr 1.4fr 1.4fr; gap: 24px; padding-block: 18px; border-top: 0;
    background: linear-gradient(90deg, var(--line) var(--c2), rgba(255, 255, 255, .32) var(--c2) var(--c3), var(--line) var(--c3)) top / 100% 1px no-repeat;
  }
  .cmp__row > span:nth-child(2) { padding-inline: 22px; }
  .cmp__row--h { display: grid; font-size: .75rem; color: var(--fg-2); background: none; padding-top: 22px; }
  .cmp__row--h > span:nth-child(2) { font-weight: 500; color: var(--c-black); }
  .cmp__row:last-child { padding-bottom: 22px; }
}
@media (min-width: 1024px) {
  .cmp__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .cmp__t { grid-column: 2 / 10; }
  .cmp__table { grid-column: 2 / 12; }
}

/* ── plataformas + venta cruzada ───────────────────────────────────────────── */
.plat__in { display: grid; gap: 40px; align-items: center; }
.plat__copy { display: grid; justify-items: start; gap: 16px; }
.plat__copy .t-s { max-width: 46ch; }
.plat__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plat__logos li { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; border-radius: 8px; background: var(--c-grey); font-size: .875rem; line-height: 1.25; }
.plat__logos img, .plat__logos svg { width: 30px; height: 26px; object-fit: contain; flex: none; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s; }
.plat__logos li:hover img, .plat__logos li:hover svg { filter: none; opacity: 1; }
.plat__logos small { display: block; font-size: .6875rem; color: var(--fg-2); margin-top: 2px; }
@media (min-width: 1024px) {
  .plat__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .plat__copy { grid-column: 2 / 7; }
  .plat__logos { grid-column: 7 / 12; }
}

/* ── caso ──────────────────────────────────────────────────────────────────── */
.case__head { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.case__ico { width: 13px; height: 13px; flex: none; }
.case__head h2 { max-width: 30em; }
@media (min-width: 1024px) {
  .case__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .case__ico { grid-column: 1; justify-self: center; }
  .case__head h2 { grid-column: 2 / 11; }
}
.case__film { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0D0D0D; color: #fff; }
.case__blur { position: absolute; inset: -10%; z-index: -1; width: 120%; height: 120%; object-fit: cover; filter: blur(36px) saturate(1.1) brightness(.55); transform: scale(1.1); }
.case__v { position: relative; height: 88%; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); transition: transform 1s var(--ease); }
.case__v .media { position: absolute; inset: 0; }
.case__film:hover .case__v { transform: scale(1.02); }
.case__tags { position: absolute; left: 14px; top: 14px; }
.case__play { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #0D0D0D; font-size: .75rem; }
.case__play svg { width: 9px; height: 9px; }
@media (max-width: 599px) { .case__film { aspect-ratio: 4 / 5; } .case__v { height: 82%; } }
.case__shot { display: grid; place-items: center; padding: clamp(20px, 5vw, 64px); border-radius: 10px; background: var(--c-grey); }
.case__shot .browser { width: min(100%, 980px); }
.case__cols { display: grid; gap: 48px; margin-top: clamp(40px, 5vw, 72px); }
.case__col { display: grid; align-content: start; justify-items: start; gap: 12px; }
.case__list { display: grid; gap: 8px; padding-left: 1.1em; font-size: .875rem; line-height: 1.5; letter-spacing: .01em; color: var(--fg-2); }
.case__list li::marker { color: var(--fg-3); font-size: .75rem; }
@media (min-width: 900px) { .case__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1024px) { .case__cols { padding-left: calc((100% + 24px) / 12); } }
/* a case with only "qué hicimos": title on the left, list on the right, so
   the row does not end half empty */
.case__col:only-child > .nb { display: none; }
@media (min-width: 900px) {
  .case__col:only-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .case__col:only-child > h3 { grid-column: 1; }
  .case__col:only-child > .case__list { grid-column: 2; grid-row: 1; }
}

/* browser frame (desarrollo web) */
.browser { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(13, 13, 13, .08); }
.browser__bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; background: #EFEFEF; color: #6E6E6E; font-size: .6875rem; }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(13, 13, 13, .18); }
.browser__bar span { margin-left: 8px; padding: 2px 10px; border-radius: 4px; background: #fff; }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* ── paquetes (Creative Engine) ────────────────────────────────────────────── */
.pk__head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.pk__head .t-s { max-width: 46ch; }
.pk__list { display: grid; }
.pk__row { display: grid; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.pk__row:last-child { border-bottom: 1px solid var(--line); }
.pk__main { display: grid; justify-items: start; gap: 10px; }
.pk__main .t-s { max-width: 52ch; }
.pk__feat { vertical-align: 4px; margin-left: 6px; }
.pk__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.pk__price { font-size: 1.5rem; letter-spacing: -.01em; font-feature-settings: "tnum" 1; }
.pk__price small { font-size: .75rem; color: var(--fg-2); margin-left: 6px; letter-spacing: .01em; }
.pk__note { margin-top: 18px; }
@media (min-width: 1024px) {
  .pk__head, .pk__list, .pk__note { margin-left: calc((100% + 24px) / 12); margin-right: calc((100% + 24px) / 12); }
  .pk__row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; column-gap: 40px; }
  .pk__side { flex-direction: column; align-items: flex-end; }
}

/* ── nota de transparencia / entregables ───────────────────────────────────── */
.note__in, .dlv__in { display: grid; gap: 20px; }
.note__in .t-quote { max-width: 36ch; }
.dlv__list { display: grid; }
.dlv__list li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.dlv__list li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .note__in, .dlv__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .note__t, .dlv__t { grid-column: 2 / 5; padding-top: 8px; }
  .note__in .t-quote, .dlv__list, .dlv__note { grid-column: 5 / 12; }
}

/* ── casos: pantalla completa ──────────────────────────────────────────────────
   The first screen of the work page is the work itself: each piece's own clip
   fills the screen under a dark scrim and the names stand big in the middle.
   Hovering a name swaps the picture; the name opens the case. The clips are 960
   px crops, light on purpose: the scrim and the upscaling hide it. */
.cxs { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--hd-h) + 12px) var(--gutter) clamp(104px, 16vh, 160px); overflow: hidden; background: #0D0D0D; color: #fff; }
.cx { display: contents; }
.cx__bg { position: absolute; inset: 0; z-index: -1; }
.cx__shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease-soft), visibility 0s .6s; }
.cx__shot.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.cx__media { position: absolute; inset: 0; }
.cx__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(10, 10, 10, .28), rgba(10, 10, 10, .62)), linear-gradient(rgba(10, 10, 10, .38), rgba(10, 10, 10, .1) 35%, rgba(10, 10, 10, .1) 60%, rgba(10, 10, 10, .72)); }
.cx__media > img, .cx__media > video { transform: scale(1.07); transition: transform 8s var(--ease-soft), opacity .6s var(--ease-soft); }
.cx__shot.is-on .cx__media > img, .cx__shot.is-on .cx__media > video { transform: none; }
.cx__list { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(0px, .5vh, 6px); margin: 0; padding: 0; text-align: center; }
.cx__name { position: relative; display: inline-block; font-family: var(--f-serif); font-size: clamp(1.75rem, min(9.2vw, 7vh), 4.75rem); line-height: 1.05; letter-spacing: -.025em; color: rgba(255, 255, 255, .46); text-shadow: 0 2px 28px rgba(0, 0, 0, .32); transition: color .3s var(--ease-soft); }
@media (min-width: 768px) { .cx__name { font-size: clamp(1.75rem, min(5.6vw, 7vh), 4.75rem); } }
.cx__name::after { content: "↗"; position: absolute; left: 100%; top: .18em; margin-left: .35em; font-family: var(--f-sans); font-size: .38em; letter-spacing: 0; opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .4s var(--ease); }
.cx__p { position: absolute; left: 100%; bottom: .42em; margin-left: .9em; font-family: var(--f-sans); font-size: max(.6875rem, .2em); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-shadow: none; }
[data-cx].is-on .cx__name, .cx__name:hover, .cx__name:focus-visible { color: #fff; }
[data-cx].is-on .cx__name::after { opacity: .9; transform: none; }
.cx__name:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 8px; border-radius: 8px; }
.cx__cap { position: absolute; z-index: 3; left: 50%; bottom: clamp(24px, 5vh, 44px); translate: -50% 0; width: min(560px, calc(100% - var(--gutter) * 2)); display: grid; justify-items: center; gap: 10px; text-align: center; color: rgba(255, 255, 255, .88); text-wrap: balance; }
.cx__cap .tags { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .cx__media > img, .cx__media > video { transform: none; transition: opacity .3s; } .cx__shot { transition-duration: .2s; } }

/* índice: mosaico con filtros */
/* the index lands flush with the top of the screen: the link scrolls with no
   offset (data-top0 in app.js) and a typed #biblioteca cancels the root's
   scroll-padding the same way */
.lib { scroll-margin-top: calc(-1 * (var(--hd-h) + 16px)); }
.lib__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { height: 30px; padding: 0 12px; border-radius: 6px; background: var(--soft); font-size: .75rem; letter-spacing: .01em; transition: background-color .2s, color .2s; }
.filters button:hover { background: var(--soft-h); }
.filters button[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); }
.lib__grid { columns: 2; column-gap: 10px; }
.lib__grid .wcard { break-inside: avoid; margin-bottom: 26px; }
.lib__grid .wcard.is-out { display: none; }
@media (min-width: 900px) { .lib__grid { columns: 4; column-gap: 12px; } }
.lib__grid .wcard__btn { border-radius: 12px; }
.lib__grid .wcard__meta { margin-top: 10px; }
.lib__grid .wcard__name { font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.01em; }

/* una idea, ocho piezas: el Land Cruiser en tres columnas (spot → cortes →
   estáticos) con una flecha entre cada una. Las tres imágenes acaban igual de
   altas sin fijar alturas: el spot y la rejilla 2 × 2 de cortes son 16:9 con
   el mismo ancho, y los estáticos se reparten su columna en proporción a su
   formato (1 : 0,8 : 0,5625), así que miden lo mismo si esa columna es
   2,3625 × 9/16 ≈ 1,33 veces más ancha. Subgrid alinea etiqueta, imagen y
   cifra de las tres columnas. */
.fan__head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.fan__copy { display: grid; gap: 14px; max-width: 46ch; }
.fan__who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-2); }
.fan__flow { display: grid; gap: 16px; }
.fan__st { display: grid; gap: 14px; align-content: start; }
.fan__lab { display: flex; align-items: center; gap: 8px; font-size: .8125rem; }
.fan__media .media, .fan__media img { border-radius: 6px; }
.fan__st--spot .media { aspect-ratio: 16 / 9; }
.fan__media--cuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fan__media--cuts .media { aspect-ratio: 16 / 9; }
.fan__media--statics { display: grid; grid-template-columns: 1fr .8fr .5625fr; gap: 6px; align-items: end; }
.fan__media--statics img { width: 100%; height: auto; }
.fan__n { display: flex; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fan__n .t-num { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.fan__to { display: grid; place-items: center; justify-self: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); }
.fan__to svg { width: 12px; height: 12px; rotate: 135deg; }
.fan__go { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 900px) {
  .fan__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }
  .fan__flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.33fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 0; }
  .fan__st { grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .fan__to { grid-row: 2; align-self: center; }
  /* every item to its own column: the arrows carry a row, and items placed
     by row go first, so left alone they would take the first two columns */
  .fan__flow > :nth-child(1) { grid-column: 1; }
  .fan__flow > :nth-child(2) { grid-column: 2; }
  .fan__flow > :nth-child(3) { grid-column: 3; }
  .fan__flow > :nth-child(4) { grid-column: 4; }
  .fan__flow > :nth-child(5) { grid-column: 5; }
  .fan__to svg { rotate: 45deg; }
}

/* cómo se juzga un anuncio: cuatro tarjetas; la barra de arriba es el
   recorrido (ver → seguir viendo → clic → resultado) con su tramo encendido */
.judge__head { display: grid; gap: 14px; max-width: 46ch; margin-bottom: clamp(40px, 5vw, 64px); }
.judge__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
@media (min-width: 1024px) { .judge__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* on a phone the four cards are a row you swipe, not a 1,400px stack */
@media (max-width: 599px) {
  .judge__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .judge__grid::-webkit-scrollbar { display: none; }
  .judge__c { scroll-snap-align: start; }
}
.judge__c {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 22px 22px 20px; border-radius: 14px; background: var(--field);
  transition: transform .6s var(--ease);
}
@media (hover: hover) { .judge__c:hover { transform: translateY(-3px); } }
.judge__bar { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 26px; }
.judge__bar i { height: 6px; border-radius: 3px; background: var(--soft); }
.judge__bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--warm);
  left: calc((var(--k) - 1) * (100% + 4px) / 4); width: calc((100% - 12px) / 4);
}
.judge__q { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--f-serif); font-size: 1rem; letter-spacing: -.01em; }
.judge__go { margin-top: clamp(32px, 4vw, 48px); }

/* ── caso (página) ─────────────────────────────────────────────────────────── */
.cs { padding-top: calc(var(--hd-h) + clamp(40px, 6vw, 96px)); }
.cs__head { display: grid; gap: 20px; margin-bottom: 32px; }
.cs__crumb a { color: inherit; }
.cs__meta { display: flex; flex-wrap: wrap; gap: 20px 56px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 760px; }
.cs__meta > div { display: grid; gap: 8px; align-content: start; }
/* the labels here are plain text: the row name above them says what they are */
.cs__meta dd { font-size: .8125rem; line-height: 1.3; }
.cs__meta .tag { display: inline; height: auto; padding: 0; border-radius: 0; background: none; font-size: .8125rem; line-height: 1.3; }
.cs__meta .tags { gap: 2px 0; }
.cs__meta .tag + .tag::before { content: "·"; margin: 0 .55em; color: var(--fg-3); }
@media (min-width: 1024px) { .cs__head { padding-left: calc((100% + 24px) / 12); } }
/* ── Toyota: dos campañas en una página ─────────────────────────────────
   Portada en blanco: el logo, una frase sobre las dos campañas, las cifras,
   y las dos campañas como tarjetas grandes con su bucle, que son también las
   pestañas. El mismo cambio vuelve como píldora flotante al pie de la
   pantalla cuando las tarjetas se pierden de vista.
   El rojo Toyota sale del propio logo (#E3001B): marca la campaña en
   pantalla y es el fondo de las secciones que separan los capítulos. */
.pg-toyota { --toyota: #E3001B; --d-gap: clamp(48px, 6vw, 88px); }
/* the red sections. Everything on them is pure white: white on this red is
   4.9:1, and any grey drops below 4.5. */
.pg-toyota [data-theme="toyota"] {
  --bg: var(--toyota); --fg: #FFFFFF; --fg-2: #FFFFFF; --fg-3: rgba(255, 255, 255, .78);
  --line: rgba(255, 255, 255, .4); --soft: rgba(255, 255, 255, .16); --soft-h: rgba(255, 255, 255, .26); --field: rgba(255, 255, 255, .18);
  --inv-bg: #FFFFFF; --inv-fg: var(--c-black);
}
.pg-toyota [data-theme="toyota"] .ph { color: #6b21a8; background: #FFFFFF; box-shadow: none; }
.sec--red { padding-block: clamp(72px, 8vw, 128px); }
.sec--red .case__cols { margin-top: 0; }
.cs--top { position: relative; z-index: 2; padding-bottom: var(--d-gap); }
/* each campaign opens on red: the title on the band, the film half on it
   and half on the white below (the stage's top half is red) */
.cs--c { padding-top: 0; }
.cs__red { padding-block: clamp(56px, 7vw, 104px) clamp(32px, 4vw, 48px); }
.cs__red .cs__head { margin-bottom: 0; }
.cs__stage { position: relative; isolation: isolate; }
.cs__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; z-index: -1; background: var(--toyota); }
.th__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.th__kind { display: inline-flex; align-items: center; gap: 10px; }
.th__grid { display: grid; gap: clamp(28px, 4vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.th__t { display: grid; justify-items: start; gap: clamp(24px, 3vw, 40px); }
.th__logo { width: clamp(230px, 42vw, 600px); height: auto; }
.th__line { max-width: 25em; }
/* the numbers: a 2 × 2 grid (figure over label) until there is room for a
   column beside the line, where each one becomes a row */
.th__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; border-top: 1px solid var(--line); }
.th__nums > div { display: grid; align-content: start; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.th__nums dt { font-size: clamp(1.375rem, 1.1rem + .9vw, 2rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-feature-settings: "tnum" 1; }
.th__nums dd { font-size: .8125rem; line-height: 1.3; color: var(--fg-2); }
@media (min-width: 1024px) {
  .th__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .th__nums { grid-template-columns: minmax(0, 1fr); }
  .th__nums > div { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; gap: 12px; }
}

/* the two campaigns: each card plays its loop; the one off screen waits in
   black and white, the one on screen carries the red bar */
.cmpsw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: clamp(40px, 5vw, 72px) 8px 0; }
@media (min-width: 900px) { .cmpsw { gap: 12px; margin-inline: 16px; } }
.cmpsw__t {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  aspect-ratio: 3 / 4; padding: 12px; border-radius: 8px; background: #111; color: #fff; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 600px) { .cmpsw__t { aspect-ratio: 16 / 10; padding: 18px; } }
@media (min-width: 1024px) { .cmpsw__t { aspect-ratio: 2 / 1; padding: 22px 24px; } }
.cmpsw__m { position: absolute; inset: 0; z-index: -2; transition: transform 1.4s var(--ease), filter .7s var(--ease-soft); }
.cmpsw__t[aria-selected="false"] .cmpsw__m { filter: grayscale(1) brightness(.7); }
@media (hover: hover) { .cmpsw__t:hover .cmpsw__m { transform: scale(1.03); filter: none; } }
.cmpsw__t::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0) 58%), linear-gradient(to bottom, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 30%);
}
.cmpsw__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--toyota); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.cmpsw__t[aria-selected="true"]::after { transform: none; }
.cmpsw__t:focus-visible { outline: 2px solid var(--toyota); outline-offset: 3px; }
.cmpsw__top, .cmpsw__bot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cmpsw__bot { align-items: flex-end; }
.cmpsw__k { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.cmpsw__dur {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: .6875rem; font-feature-settings: "tnum" 1;
  background: rgba(13, 13, 13, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cmpsw__b { display: grid; gap: 6px; min-width: 0; }
.cmpsw__n { font-size: clamp(1.25rem, .85rem + 1.7vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.cmpsw__d { font-size: .8125rem; color: rgba(255, 255, 255, .8); }
.cmpsw__s { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 30px; padding: 0 12px; border-radius: 999px; font-size: .75rem; white-space: nowrap; transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft); }
.cmpsw__t[aria-selected="true"] .cmpsw__s { background: #fff; color: var(--c-black); }
.cmpsw__t[aria-selected="true"] .cmpsw__s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--toyota); animation: rec 1.6s var(--ease-io) infinite alternate; }
.cmpsw__t[aria-selected="false"] .cmpsw__s { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
@media (hover: hover) { .cmpsw__t[aria-selected="false"]:hover .cmpsw__s { background: #fff; color: var(--c-black); box-shadow: none; } }
.cmpsw__t[aria-selected="true"] .cmpsw__off, .cmpsw__t[aria-selected="false"] .cmpsw__on { display: none; }
@keyframes rec { to { opacity: .25; } }
@media (max-width: 599px) {
  .cmpsw__d, .cmpsw__dur { display: none; }
  .cmpsw__bot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cmpsw__s { height: 26px; padding: 0 10px; font-size: .6875rem; }
}
.cmpdock {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 80;
  display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 16px; border-radius: 999px;
  background: rgba(13, 13, 13, .88); color: #fff; font-size: .8125rem; letter-spacing: .01em; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  translate: -50% calc(100% + 24px); visibility: hidden;
  transition: translate .6s var(--ease), visibility 0s .6s;
}
.cmpdock.is-on { translate: -50% 0; visibility: visible; transition-delay: 0s; }
.cmpdock__l { margin-right: 6px; color: rgba(255, 255, 255, .6); }
.cmpdock button { height: 36px; padding: 0 16px; border-radius: 999px; color: #fff; transition: background-color .25s, color .25s; }
.cmpdock button[aria-pressed="true"] { background: var(--toyota); color: #fff; font-weight: 500; }
@media (hover: hover) { .cmpdock button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .12); } }
[data-cmp][hidden] { display: none !important; }
/* the campaign that comes in rises into place */
.cmp-in { animation: cmp-in .9s var(--ease) both; }
@keyframes cmp-in { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) { .cmp-in { animation: none; } .cmpdock { transition: none; } }
.cs__film { position: relative; margin-inline: 8px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #111; }
@media (min-width: 900px) { .cs__film { margin-inline: 16px; } }
.cs__film img, .cs__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs__film video { background: #000; object-fit: contain; }
.cs__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 6px; background: #fff; color: #0D0D0D; font-size: .8125rem; transition: transform .4s var(--ease); }
.cs__play svg { width: 10px; height: 10px; }
.cs__play:hover { transform: scale(1.04); }
.cs__film.is-playing .cs__play, .cs__film.is-playing > img { display: none; }
.cs__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 8px 0; }
.cs__pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
@media (min-width: 900px) { .cs__pair { gap: 12px; margin: 12px 16px 0; } }
.cs-block__in { display: grid; gap: 18px; }
.cs-block__in + .cs-block__in { margin-top: clamp(64px, 8vw, 120px); }
.cs-block__txt { display: grid; gap: 14px; max-width: 52ch; }
.cs-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-nums > div { display: grid; gap: 10px; align-content: start; }
@media (min-width: 1024px) {
  .cs-block__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .cs-block__in > h2 { grid-column: 3 / 6; padding-top: 2px; }
  .cs-block__txt, .cs-nums { grid-column: 7 / 12; }
}
.cs-line .wrap { margin-bottom: 24px; }
.cs-line__row, .more__row { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.cs-line__row::-webkit-scrollbar, .more__row::-webkit-scrollbar { display: none; }
.cs-line__row.is-drag, .more__row.is-drag { cursor: grabbing; scroll-snap-type: none; }
.cs-line__row li { flex: none; width: min(78vw, 620px); scroll-snap-align: start; }
.cs-line__row figure { margin: 0; display: grid; gap: 10px; }
.cs-line__row .media { aspect-ratio: 16 / 9; border-radius: 8px; }
.cs-line__row figcaption { display: flex; align-items: center; gap: 8px; color: var(--fg-2); }
.statics { display: grid; gap: 12px; align-items: end; margin-top: clamp(32px, 4vw, 56px); }
.static { display: grid; gap: 10px; margin: 0; }
.static figcaption { display: flex; justify-content: space-between; gap: 8px; }
.ad { position: relative; overflow: hidden; border-radius: 8px; background: #111; color: #fff; isolation: isolate; }
.ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ad::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 40%, transparent 55%, rgba(0, 0, 0, .65)); }
.ad--sq { aspect-ratio: 1; }
.ad--45 { aspect-ratio: 4 / 5; }
.ad--story { aspect-ratio: 9 / 16; }
.ad__k { position: absolute; left: 16px; top: 14px; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; }
.ad__h { position: absolute; left: 16px; right: 16px; bottom: 58px; font-family: var(--f-serif); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.01em; }
.ad__cta { position: absolute; left: 16px; bottom: 16px; height: 28px; padding: 0 12px; border-radius: 6px; background: #fff; color: #0D0D0D; display: inline-flex; align-items: center; font-size: .6875rem; }
.ad--story .ad__cta { left: 50%; transform: translateX(-50%); bottom: 20px; }
.ad--story .ad__h { bottom: 64px; }
@media (min-width: 900px) { .statics { grid-template-columns: 1.1fr 1fr .72fr; } }
/* two finished ads (GR86): portrait 3:4 and horizontal, same height */
.static__img { width: 100%; height: auto; border-radius: 8px; }
@media (min-width: 900px) { .statics--two { grid-template-columns: 1fr 2.36fr; align-items: start; } }
.bts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: clamp(32px, 4vw, 56px); }
.bts > * { aspect-ratio: 4 / 5; }
.bts img { width: 100%; object-fit: cover; border-radius: 8px; background: var(--soft); }
.bts .bts__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .bts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .bts .bts__main { grid-column: 1 / -1; aspect-ratio: 21 / 9; } }
.more .work__head { margin-bottom: 24px; }
.more__row .wcard { flex: none; width: clamp(160px, 22vw, 260px); scroll-snap-align: start; }

/* ── sobre nosotros ────────────────────────────────────────────────────────── */
/* The hero and "Lo que somos" read as one dark surface: the light behind the
   sentence does not stop at the hero's edge but runs --ab-bleed further down,
   into the next section's top padding, and fades out there (the fade itself is
   in the shader). --sec is that padding, so the light is gone before the
   section's first line of text. */
.pg-about { --ab-bleed: calc(var(--sec) + 12vh); }
/* overflow-x only: the light layer has to be free to hang below the hero */
.ab-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow-x: clip; }
/* Behind the sentence, a field of warm light (js/v2/ab-field.js, WebGL). The
   static gradient here is what shows before it fades in and wherever WebGL is
   unavailable — the same light, just not moving, kept off the centre and away
   from the bottom edge the way the shader does it. */
.ab-hero__bg { position: absolute; inset: 0 0 calc(var(--ab-bleed) * -1) 0; z-index: -2;
  background:
    radial-gradient(34% 36% at 20% 28%, rgba(240, 74, 28, .55), rgba(240, 74, 28, 0) 75%),
    radial-gradient(30% 32% at 80% 34%, rgba(255, 116, 23, .42), rgba(255, 116, 23, 0) 75%),
    var(--c-dark); }
.ab-hero__gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.ab-hero__gl.is-on { opacity: 1; }
/* Grain over the light, at full resolution (the canvas draws at half), fading
   out over the same stretch the light does so neither one stops on an edge.
   Nothing else goes here: any translucent black laid over the field turns its
   yellow olive, which is why the darkening under the sentence and at the bottom
   is done inside the shader instead. Light specks: dark ones vanish on black. */
.ab-hero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--ab-bleed) * 1.6), transparent);
          mask-image: linear-gradient(#000 calc(100% - var(--ab-bleed) * 1.6), transparent); }
/* "Lo que somos" is see-through for exactly the stretch the light hangs into,
   and the same --c-dark as the hero below it, so there is nowhere a seam can
   show. Its text paints above the light (it comes later in the page). */
.ab-what { background: linear-gradient(transparent var(--ab-bleed), var(--bg) var(--ab-bleed)); }
.ab-hero__in { display: grid; justify-items: center; gap: 18px; text-align: center; }
.ab-hero__in h1 { max-width: 620px; }
.ab-hero__sub { max-width: 44ch; color: rgba(255, 255, 255, .78); }
.ab-hero__side { position: absolute; top: 50%; color: rgba(255, 255, 255, .7); letter-spacing: .08em; text-transform: uppercase; font-size: .625rem; display: none; }
.ab-hero__side--l { left: var(--gutter); }
.ab-hero__side--r { right: var(--gutter); }
@media (min-width: 1024px) { .ab-hero__side { display: block; } }
.ab-what__in { display: grid; gap: 22px; }
.ab-what__in .t-quote { max-width: 34ch; }
.ab-prin { display: grid; gap: 28px; margin-top: clamp(80px, 10vw, 160px); }
.ab-prin__list { display: grid; gap: 4px; }
.ab-prin__list li { display: grid; gap: 4px; padding: 12px 0; }
.ab-prin__n { font-family: var(--f-serif); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.2; color: #8A8A8A; transition: color .3s; }
.ab-prin__list li:hover .ab-prin__n { color: #fff; }
@media (min-width: 1024px) {
  .ab-what__in, .ab-prin { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .ab-what__in h2, .ab-prin__t { grid-column: 2 / 6; padding-top: 6px; }
  .ab-what__in .t-quote, .ab-prin__list { grid-column: 6 / 12; }
  .ab-prin__list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; column-gap: 24px; }
}

/* the brand wall (js/v2/brands.js draws it): black tiles, white marks, the
   brand gradient on the one under the pointer. Until then, and without
   WebGL, the list is a plain grid of the same tiles. */
.brw { scroll-margin-top: calc(-1 * (var(--hd-h) + 16px)); position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; }
.brw__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; padding: calc(var(--hd-h) + 24px) 6px 150px; }
.brw__it { display: grid; place-content: center; gap: 8px; aspect-ratio: 4 / 3; padding: 18px; text-align: center; background: #121212; transition: background .35s var(--ease-soft), color .35s var(--ease-soft); }
.brw__n { font-family: var(--f-serif); font-size: 1.25rem; line-height: 1.15; letter-spacing: -.01em; }
.brw__d { font-size: .75rem; line-height: 1.4; color: rgba(255, 255, 255, .55); transition: color .35s var(--ease-soft); }
@media (hover: hover) {
  .brw__it:hover { background: var(--warm); color: #0D0D0D; }
  .brw__it:hover .brw__d { color: rgba(13, 13, 13, .75); }
}
/* with scripting the wall keeps its final height from the start, so nothing
   below jumps when the canvas takes over; .no-gl hands it back to the list */
.js .brw:not(.no-gl) { height: 100vh; height: 100svh; min-height: 560px; max-height: 1080px; }
.js .brw:not(.no-gl) .brw__list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brw__gl { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; max-width: none; cursor: grab; touch-action: pan-y; user-select: none; }
.brw.is-drag .brw__gl { cursor: grabbing; }
/* the wall comes out of the section above through a long fade, so no row of
   marks is cut by a hard edge */
.brw.is-gl::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 0; height: clamp(160px, 30%, 320px); background: linear-gradient(var(--c-dark), rgba(16, 16, 16, .85) 25%, rgba(16, 16, 16, .4) 60%, rgba(16, 16, 16, 0)); pointer-events: none; }
/* the bar along the bottom: the title, the tile being pointed at, the hint */
.brw__bar {
  position: absolute; inset: auto 0 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 24px;
  padding: 90px var(--gutter) clamp(18px, 2.4vw, 28px); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .82) 70%); pointer-events: none;
}
.brw__t { font-family: var(--f-sans); font-weight: 500; font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.1; letter-spacing: -.01em; }
.brw__info { grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 1.6em; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .7); opacity: 0; translate: 0 6px; transition: opacity .25s var(--ease-soft), translate .25s var(--ease-soft); }
.brw__info.is-on { opacity: 1; translate: 0 0; }
.brw__in { font-family: var(--f-serif); font-size: 1.0625rem; color: #fff; }
.brw__hint { display: none; }
.brw.is-gl .brw__hint { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .8); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.brw__hint i { position: relative; width: clamp(48px, 6vw, 84px); height: 1px; background: rgba(255, 255, 255, .45); }
.brw__hint i::after { content: ""; position: absolute; top: -2px; left: calc(var(--p, 0) * (100% - 5px)); width: 5px; height: 5px; background: #fff; }
@media (max-width: 599px) {
  .brw__bar { grid-template-columns: minmax(0, 1fr); }
  .brw.is-gl .brw__hint { grid-column: 1; grid-row: 3; }
}
/* what we did, in the list: read out, not shown on the fallback tiles */
.brw__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the panel a tile opens (as on PSP): it slides in over the right half (all
   of it on a phone) on a soft grey, with the mark big in the middle between
   four corner ticks, and what we did, how long and what came of it below */
.brw__pn {
  position: absolute; inset: 0 0 0 auto; z-index: 3; display: none; grid-template-rows: auto auto minmax(0, 1fr) auto; width: 50%;
  padding: calc(var(--hd-h) + 10px) clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 32px); color: #fff;
  background: radial-gradient(55% 45% at 72% 30%, rgba(255, 255, 255, .2), transparent 70%), radial-gradient(60% 55% at 25% 85%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(160deg, #4a4a4a, #2b2b2b);
  translate: 101% 0; transition: translate .75s var(--ease), visibility 0s linear .75s; visibility: hidden;
}
.brw.is-gl .brw__pn { display: grid; }
.brw.is-open .brw__pn { translate: 0 0; visibility: visible; transition: translate .75s var(--ease), visibility 0s; }
@media (max-width: 899px) { .brw__pn { width: 100%; } }
.brw__back { justify-self: start; padding: 4px 0; color: #fff; letter-spacing: .02em; }
.brw__back::before { content: "← "; }
.brw__back:hover { opacity: .7; }
.brw__ph { margin-top: clamp(28px, 6vh, 64px); font-family: var(--f-sans); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; }
.brw__stage { position: relative; display: grid; place-items: center; min-height: 140px; margin-block: clamp(20px, 4vh, 40px); }
.brw__stage i { position: absolute; width: 6px; height: 6px; background: #fff; }
.brw__stage i:nth-child(1) { top: 0; left: 0; } .brw__stage i:nth-child(2) { top: 0; right: 0; }
.brw__stage i:nth-child(3) { bottom: 0; left: 0; } .brw__stage i:nth-child(4) { bottom: 0; right: 0; }
/* every mark in white, whatever colour its file is */
.brw__plogo { max-width: min(62%, 420px); max-height: 46%; object-fit: contain; filter: brightness(0) invert(1); }
.brw__pname { font-family: var(--f-serif); font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; text-align: center; }
.brw__pfoot { display: grid; gap: 18px; }
.brw__pdid { max-width: 34ch; font-family: var(--f-sans); font-weight: 500; font-size: clamp(1.0625rem, .9rem + .6vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: pretty; }
.brw__pmeta { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: .875rem; }
.brw__pmeta dt { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.brw__pmeta [hidden] { display: none; }
.brw__pcase { justify-self: start; }
/* the panel's contents come in a beat after it */
.brw__pn > * { opacity: 0; translate: 0 10px; transition: opacity .4s var(--ease-soft), translate .4s var(--ease-soft); }
.brw.is-open .brw__pn > * { opacity: 1; translate: 0 0; transition-delay: .35s; }
.brw.is-open .brw__pn > :nth-child(3) { transition-delay: .45s; }
.brw.is-open .brw__pn > :nth-child(4) { transition-delay: .55s; }
@media (min-width: 900px) { .brw.is-open .brw__bar { right: 50%; } .brw.is-open .brw__hint { opacity: 0; } }

/* lo que pensamos: el título se queda fijo a la izquierda mientras las tres
   ideas pasan a la derecha, cada una en su franja */
.pov__in { display: grid; gap: 40px; }
.pov__head { display: grid; gap: 14px; align-content: start; max-width: 34ch; }
.pov__list { display: grid; }
.pov__list li { display: grid; gap: 14px; padding: clamp(28px, 3.5vw, 48px) 0; border-top: 1px solid var(--line); }
.pov__list li:last-child { border-bottom: 1px solid var(--line); }
.pov__n { font-size: .75rem; letter-spacing: .06em; font-feature-settings: "tnum" 1; }
.pov__h { font-family: var(--f-serif); font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.375rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.pov__list .t-s { max-width: 52ch; }
@media (min-width: 1024px) {
  .pov__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .pov__head { grid-column: 2 / 5; position: sticky; top: calc(var(--hd-h) + 48px); align-self: start; }
  .pov__list { grid-column: 6 / 12; }
  .pov__list li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .pov__list li > :not(.pov__n) { grid-column: 2; }
  .pov__n { grid-row: 1; padding-top: .95em; }
}

/* ── contacto ──────────────────────────────────────────────────────────────── */
.ct { position: relative; padding-top: calc(var(--hd-h) + clamp(48px, 7vw, 110px)); padding-bottom: var(--sec); overflow: clip; }
.ct__grid { position: relative; display: grid; gap: 56px; }
.ct__side { display: grid; align-content: start; gap: 22px; max-width: 460px; }
.ct__block { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ct__steps { display: grid; gap: 10px; }
.ct__steps li { display: flex; align-items: flex-start; gap: 12px; }
.ct__steps .nb { margin-top: 1px; flex: none; }
.ct__social { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ct__social svg { width: 8px; height: 8px; }
@media (min-width: 1024px) {
  .ct__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .ct__side { grid-column: 1 / 6; position: sticky; top: calc(var(--hd-h) + 40px); }
  .ct__form { grid-column: 7 / 13; }
}

/* para quién somos, y para quién no: dos tarjetas (negra: sí · gris: no).
   Cada una lleva su propio tema, así que líneas y marcadores se adaptan solos. */
.fit__in { display: grid; gap: clamp(36px, 5vw, 56px); }
.fit__head { display: grid; gap: 14px; max-width: 46ch; }
.fit__cols { display: grid; gap: 12px; }
@media (min-width: 768px) { .fit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit__col { display: grid; align-content: start; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 14px; }
.fit__h { font-family: var(--f-serif); font-size: clamp(1.375rem, 1.1rem + .75vw, 1.75rem); line-height: 1.25; letter-spacing: -.02em; }
.fit__list { display: grid; }
.fit__list li { position: relative; padding: 14px 0 14px 32px; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.45; letter-spacing: .01em; }
.fit__list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 19px; height: 19px; border-radius: 50%; }
.fit__col--yes li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' fill='none' stroke='%230D0D0D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat, var(--warm);
}
.fit__col--no li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3L3 7' fill='none' stroke='%230D0D0D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 9px no-repeat, rgba(13, 13, 13, .09);
}
.fit__col--no .fit__list li { color: var(--fg-2); }

/* ── 404 ───────────────────────────────────────────────────────────────────── */
/* one dark screen: the orb, the line, the way back */
.nf { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding-block: calc(var(--hd-h) + 48px) 72px; overflow: clip; }
.nf__glow { position: absolute; left: 0; right: 0; top: 0; height: 60vh; z-index: -1; pointer-events: none; opacity: .85; background: var(--glow); }
.nf__in { display: grid; justify-items: center; gap: 16px; text-align: center; }
.nf__orb { width: clamp(140px, 18vw, 220px); margin-bottom: 12px; color: var(--fg-2); }
.nf__code { letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.nf__sub { max-width: 40ch; }
.nf__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 28px; color: var(--fg-2); }

/* ── legales ───────────────────────────────────────────────────────────────── */
.lg-hero { padding-top: calc(var(--hd-h) + clamp(48px, 7vw, 110px)); }
.lg-hero__in { display: grid; justify-items: start; gap: 14px; }
.lg-hero__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bs.is-on { background: var(--inv-bg); color: var(--inv-fg); }
.legal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.legal__toc { display: none; }
.prose { max-width: 68ch; font-size: .9375rem; line-height: 1.65; letter-spacing: .01em; color: var(--fg-2); }
.prose h2 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.3; letter-spacing: -.015em; color: var(--fg); margin: 2.2em 0 .6em; scroll-margin-top: calc(var(--hd-h) + 24px); }
.prose h3 { font-size: 1rem; color: var(--fg); margin: 1.8em 0 .5em; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.prose strong, .prose b { color: var(--fg); font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; font-size: .875rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--fg); font-weight: 500; }
.prose .legal-address { padding: 14px 16px; border-radius: 8px; background: var(--c-grey); color: var(--fg); font-size: .875rem; }
.prose .legal-label { margin-bottom: .3em; }
.prose .legal-sub { font-weight: 500; }
.prose .legal-cta { margin-top: 2.5em; padding: 24px; border-radius: 10px; background: var(--c-black); color: #fff; }
.prose .legal-cta h3 { color: #fff; margin-top: 0; }
.prose .legal-cta p { color: rgba(255, 255, 255, .72); }
.prose .legal-cta a { color: #fff; font-size: 1.25rem; text-decoration: none; }
@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .legal__toc { grid-column: 1 / 4; display: grid; gap: 4px; align-content: start; position: sticky; top: calc(var(--hd-h) + 32px); align-self: start; max-height: calc(100vh - var(--hd-h) - 64px); overflow: auto; font-size: .8125rem; }
  .legal__toc > span { margin-bottom: 8px; }
  .legal__toc a { color: var(--fg-3); padding: 3px 0; transition: color .2s; }
  .legal__toc a:hover, .legal__toc a.is-on { color: var(--fg); }
  .prose { grid-column: 5 / 12; }
}

/* ── Vicio: motion 9:16 y anuncios estáticos ──────────────────────────────────
   The brand's own world: the orange of the logo (#FF3301) with a comic
   halftone on it, the cream of its cup as paper, and its drawings (box,
   burger, fries, soda) stuck around the edges of the sections like die-cut
   stickers — white outline, a shadow, a slight turn. They slap on when they
   come into view, drift a little with the scroll and wobble under the
   pointer; they sit on the borders, never over the text.
   Black text on this orange is 5.2:1 (white does not reach 4). */
.pg-vicio { --vicio: #FF3301; --cream: #F6EFE4; --halftone: radial-gradient(rgba(13, 13, 13, .11) 1.2px, transparent 1.7px) 0 0 / 15px 15px; }
.pg-vicio [data-theme="vicio"] {
  --bg: var(--vicio); --fg: #0D0D0D; --fg-2: #0D0D0D; --fg-3: rgba(13, 13, 13, .78);
  --line: rgba(13, 13, 13, .28); --soft: rgba(255, 255, 255, .22); --soft-h: rgba(255, 255, 255, .34); --field: rgba(255, 255, 255, .24);
  --inv-bg: #0D0D0D; --inv-fg: #FFFFFF;
}
.pg-vicio [data-theme="vicio"] .ph-box { color: #6b21a8; background: #FFFFFF; border-color: rgba(107, 33, 168, .5); }
/* the cream sections: the hero and the breakdown */
.pg-vicio .vc, .pg-vicio .vbd { --bg: var(--cream); --line: rgba(13, 13, 13, .14); --field: #EDE3D4; }

/* stickers */
.stk {
  position: absolute; z-index: 3; height: auto; rotate: var(--r, 0deg); user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 16px 18px rgba(13, 13, 13, .28));
  transition: scale .55s cubic-bezier(.34, 1.56, .64, 1), rotate .55s cubic-bezier(.34, 1.56, .64, 1);
}
.stk:hover { scale: 1.07; rotate: calc(var(--r, 0deg) * -.5); }
.js .stk[data-rv] {
  transform: scale(.35);
  transition: opacity .35s var(--ease-soft), transform .9s cubic-bezier(.34, 1.56, .64, 1), scale .55s cubic-bezier(.34, 1.56, .64, 1), rotate .55s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
}
.js .stk[data-rv].is-in { transform: none; }
@keyframes stk-drift { from { translate: 0 36px; } to { translate: 0 -36px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .stk { animation: stk-drift linear both; animation-timeline: view(); } }
}

/* hero */
.vc { padding-bottom: clamp(64px, 8vw, 112px); }
.vc__grid { display: grid; gap: clamp(40px, 5vw, 56px); margin-top: clamp(32px, 4vw, 56px); }
.vc__txt { display: grid; align-content: start; gap: clamp(28px, 4vw, 48px); }
.vc__t { display: grid; justify-items: start; gap: clamp(24px, 3vw, 40px); }
.vc__logo { width: clamp(200px, 36vw, 440px); height: auto; }
.vc__line { max-width: 20em; }
.vc__stage { position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--halftone), var(--vicio); }
.vc__phone { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 0 0 5px #0D0D0D, 0 34px 60px -26px rgba(0, 0, 0, .55); }
.vc__phone .media { position: absolute; inset: 0; }
.stk--soda { top: 12%; right: clamp(-36px, -2.5vw, -10px); width: clamp(72px, 8.5vw, 124px); }
.stk--burger { bottom: clamp(-58px, -4vw, -26px); left: clamp(-64px, -4.5vw, -12px); width: clamp(128px, 15vw, 232px); }
@media (min-width: 1024px) {
  .vc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .vc__phone { width: min(100%, 300px); }
}

/* the ads' own lines, running between the hero and the ads */
.vmq { overflow: hidden; padding-block: clamp(16px, 2vw, 24px); background: #0D0D0D; color: var(--cream); }
.vmq__track { display: flex; width: max-content; animation: vmq 42s linear infinite; }
.vmq__run { display: flex; flex: none; align-items: center; gap: clamp(20px, 3vw, 36px); padding-right: clamp(20px, 3vw, 36px); font-family: var(--f-serif); font-size: clamp(1.375rem, 1rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; white-space: nowrap; }
.vmq__run i { flex: none; width: .42em; height: .42em; border-radius: 50%; background: var(--vicio); }
@keyframes vmq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vmq__track { animation: none; } }

/* the ads: on the orange with its halftone, each one turned a touch, as if
   pinned up; the one under the pointer straightens and comes forward */
.pg-vicio .vst { position: relative; background-image: var(--halftone); }
.stk--fries { top: clamp(-96px, -7vw, -56px); right: clamp(20px, 7vw, 120px); width: clamp(76px, 8vw, 128px); }
.vst__head { display: grid; gap: 14px; max-width: 46ch; margin-bottom: clamp(40px, 5vw, 64px); }
.vst__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
/* an odd last row sits in the middle: two photos centred under three, a single one centred on its own */
@media (max-width: 899px) { .vst__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); } }
@media (min-width: 900px) {
  .vst__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: clamp(28px, 3vw, 44px); }
  .vst__grid > * { grid-column: span 2; }
  .vst__grid > :nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  .vst__grid > :nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
}
/* each ad comes wrapped like a burger in its paper: the paper (crumpled,
   with VICIO in outline) tears off in stepped, low-frame-rate jumps, about
   7 a frame-per-second, the way stop-motion does it. Without scripting or with
   reduced motion there is no paper. */
.static--sq {
  position: relative; border-radius: 10px; rotate: -1.4deg; box-shadow: 0 26px 44px -26px rgba(13, 13, 13, .55);
  transition: rotate .6s cubic-bezier(.34, 1.56, .64, 1), scale .6s var(--ease), box-shadow .6s var(--ease);
}
.static--sq .static__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: rgba(255, 255, 255, .24); }
.vst__grid > :nth-child(3n + 2) .static--sq { rotate: 1.1deg; }
.vst__grid > :nth-child(3n) .static--sq { rotate: -.6deg; }
@media (hover: hover) { .static--sq:hover { rotate: 0deg; scale: 1.03; box-shadow: 0 40px 60px -28px rgba(13, 13, 13, .6); } }
.wrp { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .wrp { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; border-radius: 10px; pointer-events: none; container-type: size; }
  .wrp__p {
    position: absolute; inset: -9%; display: grid; place-items: center; overflow: hidden;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .017' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeDiffuseLighting surfaceScale='5' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='235' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 120% 120%, radial-gradient(ellipse at 30% 25%, #fff, #ecebe8 70%, #dcdad5);
    background-blend-mode: multiply, normal; box-shadow: inset 0 0 40px rgba(0, 0, 0, .12);
  }
  .wrp__t { display: grid; gap: 1.5cqw; width: 190%; rotate: -24deg; font-family: var(--f-serif); font-weight: 700; line-height: .86; white-space: nowrap; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(13, 13, 13, .8); text-transform: uppercase; }
  .wrp__t b { display: block; font-weight: inherit; }
  .wrp__t .l { font-size: 22cqw; letter-spacing: -.01em; }
  .wrp__t .s { font-size: 7cqw; letter-spacing: .02em; }
  .vst__grid > li.is-in .wrp__p { animation: unwrap 1.15s linear calc(.45s + var(--i, 0) * .18s) both; }
}
@keyframes unwrap {
  0%   { translate: 0 0;      rotate: 0deg;  background-position: 0 0, 0 0;      animation-timing-function: steps(1, end); }
  10%  { translate: 1% -2%;   rotate: -1.5deg; background-position: 30px 12px, 0 0; animation-timing-function: steps(1, end); }
  22%  { translate: 3% -7%;   rotate: 2.5deg; background-position: -20px 40px, 0 0; animation-timing-function: steps(1, end); }
  35%  { translate: -2% -17%; rotate: -3.5deg; background-position: 50px -10px, 0 0; animation-timing-function: steps(1, end); }
  48%  { translate: 4% -33%;  rotate: 5deg;  background-position: -40px 20px, 0 0; animation-timing-function: steps(1, end); }
  62%  { translate: -3% -55%; rotate: -6deg; background-position: 10px 60px, 0 0; animation-timing-function: steps(1, end); }
  78%  { translate: 3% -85%;  rotate: 8deg;  background-position: -30px 30px, 0 0; animation-timing-function: steps(1, end); }
  100% { translate: 0 -130%;  rotate: 11deg; background-position: 0 0, 0 0; }
}
.static__ph { aspect-ratio: 1; border-radius: 10px; }

/* the breakdown, back on cream, with the box stuck over the edge */
.pg-vicio .vbd { position: relative; }
.stk--box { top: clamp(-104px, -7.5vw, -60px); left: clamp(12px, 6vw, 110px); width: clamp(132px, 15vw, 230px); }
.pg-vicio .vbd .nb { background: var(--vicio); border-color: var(--vicio); color: #0D0D0D; }