/* ============================================================
   Fichas de caso de estudio (casos/<proyecto>/index.html)
   ------------------------------------------------------------
   Se carga DESPUÉS de opcion-c.css y proyectos6.css: de ahí vienen las
   variables (--ink, --cream, --accent…, --disp, --sans, --pad, --ease), el
   nav, el menú móvil y el footer "cortina". Todo lo propio va con prefijo
   cs- para no chocar con las clases de la página general (.hero, .stmt…).
   Pensado para reutilizarse en el resto de casos.
   ============================================================ */

/* Paleta propia de las fichas de caso (el resto de tokens viene de
   opcion-c.css y proyectos6.css) */
:root {
  --cs-texto: #3d3d3d;            /* cuerpo de texto sobre fondo claro */
  --cs-crema: #f3efe7;            /* texto sobre secciones oscuras */
  --cs-crema-rgb: 243,239,231;
  --cs-sombra-rgb: 8,4,2;         /* velos sobre los vídeos del hero */
  --cs-noche-rgb: 10,8,6;         /* velos sobre los vídeos al scroll */
  --cs-tierra-rgb: 40,25,10;      /* sombras cálidas de tarjetas */
  --cs-borde-osc: #1f1f1f;        /* filetes sobre gris oscuro */
}

/* Fondos de color: el mismo verde grisáceo de la home (hero #C7CFC7), muy
   rebajado hacia el blanco. Sustituye al crema en todas las secciones de color. */
.cs-page { --cs-tint: #F6F7F6; background: var(--bg); }
.cs-page main { background: var(--bg); }

/* La marca del header es un enlace a la página general */
.cs-page .nav__tag { color: inherit; }

/* ---------- Tipografía común ---------- */
.cs-eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-txt); margin-bottom: 1.1rem; }
.cs-h2 { font-family: var(--disp); font-weight: 400; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(2.1rem, 4.6vw, 4.6rem); }
.cs-h3 { font-family: var(--disp); font-weight: 400; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem); margin-bottom: .9rem; }
.cs-p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--cs-texto); max-width: 60ch; }
.cs-big { font-size: clamp(1.35rem, 2.3vw, 2.15rem); line-height: 1.22; letter-spacing: -.015em;
  font-weight: 500; margin-bottom: 1.4rem; }
.cs-accent { color: var(--accent); }
.cs-link { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; transition: color .3s var(--ease); }
.cs-link:hover { color: var(--accent); }

/* Escalonado de los .reveal (la clase .is-in la pone js/caso.js) */
.cs-page .reveal { transition-delay: var(--d, 0s); }

/* ---------- Secciones ---------- */
.cs-sec { padding: clamp(5rem, 11vw, 10rem) var(--pad); position: relative; }
.cs-sec--cream { background: var(--cs-tint); }
.cs-sec--dark { background: var(--dark); color: var(--cs-crema); }
.cs-sec--dark .cs-p { color: rgba(var(--cs-crema-rgb),.72); }
.cs-head { max-width: 62rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cs-head .cs-h2 { margin-bottom: 1.4rem; }

/* ---------- 1. Portada del caso: hero con vídeo ---------- */
.cs-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(7rem, 14vh, 10rem) var(--pad) clamp(3rem, 8vh, 5.5rem);
  background: var(--cs-hero-bg, #2a1206); color: var(--white); overflow: hidden; isolation: isolate; }
/* --pos: punto del vídeo que se conserva cuando el recorte "cover" se come los lados */
.cs-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 60%); z-index: -2; }
/* Oscurece abajo (donde va el texto) y un poco arriba (lectura del header) */
.cs-hero__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--cs-sombra-rgb),.72) 0%, rgba(var(--cs-sombra-rgb),.35) 38%, rgba(var(--cs-sombra-rgb),0) 62%),
              linear-gradient(180deg, rgba(var(--cs-sombra-rgb),.35) 0%, rgba(var(--cs-sombra-rgb),0) 22%); }
.cs-hero .cs-back { position: absolute; top: clamp(5.5rem, 12vh, 7.5rem); left: var(--pad); color: var(--white); }
.cs-hero .cs-back:hover { color: var(--accent-salmon); }
.cs-hero .cs-eyebrow { color: var(--accent-salmon); }
/* Sobre fondo oscuro el acento oscurecido pierde contraste: ahí el texto
   pequeño en acento usa el salmón claro */
.cs-sec--dark, .cs-sec--negro, .cs-scrub--orbita, .cs-scrub--dark, .cs-tech, .stmt { --accent-txt: var(--accent-salmon); }
.cs-hero__title { font-family: var(--disp); font-weight: 400; line-height: .86; letter-spacing: -.045em;
  font-size: clamp(3.2rem, min(11.5vw, 19vh), 14rem); margin: .1em 0 .3em -.04em;
  text-shadow: 0 2px 40px rgba(0,0,0,.25); }
.cs-hero__lead { font-size: clamp(1.15rem, 1.9vw, 1.85rem); line-height: 1.25; letter-spacing: -.012em;
  font-weight: 500; max-width: 44ch; color: rgba(var(--white-rgb), .92); }
.cs-hero__scroll { position: absolute; right: var(--pad); bottom: clamp(3rem, 8vh, 5.5rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--white-rgb), .75);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: .8rem; }
.cs-hero__scroll::after { content: ""; width: 1.5px; height: 3.2rem; background: currentColor;
  transform-origin: top; animation: csLinea 2.2s var(--ease) infinite; }
