/* KASH · Presskit web · piloto (portada, música, el show)
   Manda: FICHA_WEB_PILOTO.md y DIRECCION_ARTE.md §0. Solo HTML + CSS: cero JavaScript.
   Los estados del reproductor se pintan desde los atributos data-kp-* que escribe el WASM.
   Índice: 1 fuentes · 2 tokens · 3 base · 4 piezas de collage · 11 show · 12 cierre · 13 movimiento · 14 escritorio.
   Las secciones 5 a 10 (cabecera, portada, música, reproductor, biblioteca, escucha) se rehicieron el 13-nov en la
   noche y viven en css/portada-musica.css, que se carga después de este archivo. */

/* ---------- 1. Fuentes (autoalojadas, OFL) ---------- */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../fonts/ArchivoExpanded-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens ---------- */
:root {
  /* color */
  --negro: #0A0A0A;
  --negro-2: #131210;
  --negro-3: #1C1A17;
  --blanco: #F7F3EA;
  --blanco-puro: #FFFFFF;
  --crema: #EDE6D6;
  --carton: #BDB8AE;
  --tinta: #0A0A0A;
  --tinta-suave: #3A3833;
  --oro: #C9A24B;
  --oro-claro: #E0BE6E;
  --gris: #A29D93;
  --turquesa: #17746E;       /* el único turquesa de la página: bloques, etiquetas y cinta, siempre con texto claro */
  --cobre: #C98C70;          /* cobre del traje en vivo: papeles con tinta */
  --halo-1: rgba(230, 120, 44, .84);
  --halo-2: rgba(206, 132, 60, .40);
  --halo-3: rgba(201, 162, 75, 0);
  --velo-alto: rgba(10, 10, 10, .80);
  --velo-medio: rgba(10, 10, 10, .34);
  --velo-bajo: rgba(10, 10, 10, .92);
  --sombra-dura: rgba(0, 0, 0, .55);
  --sombra-suave: rgba(0, 0, 0, .38);
  --sombra-honda: rgba(0, 0, 0, .85);
  --linea: rgba(247, 243, 234, .16);
  --linea-fuerte: rgba(247, 243, 234, .34);
  --linea-tinta: rgba(10, 10, 10, .78);
  --luz-borde: rgba(255, 255, 255, .10);
  --oro-velo: rgba(201, 162, 75, .14);
  --oro-velo-2: rgba(201, 162, 75, .32);
  --app-1: #4D3B1F;
  --app-2: #2A2116;
  --app-3: #15130F;
  --app-4: #0D0C0B;
  --pista-riel: rgba(247, 243, 234, .20);

  /* tipografía */
  --f-ancha: "Archivo Expanded", "Archivo", "Arial Black", sans-serif;
  --f-titular: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* medida */
  --margen: 20px;
  --ancho: 1240px;

  /* movimiento */
  --entra: cubic-bezier(.16, 1, .3, 1);
  --asienta: cubic-bezier(.34, 1.56, .64, 1);
  --mueve: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0; overflow-x: clip;
  background: var(--negro); color: var(--blanco);
  font: 400 17px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* grano sobre toda la página (textura real, sin blend-mode) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: url("../img/grano.webp") 0 0 / 256px 256px; opacity: .2;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; }
img, video { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 3px; }
.salto {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px;
  background: var(--crema); color: var(--tinta); font: 600 16px/1 var(--f-texto);
}
.salto:focus { top: 12px; }

/* ---------- 4. Piezas de collage ---------- */
/* cinta de enmascarar (textura real) */
.cinta {
  position: absolute; z-index: 3; width: 96px; aspect-ratio: 260 / 90; pointer-events: none;
  background: url("../img/cinta_1.webp") center / 100% 100% no-repeat;
}
.cinta--a { top: -17px; left: 50%; translate: -50% 0; rotate: -4deg; }
.cinta--b { top: -15px; right: 10%; rotate: 4deg; background-image: url("../img/cinta_2.webp"); }