@keyframes csLinea { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Hero "de lado" (.cs-hero--lado): el motivo del vídeo (un portátil) queda a la
   derecha y el texto se ciñe a la mitad izquierda, con un titular más contenido.
   En vertical vuelve al esquema normal: imagen arriba, texto abajo. */
.cs-hero--lado .cs-hero__title { font-size: clamp(2.7rem, min(5.4vw, 11vh), 7.2rem); line-height: .9; }
@media (min-aspect-ratio: 1/1) {
  .cs-hero--lado .cs-hero__txt { max-width: min(47%, 44rem); }
  .cs-hero--lado .cs-hero__scrim {
    background: linear-gradient(90deg, rgba(var(--cs-sombra-rgb),.74) 0%, rgba(var(--cs-sombra-rgb),.5) 30%, rgba(var(--cs-sombra-rgb),0) 56%),
                linear-gradient(180deg, rgba(var(--cs-sombra-rgb),.4) 0%, rgba(var(--cs-sombra-rgb),0) 20%); }
}
@media (max-aspect-ratio: 1/1) {
  .cs-hero--lado .cs-hero__title { font-size: clamp(2.7rem, 12.5vw, 6rem); }
  .cs-hero--lado .cs-hero__video { object-position: 50% 0; }
}

/* Hero con dispositivo (.cs-hero--device): para proyectos sin escena filmada.
   Fondo oscuro y un portátil dibujado en CSS que reproduce la grabación de
   pantalla a su resolución nativa (nítida en cualquier densidad). Todas las
   medidas del portátil van en em sobre su propio ancho (--w). */
.cs-hero--device { background: radial-gradient(ellipse 62% 72% at 73% 44%, var(--cs-hero-glow, #1d2d63) 0%, #0c1126 46%, #06070c 100%); }
.cs-laptop { --w: min(52vw, 118svh); position: absolute; right: clamp(1rem, 5vw, 5.5rem); top: 50%; z-index: -1;
  width: var(--w); font-size: calc(var(--w) / 100); transform: translateY(-50%); }
.cs-laptop__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--black);
  border: 1.25em solid #0b0b0d; border-bottom-width: 1.6em; border-radius: 1.7em 1.7em 0 0;
  box-shadow: 0 0 0 1px rgba(var(--white-rgb), .16), 0 0 14em rgba(79,107,251,.22); }
.cs-laptop__screen .cs-hero__video { z-index: 0; object-position: 50% 0; }
.cs-laptop__base { position: relative; height: 1.9em; margin: 0 -8%; border-radius: 0 0 1.8em 1.8em / 0 0 1.5em 1.5em;
  background: linear-gradient(180deg, #d5d8dc 0%, #a9adb3 45%, #6f737a 100%); box-shadow: 0 3em 5em rgba(0,0,0,.5); }
.cs-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: .55em;
  transform: translateX(-50%); border-radius: 0 0 .7em .7em; background: #878b92; }
@media (max-aspect-ratio: 1/1) {
  .cs-hero--device { background: radial-gradient(ellipse 110% 46% at 50% 30%, var(--cs-hero-glow, #1d2d63) 0%, #0c1126 55%, #06070c 100%); }
  .cs-laptop { --w: 80vw; right: auto; left: 50%; top: clamp(6.5rem, 16svh, 10rem); transform: translateX(-50%); }
}

/* Enlace de vuelta a la página general (arriba en el hero y al final) */
.cs-back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem;
  transition: color .3s var(--ease), gap .3s var(--ease); }
.cs-back:hover { color: var(--accent); gap: .8rem; }

/* Ficha bajo el hero */
.cs-intro { background: var(--cs-tint); padding: clamp(2rem, 4vw, 3.2rem) var(--pad); }
.cs-ficha { display: grid; grid-template-columns: var(--grid12); gap: 1.5rem var(--gut); }
.cs-ficha > * { grid-column: span 3; }
.cs-ficha dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-bottom: .45rem; }
.cs-ficha dd { font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.4; }

/* Sobre el vídeo, el header va en blanco (sin el blend "difference", que sobre
   el naranja daría un azul extraño); al hacer scroll proyectos6.js lo pasa a
   la barra esmerilada de siempre (.is-solid). */
.cs-page .nav:not(.is-solid) { mix-blend-mode: normal; color: var(--white); }
.cs-page .nav:not(.is-solid) .nav__burger-line { background: var(--white); }

/* Entrada de la portada (no depende del scroll) */
.cs-in { opacity: 0; transform: translateY(24px); animation: csIn 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes csIn { to { opacity: 1; transform: none; } }
/* El título del hero entra solo deslizándose (sin fundido): así está pintado
   desde el primer fotograma y Chrome lo cuenta como LCP. Con el vídeo a
   pantalla completa no hay otro candidato (el póster no cuenta) y, si todo el
   texto arranca en opacity 0, la página se queda sin LCP. */
.cs-hero__title.cs-in { opacity: 1; transform: translateY(.18em); animation-name: csInY; }
@keyframes csInY { to { transform: none; } }

/* ---------- Vídeo ligado al scroll ----------
   La sección es alta (--len) y su escenario va sticky: mientras se recorre, el
   JS lleva el progreso 0→1 al currentTime del vídeo y enciende los pasos. */
.cs-scrub { position: relative; height: var(--len, 400vh); background: #0e0c0a; color: var(--white); }
.cs-scrub__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cs-scrub__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El canvas (js/caso.js) toma el relevo del <video> en cuanto tiene un fotograma */
.cs-scrub__canvas { opacity: 0; }
.cs-scrub.is-canvas .cs-scrub__canvas { opacity: 1; }
.cs-scrub.is-canvas video.cs-scrub__video { opacity: 0; }
.cs-scrub__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--cs-noche-rgb),.62) 0%, rgba(var(--cs-noche-rgb),.25) 34%, rgba(var(--cs-noche-rgb),0) 55%),
              linear-gradient(0deg, rgba(var(--cs-noche-rgb),.45) 0%, rgba(var(--cs-noche-rgb),0) 30%); }
/* En el tronco el móvil está a la izquierda/centro: los textos van a la derecha */
.cs-scrub--tronco .cs-scrub__scrim {
  background: linear-gradient(270deg, rgba(var(--cs-noche-rgb),.66) 0%, rgba(var(--cs-noche-rgb),.25) 32%, rgba(var(--cs-noche-rgb),0) 50%); }
.cs-scrub--tronco .cs-scrub__steps { left: auto; right: var(--pad); }
.cs-scrub__steps { position: absolute; left: var(--pad); bottom: clamp(4rem, 12vh, 8rem); width: min(32rem, 40vw); }
.cs-step { position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cs-step.is-on { opacity: 1; transform: none; }
.cs-step__n { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-salmon); margin-bottom: .8rem; }
.cs-step__t { font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.2; letter-spacing: -.015em; font-weight: 500;
  text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.cs-scrub__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.5rem, 4vh, 2.5rem);
  height: 2px; background: rgba(var(--white-rgb), .2); }
.cs-scrub__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-red), var(--accent), var(--accent-salmon)); }
.cs-scrub__hint { position: absolute; right: var(--pad); bottom: calc(clamp(1.5rem, 4vh, 2.5rem) + .9rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7;
  transition: opacity .4s; }
.cs-scrub.is-started .cs-scrub__hint { opacity: 0; }

/* En pantallas verticales, el portátil (16:9) se ve entero: contain, centrado
   arriba, y los textos debajo, sobre el fondo. El móvil del tronco sí admite
   cover: está centrado en el encuadre. */
@media (max-aspect-ratio: 1/1) {
  .cs-scrub[data-fit="contain-portrait"] .cs-scrub__video { object-fit: contain; object-position: 50% 28%; }
  .cs-scrub[data-fit="contain-portrait"] .cs-scrub__scrim { display: none; }
  .cs-scrub__steps, .cs-scrub--tronco .cs-scrub__steps { width: auto; left: var(--pad); right: var(--pad); bottom: clamp(4.5rem, 12vh, 7rem); }
  .cs-scrub--tronco .cs-scrub__scrim { background: linear-gradient(0deg, rgba(var(--cs-noche-rgb),.72) 0%, rgba(var(--cs-noche-rgb),.35) 35%, rgba(var(--cs-noche-rgb),0) 60%); }
}

/* ---------- Variante EN RECUADRO (la que usan las fichas; .cs-scrub--box) ----------
   Mismo efecto ligado al scroll, pero el vídeo no ocupa la pantalla: va en un
   recuadro de 1160px máx. (sin esquinas redondeadas) con los textos debajo.
   Al ser más pequeño, basta un vídeo de 2200px en Retina y 1280px en el resto. */
.cs-scrub--box { background: var(--bg); color: var(--ink); }
.cs-scrub--box.cs-scrub--tronco { background: var(--bg); }   /* mismo fondo que El territorio */
.cs-sec--pegada { padding-bottom: 0; position: relative; z-index: 1; display: flow-root; }   /* flow-root: el margen del último hijo no se escapa (dejaba una banda blanca) */   /* por encima de la sección siguiente: no corta la sombra de la última captura */
.cs-scrub--box .cs-scrub__stage { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1rem, 2.6vh, 1.8rem); padding: clamp(4.5rem, 10vh, 6rem) var(--pad) clamp(1rem, 3vh, 2rem); }
.cs-box { position: relative; flex: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #e3e7e3;
  width: min(1160px, 100%, calc((100svh - 15.5rem) * 16 / 9)); }
.cs-scrub__foot { width: min(1160px, 100%, calc((100svh - 15.5rem) * 16 / 9)); }
.cs-scrub.cs-scrub--box .cs-scrub__steps { position: relative; left: auto; right: auto; bottom: auto; width: 100%;
  height: clamp(4.6rem, 9vh, 5.6rem); }
.cs-scrub--box .cs-step { top: 0; bottom: auto; display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr; gap: 1rem; align-items: baseline; }
.cs-scrub--box .cs-step__n { color: var(--accent-txt); margin: 0; }
.cs-scrub--box .cs-step__t { font-size: clamp(1.05rem, 1.45vw, 1.4rem); line-height: 1.3; text-shadow: none; color: var(--ink); }
.cs-scrub.cs-scrub--box .cs-scrub__bar { position: relative; left: auto; right: auto; bottom: auto; width: 100%;
  margin-top: .6rem; background: rgba(var(--ink-rgb), .12); }
/* Primer vídeo (portátil) sobre gris muy oscuro: el mismo var(--grafito) de la franja
   inferior del footer. Textos y barra de progreso en claro. (.cs-scrub--dark es
   el nombre genérico; .cs-scrub--orbita, el de la ficha de Ribera.) */
.cs-scrub--box.cs-scrub--orbita, .cs-scrub--box.cs-scrub--dark { background: var(--grafito); color: var(--cs-crema); }
.cs-scrub--box.cs-scrub--orbita .cs-box, .cs-scrub--box.cs-scrub--dark .cs-box { background: #262626; }
.cs-scrub--box.cs-scrub--orbita .cs-step__n, .cs-scrub--box.cs-scrub--dark .cs-step__n { color: var(--accent-salmon); }
.cs-scrub--box.cs-scrub--orbita .cs-step__t, .cs-scrub--box.cs-scrub--dark .cs-step__t { color: var(--cs-crema); }
.cs-scrub.cs-scrub--box.cs-scrub--orbita .cs-scrub__bar, .cs-scrub.cs-scrub--box.cs-scrub--dark .cs-scrub__bar { background: rgba(var(--white-rgb), .16); }
/* Sobre el fondo de color: cuando continúa una sección .cs-sec--cream */
.cs-scrub--box.cs-scrub--tint { background: var(--cs-tint); }
/* Vídeo VERTICAL (móvil en mano, 9:16): recuadro alto a la izquierda y los pasos
   a su derecha, centrados; en pantallas estrechas, los pasos pasan debajo. */
.cs-scrub--box.cs-scrub--movil .cs-scrub__stage { flex-direction: row; gap: clamp(2rem, 6vw, 6.5rem); }
.cs-scrub--movil .cs-box { aspect-ratio: 9 / 16; width: auto; height: min(calc(100svh - 9.5rem), 780px); }
.cs-scrub--movil .cs-scrub__foot { width: min(27rem, 36vw); }
/* Grabación de pantalla (no un móvil en la mano): se enmarca como un teléfono,
   el mismo marco que .cs-movil, para que se vea dónde empieza y acaba la pantalla. */
.cs-box--telefono { border: clamp(.35rem, .9vw, .55rem) solid #111; border-radius: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 30px 70px -24px rgba(var(--cs-tierra-rgb),.45); }
.cs-scrub.cs-scrub--box.cs-scrub--movil .cs-scrub__steps { height: clamp(11rem, 27vh, 14.5rem); }
.cs-scrub--box.cs-scrub--movil .cs-step { grid-template-columns: 1fr; gap: .8rem; }
.cs-scrub--box.cs-scrub--movil .cs-step__t { font-size: clamp(1.25rem, 1.95vw, 1.85rem); line-height: 1.22; }
@media (max-width: 860px) {
  .cs-scrub--box.cs-scrub--movil .cs-scrub__stage { flex-direction: column; gap: 1.1rem; }
  .cs-scrub--movil .cs-box { height: min(calc(100svh - 17rem), 620px); }
  .cs-scrub--movil .cs-scrub__foot { width: 100%; }
  .cs-scrub.cs-scrub--box.cs-scrub--movil .cs-scrub__steps { height: 7.5rem; }
  .cs-scrub--box.cs-scrub--movil .cs-step { gap: .4rem; }
  .cs-scrub--box.cs-scrub--movil .cs-step__t { font-size: 1.1rem; }
}
@media (max-width: 600px) {
  .cs-scrub--box .cs-step { grid-template-columns: 1fr; gap: .4rem; }
  .cs-scrub.cs-scrub--box .cs-scrub__steps { height: 7.5rem; }
  .cs-box, .cs-scrub__foot { width: 100%; }
}

/* Titular contenido para heros cuyo motivo ocupa el centro (Square One) */
.cs-hero--compacto .cs-hero__title { font-size: clamp(2.7rem, min(5.6vw, 11vh), 7.4rem); line-height: .9; }

/* ---------- Página completa que se recorre con el scroll ([data-largo]) ----------
   Sección alta con escenario fijo: dentro del marco de navegador, la captura
   completa de la página sube según el progreso (js/caso.js). */
.cs-largo { position: relative; height: var(--len, 420vh); background: var(--bg); }
.cs-largo__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(.9rem, 2.4vh, 1.5rem);
  padding: clamp(4.8rem, 11vh, 6.5rem) var(--pad) clamp(1.2rem, 3.5vh, 2.2rem); }
.cs-largo__head { width: min(1160px, 100%); display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }
.cs-largo__head .cs-eyebrow { margin: 0; }
.cs-largo__head p:last-child { font-size: .85rem; color: var(--soft); }
.cs-largo .cs-browser { width: min(1160px, 100%); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cs-largo__vis { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--white); }
.cs-browser .cs-largo__img { will-change: transform; }

/* ---------- Sección sobre negro puro (fotos de producto con fondo negro) ---------- */
.cs-sec--negro { background: var(--black); color: var(--cs-crema); }
.cs-sec--negro .cs-p { color: rgba(var(--cs-crema-rgb),.72); }
.cs-sec--negro .cs-eyebrow { color: var(--accent-salmon); }
.cs-angulo { display: grid; gap: clamp(1rem, 4vh, 3rem); }
.cs-angulo img { display: block; width: 100%; height: auto; }

/* ---------- Retícula de 12 columnas (tras el hero) ----------
   Todas las secciones comparten columnas y carrilera (--grid12 / --gut, de
   opcion-c.css), así los bordes caen en las mismas líneas de arriba abajo:
   ficha 4 × 3 · reto 3 + 9 · claves 3 × 4 · texto fijo 4 + capturas 7
   (con una columna de aire, como las tarjetas de la portada) · bajo el capó 4 × 3. */

/* ---------- 3. El reto ---------- */
.cs-cols { display: grid; grid-template-columns: var(--grid12); gap: clamp(1.5rem, 4vw, 4rem) var(--gut); }
.cs-cols > :first-child { grid-column: 1 / span 3; }
.cs-cols > :last-child { grid-column: 4 / -1; }
.cs-claves { list-style: none; display: grid; grid-template-columns: var(--grid12); gap: clamp(1.5rem, 3vw, 3rem) var(--gut);
  margin-top: clamp(4rem, 8vw, 7rem); }
.cs-claves > * { grid-column: span 4; }
.cs-claves__n, .cs-feat__n { display: block; font-size: .8rem; font-weight: 600; color: var(--accent-txt); margin-bottom: .9rem; }
.cs-claves h3 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.02em; margin-bottom: .7rem; }
.cs-claves p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--cs-texto); }