/* tarjeta de cartón gris, borde cortado a mano */
.tarjeta {
  position: relative; isolation: isolate; padding: 26px 20px 20px; color: var(--tinta);
  filter: drop-shadow(3px 4px 0 var(--sombra-dura)) drop-shadow(0 12px 14px var(--sombra-suave));
}
/* borde cortado a mano con clip-path (sin filtros SVG: funciona igual en el navegador de WhatsApp en iPhone) */
.tarjeta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--carton) url("../img/papel_tarjeta.webp") center / 450px 450px;
  clip-path: polygon(.5% 1.6%, 9% .5%, 21% 1.5%, 36% .3%, 52% 1.3%, 68% .2%, 83% 1.2%, 99.3% .6%, 99.8% 15%, 99% 33%, 99.7% 54%, 99.1% 76%, 99.6% 98.3%, 86% 99.5%, 70% 98.5%, 53% 99.7%, 35% 98.7%, 18% 99.6%, .4% 98.8%, 1% 79%, .2% 57%, .9% 36%, .3% 16%);
}
.tarjeta__lema { font: 900 clamp(21px, 5.9vw, 30px)/1.02 var(--f-titular); letter-spacing: -.01em; word-spacing: .08em; text-wrap: balance; }
.tarjeta__mono { margin-top: 12px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.tarjeta__rotulo { font: 900 15px/1.1 var(--f-ancha); letter-spacing: .01em; }

/* etiqueta y nota de papel crema */
.etiqueta, .nota {
  position: relative; isolation: isolate; color: var(--tinta);
  filter: drop-shadow(2px 3px 0 var(--sombra-dura)) drop-shadow(0 8px 10px var(--sombra-suave));
}
.etiqueta::before, .nota::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--crema) url("../img/papel_tarjeta.webp") center / 450px 450px; background-blend-mode: soft-light;
  clip-path: polygon(.3% 2.4%, 14% .6%, 31% 2%, 49% .4%, 67% 1.8%, 85% .3%, 99.6% 1.6%, 99.1% 24%, 99.8% 50%, 99.2% 77%, 99.7% 97.6%, 82% 99.5%, 63% 98.2%, 45% 99.6%, 26% 98.4%, 8% 99.4%, .5% 97.8%, .9% 70%, .2% 44%, .8% 20%);
}
.etiqueta { display: inline-block; padding: 12px 16px 10px; font: 500 13px/1.2 var(--f-mono); letter-spacing: .08em; }
.nota { padding: 22px 18px 16px; }
.nota__rotulo { font: 900 14px/1.1 var(--f-ancha); margin-bottom: 8px; }
.nota p { font: 600 16px/1.35 var(--f-texto); }

/* foto pegada: copia en papel con margen blanco */
.foto {
  position: relative; padding: 7px 7px 9px; background: var(--blanco);
  filter: drop-shadow(3px 4px 0 var(--sombra-dura)) drop-shadow(0 14px 18px var(--sombra-suave));
}
.foto img, .foto video { width: 100%; object-fit: cover; background-color: var(--negro-3); }

/* pegatina negra con el logo en oro */
.pegatina {
  position: relative; aspect-ratio: 1; background: var(--negro);
  box-shadow: 0 0 0 1px var(--luz-borde) inset;
  filter: drop-shadow(3px 4px 0 var(--sombra-dura)) drop-shadow(0 12px 16px var(--sombra-suave));
}
.pegatina__video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }

/* tiras de papel rasgado (enlosables a lo ancho) */
.rasgado { height: clamp(46px, 8.6vw, 104px); background: repeat-x 50% 100% / auto 100%; position: relative; z-index: 2; }
.rasgado--abajo { background-image: url("../img/papel_rasgado_abajo.webp"); margin-bottom: -1px; }
.rasgado--arriba { background-image: url("../img/papel_rasgado_arriba.webp"); margin-top: -1px; background-position: 30% 0; }

/* sello redondo: emblema real de KASH con texto en anillo (pieza pequeña pegada sobre las tarjetas) */
.sello {
  position: absolute; z-index: 4; right: -12px; bottom: -28px; width: 88px; aspect-ratio: 1; rotate: -4deg;
  display: grid; place-items: center; border-radius: 50%; background: var(--negro);
  box-shadow: 2px 3px 0 var(--sombra-dura);
}
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sello text { font: 500 10.4px var(--f-mono); fill: var(--blanco); }
.sello img { width: 46%; height: auto; }