/* ---------- Capturas ---------- */
.cs-shot img, .cs-card img { width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 50px -18px rgba(var(--cs-tierra-rgb),.28); background: var(--white); }
/* Captura dentro de marco de navegador: el redondeo y la sombra los pone el marco */
.cs-shot .cs-browser img { border-radius: 0; box-shadow: none; }
.cs-shot figcaption { font-size: .9rem; color: var(--soft); margin-top: .9rem; max-width: 46ch; }

/* Marco de navegador */
.cs-browser { border-radius: 12px; overflow: hidden; background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 60px -20px rgba(var(--cs-tierra-rgb),.32); }
.cs-browser__bar { display: flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .9rem;
  background: #2b2b2b; border-bottom: 1px solid var(--cs-borde-osc); }
.cs-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.cs-browser__bar span { margin-left: .8rem; font-size: .74rem; color: #b5b5b5; background: #1c1c1c; border-radius: var(--r-pill);
  padding: .2rem .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-browser img, .cs-browser video { display: block; width: 100%; height: auto; }
.cs-browser video { aspect-ratio: 1280 / 800; object-fit: cover; background: #eef1ee; }
.cs-browser--xl { margin-bottom: clamp(2rem, 5vw, 4.5rem); }

.cs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 3rem) var(--gut); align-items: start; }
.cs-shot--down { margin-top: clamp(3rem, 9vw, 9rem); }
.cs-duo--tight { row-gap: clamp(1rem, 2vw, 1.8rem); }

/* Texto fijo a un lado (4 columnas) mientras pasan las capturas (7, tras una de aire) */
.cs-split { display: grid; grid-template-columns: var(--grid12); gap: clamp(2rem, 5vw, 5rem) var(--gut); align-items: start; }
.cs-split > .cs-head { grid-column: 1 / span 4; }
.cs-split > :not(.cs-head) { grid-column: 6 / span 7; }
/* Capturas a la izquierda y texto fijo a la derecha */
.cs-split--rev .cs-head { order: 2; }
.cs-split--rev > .cs-head { grid-column: 9 / span 4; }
.cs-split--rev > :not(.cs-head) { grid-column: 1 / span 7; }
.cs-p--lead { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.45; color: var(--ink); }
.cs-head--sticky { position: sticky; top: clamp(6rem, 14vh, 9rem); margin-bottom: 0; }
.cs-stack { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }

/* ---------- 7. Herramientas ---------- */
.cs-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 4.5rem) var(--gut);
  align-items: center; margin-bottom: clamp(4rem, 8vw, 7rem); }