/* rótulos y marcador de pendiente */
.rotulo { font: 500 13px/1.2 var(--f-mono); letter-spacing: .1em; color: var(--oro-claro); }
.capsula {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px;
  border: 1.5px solid var(--oro); border-radius: 999px; color: var(--oro-claro);
  font: 500 12px/1.1 var(--f-mono); letter-spacing: .08em;
}

/* ---------- 11. El show ---------- */
.show {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; align-items: start;
  padding: 34px var(--margen) 64px;
}
.show__titulo {
  grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1;
  font: 900 13.3vw/.86 var(--f-titular); letter-spacing: -.035em; word-spacing: .04em; color: var(--blanco);
  overflow-wrap: break-word; min-width: 0;
}
.show__linea { display: block; white-space: nowrap; }
.show__live { color: var(--oro); }
/* ESCENA: la figura recortada es el eje. Va sobre el pie del titular (el titular pasa por detrás),
   con halo cálido detrás de la cabeza; las boletas se pegan a su lado y el bloque turquesa le sirve de piso.
   (El antiguo .show__bloque suelto se quitó del HTML: el turquesa ahora es el fondo de .show__intro.) */
.show__figura { grid-column: 3 / -1; grid-row: 2; position: relative; margin: -9.5vw -30px 0 -46px; pointer-events: none; }
.show__figura img { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 18px 24px var(--sombra-suave)); }
.show__halo {
  position: absolute; z-index: 0; left: 58%; top: 14%; width: 124%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-1) 0%, var(--halo-1) 22%, var(--halo-2) 54%, var(--halo-3) 100%);
}

/* GRUPO A (móvil): el video va ARRIBA y completo; la foto de tarima baja y se mete por detrás de su margen blanco;
   la tarjeta de configuración muerde solo el pie de la foto. Nada tapa el video ni sus controles. */
.show__foto--2 { grid-column: 1 / -1; grid-row: 5; z-index: 2; margin: -28px -4px 0 26px; rotate: -2deg; }
.show__foto--2 img { aspect-ratio: 4 / 3; }
.show__foto--2 .cinta { left: 66%; }
/* video (fuente de 360p): tamaño contenido, margen ancho de copia en papel, cinta, trama y bordes oscurecidos */
.show__video {
  position: relative; /* (ya lo trae .foto; se repite porque el ::after de la trama se ancla aquí) */
  grid-column: 1 / -1; grid-row: 4; z-index: 3; justify-self: start; width: min(76vw, 300px);
  margin: 60px 0 0 -4px; padding: 10px 10px 36px; rotate: 3deg;
}
.show__video video { aspect-ratio: 16 / 9; }
.show__video::after {
  content: ""; position: absolute; inset: 10px 10px 36px; pointer-events: none;
  background:
    /* más suave que antes: la trama y la viñeta oscurecían la cara de Kash en el póster */
    radial-gradient(ellipse at center, transparent 70%, rgb(0 0 0 / .45) 100%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 1px, transparent 1px 4px),
    url("../img/grano.webp") 0 0 / 180px 180px;
}
.show__video .cinta--a { left: 62%; width: 84px; }
.show__video .cinta--b { top: auto; bottom: 30px; right: auto; left: -30px; rotate: -52deg; width: 76px; }
/* con el reproductor activo el bucle arranca solo: los controles nativos (respaldo sin WASM) sobran */
[data-kp-player][data-kp-ready] ~ .show [data-kp-autoplay]::-webkit-media-controls { display: none !important; }

/* GRUPO B: foto del traje cobre entera (sin cortar ni tapar a la mitad) + bloque dorado + nota de producción */
.show__foto--1 { grid-column: 1 / 5; grid-row: 8; z-index: 1; margin: 52px 0 0; rotate: -3deg; }
.show__foto--1 img { aspect-ratio: 3 / 4; }
.show__foto--1 .cinta { right: 22%; }

/* piso de la escena: bloque turquesa a sangre con el subtítulo y el texto; tapa el borde fundido de la figura */
.show__intro {
  grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 3;
  margin: -46px calc(var(--margen) * -1) 0; padding: 30px var(--margen) 34px; background: var(--turquesa);
}
.show__sub { font: 900 clamp(22px, 6.4vw, 34px)/1.04 var(--f-ancha); letter-spacing: -.01em; color: var(--blanco); text-wrap: balance; }
.show__texto { margin-top: 14px; max-width: 34em; color: var(--blanco); }