.cs-feat--rev .cs-browser { order: 2; }
.cs-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2.5rem) var(--gut); align-items: start; }
.cs-card img { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: top; }
.cs-card figcaption { margin-top: 1.1rem; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--cs-texto); }
.cs-card strong { display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  letter-spacing: -.02em; color: var(--ink); margin-bottom: .45rem; line-height: 1.05; }

/* ---------- 7. Utilidades: lista fija + capturas que pasan ----------
   El ítem activo (js/caso.js) se ilumina y despliega su texto; el resto queda
   atenuado mostrando solo número y título. */
.cs-util { display: grid; grid-template-columns: var(--grid12); gap: clamp(2rem, 5vw, 5rem) var(--gut); align-items: start; }
.cs-util > .cs-util__list { grid-column: 1 / span 4; }
.cs-util > .cs-util__imgs { grid-column: 6 / span 7; }
.cs-util__list { list-style: none; position: sticky; top: clamp(6rem, 14vh, 9rem); }
.cs-util__item { padding: 1.1rem 0 1.2rem; opacity: .38; transition: opacity .7s ease; }
.cs-util__item.is-active { opacity: 1; }
.cs-util__item .cs-feat__n { margin-bottom: .45rem; }
.cs-util__item h3 { font-family: var(--disp); font-weight: 400; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(1.25rem, 1.9vw, 1.8rem); }
/* Despliegue suave: el alto se anima de verdad (grid 0fr → 1fr, sin max-height
   inventado) con una curva lenta al principio y al final; el texto aparece
   cuando ya hay sitio y desaparece antes de que se cierre. */
.cs-util__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s cubic-bezier(.65, 0, .35, 1); }
.cs-util__item.is-active .cs-util__desc { grid-template-rows: 1fr; }
.cs-util__desc > p { min-height: 0; overflow: hidden;
  font-size: var(--fs-body-sm); line-height: 1.55; color: var(--cs-texto); max-width: 42ch;
  opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .5s ease; }
.cs-util__desc > p::before { content: ""; display: block; height: .7rem; }   /* separación que se pliega con el texto */
.cs-util__item.is-active .cs-util__desc > p { opacity: 1; transform: none; transition: opacity .7s ease .3s, transform .9s cubic-bezier(.22, 1, .36, 1) .2s; }
.cs-util__imgs { display: grid; gap: clamp(3rem, 9vh, 6rem); }
.cs-util__cap { display: none; }
.cs-util__cap strong { display: block; font-family: var(--disp); font-weight: 400; font-size: 1.3rem; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: .4rem; }
@media (max-width: 860px) {
  .cs-util > .cs-util__imgs { grid-column: 1 / -1; }
  .cs-util__list { display: none; }
  .cs-util__cap { display: block; margin-top: 1rem; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--cs-texto); }
}

/* ---------- 7b. Utilidades en UN solo navegador (Square One) ----------
   El bloque mide --n pasos de scroll; dentro, un escenario fijo (sticky) con la
   lista a la izquierda y el navegador a la derecha. js/caso.js ([data-marco])
   activa la pantalla que toca: entra tapando a la anterior de abajo arriba
   (clip-path) con un ligero desplazamiento de su contenido. */
.cs-util--marco { display: block; position: relative; height: calc(var(--n, 6) * 70vh + 100vh); }
.cs-marco__stage { position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: var(--grid12); column-gap: var(--gut);
  align-items: center; padding-top: clamp(3.5rem, 8vh, 5rem); }