/* boletas en columna, pegadas al costado de la figura y montando sobre su brazo */
.formatos { grid-column: 1 / 4; grid-row: 2; position: relative; z-index: 3; margin-top: 10px; }
.boletas { display: grid; grid-template-columns: 120px; margin-top: 10px; }
.boleta + .boleta { margin-top: -5px; }
/* boleta: papel con muescas y línea perforada */
.boleta {
  position: relative; isolation: isolate; color: var(--tinta); padding: 10px 8px 9px; text-align: center;
  filter: drop-shadow(3px 4px 0 var(--sombra-dura)) drop-shadow(0 10px 12px var(--sombra-suave));
}
.boleta:nth-child(1) { rotate: -3deg; }
.boleta:nth-child(2) { rotate: 2deg; translate: 22px 0; z-index: 1; }
.boleta:nth-child(3) { rotate: -2deg; translate: 4px 0; }
.boleta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--crema) url("../img/papel_tarjeta.webp") center / 450px 450px; background-blend-mode: soft-light;
  -webkit-mask: radial-gradient(circle 8px at 0 66%, transparent 97%, var(--negro)) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 66%, transparent 97%, var(--negro)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 8px at 0 66%, transparent 97%, var(--negro)) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 66%, transparent 97%, var(--negro)) right / 51% 100% no-repeat;
}
/* menos tonos en El show: 10 y 20 MIN en papel crema; solo 30 MIN (FULL SHOW) en dorado claro.
   Sin «multiply»: la textura no oscurece el fondo y la tinta queda > 7:1. El cobre queda solo en la nota de producción. */