.cs-util--marco .cs-util__list { position: static; grid-column: 1 / span 3; }
.cs-marco__stage > .cs-marco__col { grid-column: 5 / span 8; }
.cs-util--marco .cs-util__item { cursor: pointer; }
.cs-util--marco .cs-util__item:not(.is-active):hover { opacity: .65; }
.cs-marco__col { min-width: 0; }
.cs-browser__bar .cs-marco__cont { margin-left: auto; font: 500 .72rem/1 var(--sans); color: #8a8a8a;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cs-marco__cont em { font-style: normal; color: #e9e9e9; }
.cs-marco__prog { height: 2px; background: var(--cs-borde-osc); }
.cs-marco__prog span { display: block; height: 100%; width: 100%; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); background: var(--accent); }
.cs-marco__vis { position: relative; aspect-ratio: 2400 / 1100; overflow: hidden; background: #fdfcf9; }
.cs-browser .cs-marco__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0); transform: translateY(14%);
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.cs-browser .cs-marco__img.is-on { clip-path: inset(0 0 0 0); transform: none; }
.cs-marco__img[data-marco-i="0"] { clip-path: none !important; transform: none !important; }
.cs-marco__cap { display: none; }
@media (max-width: 860px) {
  .cs-util--marco { height: calc(var(--n, 6) * 60vh + 100vh); }
  .cs-marco__stage { align-content: center; }
  .cs-marco__stage > .cs-marco__col { grid-column: 1 / -1; }
  .cs-util--marco .cs-util__list { display: none; }
  .cs-marco__cap { display: block; margin-top: 1.2rem; min-height: 12em;
    font-size: var(--fs-body-sm); line-height: 1.5; color: var(--cs-texto); }
  .cs-marco__cap strong { display: block; font-family: var(--disp); font-weight: 400; font-size: 1.3rem;
    letter-spacing: -.02em; color: var(--ink); margin: .3rem 0 .4rem; }
}
/* Movimiento reducido: las capturas se funden en vez de destaparse y subir */
@media (prefers-reduced-motion: reduce) {
  .cs-browser .cs-marco__img { clip-path: none; transform: none; opacity: 0; transition: opacity .8s var(--ease); }
  .cs-browser .cs-marco__img.is-on, .cs-marco__img[data-marco-i="0"] { opacity: 1; }
}

/* ---------- 8. Comunicación: pila de capturas que se solapan ----------
   Todas las capturas se fijan en el MISMO punto y miden lo mismo (recorte
   superior a una proporción común, la del bloque de eventos), así cada una
   tapa por completo a la anterior. Un hueco final (::after) da recorrido para
   que la última también llegue arriba antes de que la sección termine. */
.cs-pila { display: grid; gap: clamp(5rem, 16vh, 10rem); }
.cs-pila::after { content: ""; height: clamp(10rem, 40vh, 22rem); }
.cs-pila__item { position: sticky; top: clamp(6rem, 14vh, 9rem);
  box-shadow: 0 -2px 6px rgba(0,0,0,.05), 0 24px 60px -20px rgba(var(--cs-tierra-rgb),.38); }
.cs-pila__item img { aspect-ratio: 1440 / 1127; object-fit: cover; object-position: top; }
@media (max-width: 860px) {
  .cs-pila { gap: 3rem; }
  .cs-pila::after { height: 30vh; }
  .cs-pila__item { top: 5rem; }
}

/* ---------- 9. Bajo el capó ---------- */
.cs-tech { list-style: none; display: grid; grid-template-columns: var(--grid12); gap: clamp(1.2rem, 2.5vw, 2.5rem) var(--gut); }
.cs-tech > * { grid-column: span 3; }
.cs-tech h3 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.65rem); letter-spacing: -.02em;
  line-height: 1.05; margin-bottom: .8rem; color: var(--white); }
.cs-tech p { font-size: var(--fs-body-sm); line-height: 1.55; color: rgba(var(--cs-crema-rgb),.72); }

/* ---------- 10. Cierre ---------- */
.cs-cierre { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cs-cierre__t { font-family: var(--disp); font-weight: 400; letter-spacing: -.04em; line-height: .92;
  font-size: clamp(2.6rem, 8vw, 8.5rem); max-width: 20ch; text-wrap: balance; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cs-cierre__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.cs-back--end { margin-bottom: 0; align-self: center; }

/* ---------- Identidad (Música Maldita): logo animado + piezas de marca ----------
   El vídeo del logo va sobre su propio gris (#f5f5f5, el de la web original): en
   la sección de color apenas se distingue y el logo parece flotar. */
.cs-logo { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f5f5f5; }
/* Junto al texto, el logo ocupa 4 columnas (las mismas que la última pieza de la
   galería): queda contenido y deja asomar las imágenes que vienen debajo. */
.cs-split > .cs-logo { grid-column: 9 / span 4; }
.cs-logo video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tres piezas verticales del mismo tamaño; la del centro, más baja (ritmo editorial) */
.cs-galeria { display: grid; grid-template-columns: var(--grid12); gap: 2.5rem var(--gut);
  align-items: start; margin-top: clamp(4rem, 9vw, 8rem); }
.cs-galeria > * { grid-column: span 4; }
.cs-galeria figure:nth-child(2) { margin-top: clamp(2.5rem, 7vw, 7rem); }
.cs-galeria img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 50px -18px rgba(var(--cs-tierra-rgb),.32); }
.cs-galeria figcaption { margin-top: 1.1rem; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--cs-texto); max-width: 34ch; }
.cs-galeria strong { display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  letter-spacing: -.02em; line-height: 1.05; color: var(--ink); margin-bottom: .45rem; }

/* Dos móviles (claro / oscuro), el segundo algo más bajo */
.cs-moviles { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 4vw, 4rem); }
.cs-movil { width: min(300px, 42vw); padding: clamp(.35rem, .9vw, .55rem); border-radius: clamp(1.6rem, 4vw, 2.6rem);
  background: #111; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 30px 70px -24px rgba(var(--cs-tierra-rgb),.45); }
.cs-movil img { width: 100%; height: auto; border-radius: clamp(1.25rem, 3.3vw, 2.1rem); }
.cs-movil--down { margin-top: clamp(2.5rem, 8vw, 7rem); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cs-ficha > *, .cs-tech > * { grid-column: span 6; }
  .cs-trio { grid-template-columns: 1fr 1fr; }
  .cs-trio .cs-card:last-child { grid-column: 1 / -1; }
  .cs-trio .cs-card:last-child img { aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .cs-hero__scroll { display: none; }
  .cs-cols > :first-child, .cs-cols > :last-child, .cs-claves > *,
  .cs-split > .cs-head, .cs-split > :not(.cs-head), .cs-split--rev > .cs-head, .cs-split--rev > :not(.cs-head) { grid-column: 1 / -1; }
  .cs-feat { grid-template-columns: 1fr; }
  .cs-split--rev .cs-head, .cs-feat--rev .cs-browser { order: 0; }
  .cs-head--sticky { position: static; margin-bottom: 2rem; }
  .cs-feat__txt { order: -1; }
  .cs-feat--rev .cs-feat__txt { order: -1; }
  .cs-split > .cs-logo { grid-column: 1 / -1; width: min(20rem, 100%); justify-self: center; }
}
@media (max-width: 600px) {
  .cs-duo, .cs-trio { grid-template-columns: 1fr; }
  .cs-ficha > *, .cs-tech > *, .cs-galeria > * { grid-column: 1 / -1; }
  .cs-shot--down, .cs-galeria figure:nth-child(2) { margin-top: 0; }
  .cs-trio .cs-card:last-child img { aspect-ratio: 4 / 3.4; }
  .cs-browser__bar { height: 26px; }
  .cs-browser__bar i { width: 7px; height: 7px; }
}
/* Movimiento reducido: entradas y textos con fundido, sin desplazamiento; el
   título del hero ya está quieto y la línea de "scroll" late en opacidad. */
@media (prefers-reduced-motion: reduce) {
  @keyframes csIn    { from { opacity: 0; } to { opacity: 1; } }
  @keyframes csLinea { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  .cs-in { transform: none; animation-duration: 1.2s; }
  .cs-hero__title.cs-in { animation: none; transform: none; }
  .cs-step, .cs-util__desc > p { transform: none !important; }
}

/* ======================================================================
   Cartel Urgente: piezas propias del caso
   ====================================================================== */

/* Arquitectura de información: modelo de contenidos y nota (centrados junto al texto) */
.cs-split--centro { align-items: center; }
.cs-ia { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.cs-modelo { list-style: none; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: .6rem; }
.cs-modelo__caja { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 4px 4px 0 var(--cu-amarillo, #FFE200); }
.cs-modelo__caja h3 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: -.01em; margin-bottom: .7rem; }
.cs-modelo__caja ul { list-style: none; display: grid; gap: .3rem; font-size: .86rem; line-height: 1.35; color: var(--cs-texto); }
.cs-modelo__caja li::before { content: ""; display: inline-block; width: .7em; height: 2px; background: currentColor; vertical-align: middle; margin-right: .45em; opacity: .5; }
.cs-modelo__rel { align-self: center; display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .72rem;
  font-weight: 600; letter-spacing: .06em; color: var(--soft); white-space: nowrap; }
.cs-modelo__rel::after { content: "→"; font-size: 1.3rem; line-height: 1; color: var(--ink); }
.cs-ia__nota { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--cs-texto); max-width: 60ch; }
.cs-ia__nota strong { color: var(--ink); }

/* Diseño «Sala»: muestra de tipografías y colores (fuentes OFL del propio sitio) */
@font-face { font-family: "CU Anton"; src: url("../assets/casos/cartel-urgente/fonts/anton-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CU Instrument"; src: url("../assets/casos/cartel-urgente/fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
.cs-sala { display: grid; gap: 1.6rem; margin-bottom: clamp(.5rem, 2vw, 1.5rem); }
.cs-sala__tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cs-sala__tipo { border-top: 1.5px solid var(--ink); padding-top: .8rem; }
.cs-sala__tipo b { display: block; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: .9; font-weight: 400; margin-bottom: .5rem; color: var(--ink); }
.cs-sala__tipo--anton b { font-family: "CU Anton", var(--disp); text-transform: uppercase; }
.cs-sala__tipo--inst b { font-family: "CU Instrument", var(--sans); font-weight: 500; letter-spacing: -.02em; }
.cs-sala__tipo span { font-size: .8rem; color: var(--soft); }
.cs-sala__colores { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.cs-sala__colores li { font-size: .74rem; line-height: 1.3; color: var(--soft); }
.cs-sala__colores i { display: block; aspect-ratio: 1.3; border-radius: var(--r-sm); margin-bottom: .45rem; }

/* Tome: el camino de Drupal a HTML estático */
.cs-flujo { list-style: none; counter-reset: flujo; display: grid; grid-template-columns: var(--grid12); gap: 1rem var(--gut);
  margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.cs-flujo > li { grid-column: span 3; position: relative; counter-increment: flujo; padding: 1.3rem 1.2rem 1.4rem;
  border: 1px solid rgba(var(--cs-crema-rgb), .18); border-radius: var(--r-sm); background: rgba(var(--cs-crema-rgb), .03); }
.cs-flujo > li::before { content: "0" counter(flujo); display: block; font-size: .78rem; font-weight: 600; color: #FFE200; margin-bottom: .9rem; }
.cs-flujo > li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: calc(var(--gut) / -2); translate: 50% -50%;
  color: #FFE200; font-size: 1.2rem; }
.cs-flujo code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; color: var(--white);
  background: rgba(var(--cs-crema-rgb), .1); border-radius: 4px; padding: .1rem .45rem; margin-bottom: .7rem; }
.cs-flujo h3 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -.02em; line-height: 1.05;
  color: var(--white); margin-bottom: .7rem; }
.cs-flujo p { font-size: .9rem; line-height: 1.5; color: rgba(var(--cs-crema-rgb), .72); }
.cs-sec--dark .cs-eyebrow--amarillo { color: #FFE200; }

/* El estreno: el reel dentro de un móvil, junto a las cifras */
.cs-estreno { width: min(340px, 78vw); justify-self: center; aspect-ratio: 9 / 16; overflow: hidden; background: #111;
  border: clamp(.35rem, .9vw, .55rem) solid #111; border-radius: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 30px 70px -24px rgba(var(--cs-tierra-rgb), .45); }
.cs-split > .cs-estreno { grid-column: 7 / span 5; }
.cs-estreno video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-cifras { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem var(--gut); margin-top: clamp(2rem, 4vw, 3rem); }
.cs-cifras li { border-top: 1.5px solid var(--ink); padding-top: .8rem; }
.cs-cifras b { display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(2.4rem, 4.2vw, 3.8rem); letter-spacing: -.03em; line-height: .95; }
.cs-cifras span { display: block; font-size: .86rem; line-height: 1.4; color: var(--cs-texto); margin-top: .4rem; }
.cs-cifras s { color: var(--soft); text-decoration-thickness: 1px; }

@media (max-width: 1024px) {
  .cs-flujo > li { grid-column: span 6; }
  .cs-flujo > li:nth-child(2)::after { display: none; }
}
@media (max-width: 860px) {
  .cs-split > .cs-estreno { grid-column: 1 / -1; }
  .cs-modelo { grid-template-columns: 1fr; }
  .cs-modelo__rel { flex-direction: row; gap: .5rem; }
  .cs-modelo__rel::after { content: "↓"; }
}
@media (max-width: 600px) {
  .cs-flujo > li { grid-column: 1 / -1; }
  .cs-flujo > li::after { display: none; }
  .cs-sala__tipos { grid-template-columns: 1fr; }
  .cs-sala__colores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El reto: texto (5 columnas) y el logotipo sobre el amarillo de la marca, con marcas de corte */
.cs-cols--fig > :nth-child(2) { grid-column: 4 / span 5; }
.cs-cols--fig > .cs-reto__logo { grid-column: 9 / span 4; }
.cs-reto__logo { position: relative; align-self: start; aspect-ratio: 2 / 1; display: grid; place-items: center;
  padding: 6% 12%; background: #FFE200; border-radius: var(--r-sm); }
.cs-reto__logos { display: grid; grid-template-columns: 100%; place-items: center; width: 100%; }
/* Capa de las marcas de corte inferiores: fuera del flujo para no ocupar fila en la rejilla del panel */
.cs-reto__marcas { position: absolute; inset: 0; pointer-events: none; }
/* Los cinco logos, uno encima de otro, centrados y a la misma altura: cada SVG va recortado
   a su contenido y su ancho sale de su proporción (--ar) frente a la del más apaisado (Palestina). */
.cs-reto__logos img { grid-area: 1 / 1; width: calc(var(--ar) / 3.638 * 100%); height: auto; opacity: 0; animation: 8.6s infinite both; }
/* De la primera edición a la última, cambiando en seco como un sello (con un leve rebote de escala);
   Educación, la vigente, se queda más rato. */
.cs-reto__logos .cs-reto__l1 { animation-name: cuLogo1; }
.cs-reto__logos .cs-reto__l2 { animation-name: cuLogo2; }
.cs-reto__logos .cs-reto__l3 { animation-name: cuLogo3; }
.cs-reto__logos .cs-reto__l4 { animation-name: cuLogo4; }
.cs-reto__logos .cs-reto__l5 { animation-name: cuLogo5; }
@keyframes cuLogo1 { 0% { opacity: 1; transform: scale(1.06); } 1.75% { transform: none; } 16.27% { opacity: 1; } 16.28%, 100% { opacity: 0; } }
@keyframes cuLogo2 { 0%, 16.27% { opacity: 0; } 16.28% { opacity: 1; transform: scale(1.06); } 18.03% { transform: none; } 32.55% { opacity: 1; } 32.56%, 100% { opacity: 0; } }
@keyframes cuLogo3 { 0%, 32.55% { opacity: 0; } 32.56% { opacity: 1; transform: scale(1.06); } 34.31% { transform: none; } 48.83% { opacity: 1; } 48.84%, 100% { opacity: 0; } }
@keyframes cuLogo4 { 0%, 48.83% { opacity: 0; } 48.84% { opacity: 1; transform: scale(1.06); } 50.59% { transform: none; } 65.11% { opacity: 1; } 65.12%, 100% { opacity: 0; } }
@keyframes cuLogo5 { 0%, 65.11% { opacity: 0; } 65.12% { opacity: 1; transform: scale(1.06); } 66.87% { transform: none; } 99.99% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cs-reto__logos img { animation: none; }
  .cs-reto__logos .cs-reto__l5 { opacity: 1; }
}
.cs-reto__logo::before, .cs-reto__logo::after, .cs-reto__marcas::before, .cs-reto__marcas::after {
  content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 0 solid #1A1A1A; }
.cs-reto__logo::before { top: 1rem; left: 1rem; border-top-width: 2px; border-left-width: 2px; }
.cs-reto__logo::after { top: 1rem; right: 1rem; border-top-width: 2px; border-right-width: 2px; }
.cs-reto__marcas::before { bottom: 1rem; left: 1rem; border-bottom-width: 2px; border-left-width: 2px; }
.cs-reto__marcas::after { bottom: 1rem; right: 1rem; border-bottom-width: 2px; border-right-width: 2px; }

/* Diseño «Sala»: las capturas se quedan fijas y cada una se apila sobre la anterior */
@media (min-width: 861px) {
  .cs-stack--apila { row-gap: 14vh; }
  .cs-stack--apila > .cs-shot { position: sticky; top: calc(clamp(6rem, 14vh, 9rem) + var(--i, 0) * 1.6rem); }
  .cs-stack--apila > .cs-shot .cs-browser { box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 -10px 40px -18px rgba(0,0,0,.28), 0 24px 60px -20px rgba(var(--cs-tierra-rgb),.32); }
}
@media (max-width: 860px) {
  .cs-cols--fig > :nth-child(2), .cs-cols--fig > .cs-reto__logo { grid-column: 1 / -1; }
  .cs-reto__logo { aspect-ratio: 16 / 10; padding: 10% 14%; }
}