/* boleta FULL SHOW: dorado liso, el mismo del bloque «30 MIN», idéntico en móvil y escritorio (tinta 8,3:1) */
.boleta:nth-child(3)::before { background: var(--oro); }
.boleta__min { font: 500 12px/1 var(--f-mono); letter-spacing: .1em; padding-bottom: 9px; border-bottom: 2px dashed var(--linea-tinta); margin: 0 6px; }
.boleta__num { display: block; margin-bottom: 3px; font: 900 clamp(36px, 11.4vw, 76px)/.9 var(--f-ancha); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.boleta__nombre { margin-top: 8px; font: 900 clamp(12px, 3.5vw, 16px)/1.1 var(--f-titular); letter-spacing: .01em; }

/* cinta de palabras: franja turquesa inclinada que cruza la sección de lado a lado */
.show__banda {
  grid-column: 1 / -1; grid-row: 7; position: relative; z-index: 5; overflow: clip;
  margin: 40px calc(var(--margen) * -1 - 12px) 0; padding: 9px 0 8px; rotate: -2.4deg;
  background: var(--turquesa); color: var(--blanco); box-shadow: 0 4px 0 var(--sombra-dura);
}
.show__banda p { width: max-content; white-space: nowrap; font: 900 15px/1 var(--f-ancha); letter-spacing: .02em; word-spacing: .2em; }

/* tarjeta de configuración: tercera pieza del grupo A, montada sobre el pie del video */
.show__config { grid-column: 1 / 6; grid-row: 6; margin: -20px 0 0 -4px; padding: 24px 16px 14px; rotate: -2deg; z-index: 4; }
.show__config .cinta { left: 30%; }
.show__config .sello { width: 72px; }
/* el sello va arriba a la derecha, DENTRO de la tarjeta: no tapa la lista ni se sale del borde de la pantalla */
/* (en móvil el sello queda sobre el pie de la foto de tarima, lejos del video y por encima del título de la tarjeta) */
.show__config .sello { right: 8px; top: -52px; bottom: auto; }
.config__lista { margin-top: 12px; }
.config__lista li { padding: 9px 0; border-top: 1.5px solid var(--linea-tinta); font: 800 19px/1.2 var(--f-texto); }
.config__lista li:last-child { font-weight: 600; font-size: 17px; }

.show__full {
  grid-column: 2 / -1; grid-row: 9; position: relative; z-index: 2;
  margin: -38px calc(var(--margen) * -1) 0 16px; padding: 36px var(--margen) 44px 22px;
  background: var(--oro); color: var(--tinta);
}
/* «30 MIN» gigante dentro del bloque (mismo dato de la boleta FULL SHOW) */
.show__full-cifra { font: 500 13px/1 var(--f-mono); letter-spacing: .1em; margin-bottom: 14px; }
.show__full-cifra span { font: 900 clamp(84px, 27vw, 150px)/.78 var(--f-ancha); letter-spacing: -.05em; margin-right: .04em; }
.show__full-rotulo { font: 500 13px/1.2 var(--f-mono); letter-spacing: .1em; padding-top: 12px; border-top: 2px solid var(--linea-tinta); }
.show__full-texto { margin-top: 10px; font: 900 clamp(24px, 6.9vw, 38px)/1.04 var(--f-titular); letter-spacing: -.02em; text-wrap: balance; }

/* nota de producción en papel cobre, montada sobre la esquina del bloque dorado */
.show__produccion { grid-column: 1 / 6; grid-row: 10; z-index: 3; margin-top: -20px; rotate: 2deg; }
.show__produccion::before { background-color: var(--cobre); }
.show__produccion .cinta { right: 16%; }

.show__reel { grid-column: 1 / -1; grid-row: 11; margin-top: 56px; }
.reel {
  margin-top: 14px; padding: 22px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center;
  border: 1.5px dashed var(--oro); background: var(--negro-2);
}
.reel__ico { grid-row: 1 / 3; color: var(--oro); width: 52px; height: 52px; }
.reel__nombre { font: 900 clamp(20px, 5.6vw, 30px)/1 var(--f-ancha); letter-spacing: -.01em; color: var(--blanco); }
.reel .capsula { justify-self: start; }

/* ---------- 12. Cierre ---------- */
.cierre__papel {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  padding: 6px var(--margen) max(22px, env(safe-area-inset-bottom));
  background: var(--crema); color: var(--tinta); font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em;
}

/* ---------- 13. Movimiento ---------- */
@keyframes kp-gira { to { rotate: 1turn; } }
@keyframes kp-aparece { from { opacity: 0; } }
@keyframes kp-sube { from { opacity: 0; transform: translateY(36px); } }
@keyframes kp-sube-kash { from { opacity: 0; transform: translateY(26%); } }
@keyframes kp-halo { from { opacity: 0; transform: scale(.6); } }
@keyframes kp-papel { from { transform: translateY(100%); } }
@keyframes kp-cae { from { opacity: 0; transform: translateY(-70px) rotate(11deg) scale(1.06); } 60% { opacity: 1; } }
@keyframes kp-baja { 50% { transform: translateY(5px); } }
@keyframes kp-asienta { from { transform: translateY(-34px) rotate(var(--giro, 6deg)) scale(1.04); } }
@keyframes kp-desliza { from { transform: translateX(var(--corre, -7%)); } }
@keyframes kp-fondo { to { transform: translateY(9%) scale(1.06); } }
@keyframes kp-kash { to { transform: translateY(34%); } }
@keyframes kp-figura { to { transform: translateY(-4%) scale(1.03); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* la cinta de palabras corre despacio (el texto va repetido 4 veces: -25 % empalma) */
  .show__banda p { animation: kp-banda 30s linear infinite; }
}
@keyframes kp-banda { to { transform: translateX(-25%); } }

/* por scroll: solo donde el navegador lo soporta; sin soporte, todo queda visible y quieto */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .show__video, .show__foto, .boleta, .show__config, .show__produccion, .show__full {
      animation: kp-asienta var(--entra) both; animation-timeline: view(); animation-range: entry 0% entry 90%;
    }
    .show__full { --giro: 0deg; }
    .boleta:nth-child(2), .show__foto--2, .show__produccion { --giro: -7deg; }

    .show__linea { animation: kp-desliza linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .show__linea:nth-child(2) { --corre: 7%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 14. Escritorio: las mismas piezas recompuestas a 2–3 columnas ---------- */
@media (min-width: 900px) {
  :root { --margen: 40px; }
  body { font-size: 18px; }
  .cinta { width: 124px; }


  /* el show */
  .show {
    grid-template-columns: minmax(0, 1fr) repeat(12, minmax(0, calc((var(--ancho) - 11 * 24px) / 12))) minmax(0, 1fr);
    column-gap: 24px; padding: 70px var(--margen) 110px;
  }
  .show__titulo { grid-column: 2 / span 12; font-size: min(12.4vw, 184px); }
  /* ESCENA: figura a la derecha sobre el pie del titular; boletas y bloque turquesa a su izquierda.
     (.show__bloque ya no existe: el turquesa es el fondo de .show__intro y sangra a la izquierda con la sombra) */
  .show__figura { grid-column: 8 / span 5; grid-row: 2 / span 2; align-self: end; margin: -204px 0 0; }
  .formatos { grid-column: 2 / span 6; grid-row: 2; margin-top: 54px; }
  .show__intro {
    grid-column: 2 / span 9; grid-row: 3; z-index: 1; margin: 56px 0 0; padding: 46px 300px 50px 0;
    box-shadow: -60vw 0 0 var(--turquesa);
  }
  .show__sub { font-size: clamp(30px, 3.1vw, 44px); }
  .show__texto { margin-top: 20px; font-size: 19px; line-height: 1.55; }
  /* GRUPO A: foto grande a la izquierda, tarjeta arriba a la derecha, video montado abajo a la derecha */
  .show__foto--2 { grid-column: 2 / span 7; grid-row: 4; margin: 120px 0 0; padding: 10px 10px 12px; }
  .show__video { grid-column: 7 / span 6; grid-row: 4; align-self: end; justify-self: end; width: min(100%, 500px); margin: 0 10px -64px 0; padding: 12px 12px 46px; }
  .show__video::after { position: absolute; inset: 12px 12px 46px; }
  .show__video .cinta--a { width: 104px; }
  .show__video .cinta--b { width: 96px; left: -38px; bottom: 40px; }
  .show__banda { grid-row: 5; margin: 130px calc(var(--margen) * -1 - 20px) 0; padding: 13px 0 12px; rotate: -2deg; }
  .show__banda p { font-size: 22px; }
  /* GRUPO B: foto del traje cobre, bloque dorado montado sobre su esquina, y a la derecha producción + showreel */
  .show__foto--1 { grid-column: 2 / span 4; grid-row: 6; margin: 96px 0 0; padding: 10px 10px 12px; }
  .boletas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; margin: 22px 0 0; }
  .boleta + .boleta { margin-top: 0; }
  .boleta:nth-child(2) { translate: 0 10px; }
  .boleta:nth-child(3) { translate: none; }
  .boleta { padding: 22px 12px 18px; }
  .boleta__min { font-size: 14px; padding-bottom: 18px; }
  .boleta__num { font-size: clamp(64px, 6.6vw, 96px); }
  .boleta__nombre { font-size: 19px; margin-top: 16px; }
  .show__config { grid-column: 10 / span 4; grid-row: 4; align-self: start; margin: 150px 0 0; padding: 36px 28px 26px; }
  .sello { width: 108px; right: -22px; bottom: -40px; }
  .show__config .sello { right: 14px; top: -74px; width: 108px; }
  .show__foto--2 .cinta { left: 26%; }
  .tarjeta__rotulo { font-size: 18px; }
  .config__lista li { font-size: 22px; padding: 12px 0; }
  .config__lista li:last-child { font-size: 19px; }
  .show__full { grid-column: 5 / span 5; grid-row: 6; align-self: end; margin: 0 0 10px -36px; padding: 44px 40px 40px; }
  .show__full-cifra span { font-size: clamp(120px, 12vw, 176px); }
  .show__full-texto { font-size: clamp(26px, 2.3vw, 34px); }
  .show__produccion { grid-column: 10 / span 4; grid-row: 6; align-self: start; margin: 150px 0 0; padding: 28px 24px 22px; }
  .show__reel { grid-column: 10 / span 4; grid-row: 6; align-self: end; margin: 0 0 10px; }
  .reel { padding: 26px 22px; }
  .nota p { font-size: 18px; }

  .cierre__papel { padding: 14px var(--margen) 30px; font-size: 13px; }
}