/* ==========================================================================
   BLIXTOR · css/p/casos.css  (solo /casos y /casos/<caso> · "La obra
   publicada", 9 oct 2026)
   --------------------------------------------------------------------------
   Hilo: cada caso es un sitio publicado que se puede abrir y comprobar. El
   grafismo es la lámina (la captura real del sitio en computadora con el
   celular colgando de su esquina) y su cortinilla: la lámina cambia barriendo
   en la dirección de la lectura. Una familia por sección:
   ÍNDICE  1 titular tipográfico a lo ancho · 2 índice de obra: la
   entradilla y los nombres en 1-5 y una sola lámina fija en 6-12 que cambia
   al señalar o al leer (escritorio con puntero fino); en táctil y pantallas
   angostas, cada caso con su captura de celular · 3 nota sobre las campañas
   · cierre.
   CASO    1 héroe: el H1 a lo ancho; la entradilla y la ficha en 1-5 y la
   lámina en 6-12 · 2 qué tenía que lograr el sitio: titular en 1-4 y el
   encargo a escala de enunciado en 6-12 · 3 qué construimos: las piezas en
   dos columnas, cada una con su filete · 4 decisiones (capítulo vino):
   titular fijo en 1-5 y las decisiones en 7-12 · 5 compruébalo y lecturas ·
   6 siguiente caso: el nombre a escala de cartel y su lámina asomada · cierre.
   La lámina mide lo mismo en el índice y en el héroe (columnas 6-12), así la
   transición entre documentos (View Transitions, al final de esta hoja) la
   hace crecer sin saltos. Retícula de 12 columnas; cortes: >=1200 ·
   961-1199 · 600-960 · <600. Nada se oculta aquí a la espera de JS: sin JS o
   con movimiento reducido todo se ve en su estado final. Ver DESIGN.md,
   "Casos".
   ========================================================================== */

:root{
  --col-gap:clamp(1rem,2vw,2rem);
  /* El celular de la lámina: ancho y cuánto cuelga por debajo de la captura */
  --cx-phone:clamp(84px,10.5vw,158px);
  --cx-drop:clamp(1.5rem,3.2vw,3rem);
}
/* En el teléfono el celular es la captura que se lee: más grande y colgando
   más, para que no tape la parte alta de la captura de computadora */
@media(max-width:599.98px){
  :root{--cx-phone:29vw;--cx-drop:3.75rem}
}

/* Piezas que las otras interiores ya resolvieron, acotadas a esta página
   (candidatas a site.css en la revisión global): WhatsApp como icono en la
   cabecera móvil, CTA compacto por debajo de 380 px y la miga de la página
   actual en línea. */
@media(max-width:560px){
  .site-header .site-header__cta{display:inline-flex!important;width:44px;min-height:44px;padding:0;gap:0}
  .site-header .site-header__cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header .site-header__cta .icon{width:22px;height:22px}
}
@media(max-width:379.98px){
  main .btn--lg{font-size:.875rem;padding-inline:.75rem;gap:.4rem}
}
.breadcrumbs li[aria-current="page"]{display:inline-flex}
/* Sin scroll suave en el documento (WebKit vuelve arriba en cada refresh de
   ScrollTrigger con el foco dentro) */
html{scroll-behavior:auto}

.ci__grid,.cd-hero__grid,.cd-brief__grid,.cd-dec__grid,.cd-proof__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.cd-head{max-width:46rem;margin-bottom:clamp(2.25rem,1.6rem + 2.6vw,4rem)}
.cd-intro{margin-top:1rem;font-size:var(--fs-lead);line-height:1.5;max-width:44ch;color:var(--c-body)}

/* ==========================================================================
   LA LÁMINA · la captura de computadora (site.css .shot) con el celular
   colgando de su esquina inferior izquierda, hacia el texto. La misma pieza
   en el escenario del índice y en el héroe del caso.
   ========================================================================== */
.cx-duo{position:relative;padding-bottom:var(--cx-drop)}
/* La sombra y el radio van en el marco (no en la imagen, como en .shot):
   así la imagen puede acercarse dentro sin que se corte su sombra */
.cx-desk.shot{display:block;overflow:hidden;isolation:isolate;border-radius:var(--r-media);background:var(--surface-3);box-shadow:0 0 0 1px var(--rule-soft),var(--shadow-media)}
.cx-desk.shot img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.cx-duo .cx-phone{position:absolute;left:calc(var(--cx-phone) * -.28);bottom:0;width:var(--cx-phone);z-index:2}
.cx-phone{display:block}
.cx-phone .device{display:block;max-width:none;padding:calc(var(--cx-phone) * .045);border-radius:calc(var(--cx-phone) * .19)}
.cx-phone .device__screen{display:block;border-radius:calc(var(--cx-phone) * .15)}
.cx-phone img{display:block}

/* ==========================================================================
   ÍNDICE · 1. TITULAR · tipográfico y a lo ancho: "Casos reales:" en 400
   y el remate a escala de cartel, en una línea desde 961 px. La entradilla
   abre la columna de la lista, a la altura de la lámina.
   ========================================================================== */
.ci{padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) var(--space-chapter)}
.ci .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.75rem)}
.ci-title{font-size:var(--fs-display);line-height:.95;letter-spacing:-.045em;max-width:none;margin-bottom:clamp(1.75rem,1.25rem + 2vw,3rem)}
.ci-title .deck{margin-bottom:.32em;font-size:max(1.125rem,.32em);line-height:1.2;letter-spacing:-.02em}
.ci-lead{font-size:var(--fs-lead);line-height:1.5;max-width:44ch;color:var(--c-body);margin-bottom:clamp(1.75rem,1.4rem + 1.5vw,2.75rem)}

/* ==========================================================================
   ÍNDICE · 2. ÍNDICE DE OBRA
   Por omisión (táctil y pantallas angostas): cada caso es una fila con su
   captura de celular a la izquierda y el texto a la derecha; en 600-960 y en
   tabletas anchas, en dos columnas. Con escritorio y puntero fino, la lista
   ocupa 1-5 y la lámina del caso activo vive fija en 6-12.
   ========================================================================== */
.ci__grid{align-items:start}
.ci-side{grid-column:1 / -1}
.ci-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--col-gap);border-bottom:1px solid var(--c-rule)}
.ci-item{
  --thumb:clamp(6.5rem,27vw,10rem);
  position:relative;display:grid;grid-template-columns:var(--thumb) minmax(0,1fr);column-gap:clamp(1rem,4vw,1.75rem);
  align-content:start;padding-block:clamp(1.25rem,1rem + 1.2vw,1.9rem);border-top:1px solid var(--c-rule);
}
/* El filete de señal: se traza al pasar (y, con movimiento, al entrar) */
.ci-rule{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--c-signal);transform-origin:0 50%;transform:scaleX(0);transition:transform .55s var(--ease-out)}
.ci-thumb{--cx-phone:var(--thumb);grid-column:1;grid-row:1 / span 4;align-self:start}
.ci-name,.ci-what,.ci-meta{grid-column:2}
.ci-name{font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);font-weight:600;line-height:1.05;letter-spacing:-.035em}
.ci-name a{color:inherit;text-decoration:none}
.ci-name a::after{content:"";position:absolute;inset:0;z-index:1}
.ci-name__t{display:inline-block;transition:transform .45s var(--ease-out)}
.ci-what{margin-top:.55rem;font-size:var(--fs-body);line-height:1.5;color:var(--c-ink);max-width:40ch}
.ci-meta{margin-top:.5rem;font-size:var(--fs-label);font-weight:500;line-height:1.35;letter-spacing:.01em;color:var(--c-muted)}
.ci-arrow{display:none}
.ci-item:focus-within{outline:2px solid var(--c-signal);outline-offset:4px}
.ci-item :focus-visible{outline:none}
@media(hover:hover) and (pointer:fine){
  .ci-item:hover .ci-rule{transform:none}
  .ci-item:hover .ci-name__t{transform:translateX(6px)}
}
.ci-stage{display:none}
@media(min-width:600px){
  .ci-list{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0}
  .ci-item{--thumb:clamp(6.5rem,16vw,9.5rem)}
}

/* Escritorio con puntero fino: lista en 1-5 y lámina fija en 6-12 */
@media(min-width:961px) and (hover:hover) and (pointer:fine){
  .ci-side{grid-column:1 / span 5}
  .ci-list{grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--c-rule)}
  .ci-item{grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding-block:clamp(1.25rem,.9rem + .8vw,1.75rem)}
  .ci-thumb{display:none}
  .ci-name,.ci-what,.ci-meta{grid-column:1}
  .ci-name{font-size:clamp(1.75rem,1.05rem + 1.5vw,2.75rem);letter-spacing:-.04em;line-height:1}
  .ci-what{font-size:var(--fs-small);color:var(--c-body)}
  .ci-arrow{display:block;grid-column:2;grid-row:1;align-self:center;width:1.35rem;height:1.35rem;color:var(--c-signal);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .45s var(--ease-out)}
  /* La fila activa (la de la lámina): filete de señal, nombre corrido y flecha */
  .ci-item.is-on .ci-rule{transform:none}
  .ci-item.is-on .ci-name__t{transform:translateX(6px)}
  .ci-item.is-on .ci-arrow{opacity:1;transform:none}
  .ci-stage{display:block;grid-column:6 / -1;position:sticky;top:calc(var(--header-h) + 2rem)}
}

/* El escenario: las seis láminas apiladas en la misma celda. La activa
   ("on") entra barriendo y cubre a la anterior ("was"); las demás esperan
   recortadas del lado por el que van a entrar: desde abajo si están más
   abajo en la lista ("after"), desde arriba si están más arriba ("before").
   El estado lo pone js/site.js (sección 10); sin JS se ve la primera.
   Cada lámina lleva el fondo de la página (la nueva tapa entera a la
   anterior, pie incluido) y el sitio del celular que cuelga a la izquierda;
   el recorte visible sobra por los lados y por abajo para no cortar las
   sombras. */
.ci-stage__frame{display:grid}
.ci-layer{
  --open:inset(-2rem -3rem -4rem -3rem);
  grid-area:1 / 1;padding-left:calc(var(--cx-phone) * .28);background:var(--c-bg);
  visibility:hidden;clip-path:inset(calc(100% + 4rem) -3rem -4rem -3rem);
}
.ci-layer[data-l="before"]{clip-path:inset(-2rem -3rem calc(100% + 2rem) -3rem)}
.ci-layer[data-l="was"]{visibility:visible;z-index:1;clip-path:var(--open)}
.ci-layer[data-l="on"]{visibility:visible;z-index:2;clip-path:var(--open);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.ci-layer .cx-desk img{transform:scale(1.04);transform-origin:50% 30%}
.ci-layer[data-l="on"] .cx-desk img,.ci-layer[data-l="was"] .cx-desk img{transform:none;transition:transform 1.1s var(--ease-out)}
.ci-layer__cap{margin-top:.9rem;padding-left:calc(var(--cx-phone) * .78);text-align:right;font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted)}

/* ÍNDICE · 3. NOTA sobre las campañas (site.css .note) */
.ci-note{margin-top:clamp(2.5rem,2rem + 2vw,4rem)}

/* ==========================================================================
   CASO · 1. HÉROE · el H1 de siempre (el nombre del cliente en 400, en su
   propio renglón, y lo que hace su sitio en 600: una sola frase) a lo
   ancho. Debajo, la entradilla y la ficha en 1-5 y la lámina en 6-12. En
   pantallas angostas la lámina va después de la entradilla y antes de la
   ficha: el trabajo se ve antes que los datos.
   ========================================================================== */
.cd-hero{padding-block:clamp(.75rem,.4rem + 1.2vw,1.5rem) clamp(2.5rem,1.75rem + 3vw,4.5rem)}
.cd-hero .breadcrumbs{margin-bottom:clamp(1.25rem,.75rem + 2vw,2.75rem)}
.cd-hero__grid{grid-template-rows:auto auto 1fr;row-gap:clamp(1.75rem,1.25rem + 2vw,3rem);align-items:start}
.cd-hero__title{grid-column:1 / -1;grid-row:1;font-size:var(--fs-h1);line-height:1;letter-spacing:-.04em;max-width:28ch;text-wrap:balance}
.cd-hero__title .deck{display:block;margin-bottom:.3em;font-size:max(1.25rem,.42em);line-height:1.15;letter-spacing:-.02em}
.cd-hero__lead{grid-column:1 / span 5;grid-row:2;font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:40ch}
.cd-hero__work{grid-column:6 / -1;grid-row:2 / span 2;margin:0;padding-left:calc(var(--cx-phone) * .28)}
.cd-hero__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1.25rem;margin-top:.9rem;padding-left:calc(var(--cx-phone) * .78);font-size:var(--fs-small);color:var(--c-muted)}
.cd-hero__cap .link{display:inline-flex;align-items:center;min-height:40px}

/* La ficha: definición con filetes, en dos columnas */
.cd-facts{grid-column:1 / span 5;grid-row:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);border-bottom:1px solid var(--c-rule)}
.cd-facts > div{padding-block:.8rem .9rem;border-top:1px solid var(--c-rule)}
.cd-facts__site{grid-column:1 / -1}
.cd-facts dt{font-size:var(--fs-label);font-weight:500;letter-spacing:.01em;color:var(--c-muted)}
.cd-facts dd{margin-top:.2rem;font-family:var(--font-display);font-size:1.0625rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--c-ink)}
.cd-facts dd a{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.cd-facts dd a:hover{text-decoration-color:currentColor}

@media(max-width:960.98px){
  .cd-hero__grid{grid-template-rows:none}
  .cd-hero__lead,.cd-hero__work,.cd-facts{grid-column:1 / -1}
  .cd-hero__work{grid-row:3}
  .cd-facts{grid-row:4}
}
@media(max-width:599.98px){
  .cd-hero__cap{padding-left:0}
}

/* ==========================================================================
   CASO · 2. QUÉ TENÍA QUE LOGRAR EL SITIO · el titular en 1-4 y el encargo
   en 6-12: la primera frase a escala de enunciado, la segunda de entradilla.
   ========================================================================== */
.cd-brief__grid{align-items:start;row-gap:1.5rem}
.cd-brief__title{grid-column:1 / span 4;font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem)}
.cd-brief__body{grid-column:6 / -1}
.cd-brief__first{
  font-family:var(--font-display);font-size:clamp(1.4375rem,1.1rem + 1.35vw,2.375rem);font-weight:500;
  line-height:1.18;letter-spacing:-.025em;color:var(--c-ink);max-width:30ch;text-wrap:balance;
}
.cd-brief__then{margin-top:clamp(1.25rem,1rem + 1vw,2rem);font-size:var(--fs-lead);line-height:1.5;color:var(--c-body);max-width:46ch}
@media(max-width:960.98px){
  .cd-brief__title,.cd-brief__body{grid-column:1 / -1}
}

/* ==========================================================================
   CASO · 3. QUÉ CONSTRUIMOS · las piezas en dos columnas; cada una con su
   filete de tinta, que con movimiento se traza al entrar.
   ========================================================================== */
.cd-pieces{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(2rem,1.5rem + 2vw,3.25rem)}
.cd-piece,.cd-decision{position:relative;padding-top:clamp(1.1rem,.9rem + .8vw,1.6rem)}
.cd-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--c-ink);transform-origin:0 50%;transform:scaleX(var(--r,1))}
.cd-piece h3{font-size:var(--fs-h3);max-width:26ch}
.cd-piece p{margin-top:.6rem;max-width:46ch;color:var(--c-body)}
@media(max-width:699.98px){
  .cd-pieces{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   CASO · 4. DECISIONES · capítulo vino (el único a mitad de página): el
   titular y su frase fijos en 1-5, las decisiones en 7-12.
   ========================================================================== */
.cd-dec__grid{align-items:start;row-gap:2.5rem}
.cd-dec__head{grid-column:1 / span 5}
.cd-dec__head h2{max-width:14ch}
.cd-dec__list{grid-column:7 / -1;list-style:none;display:grid;row-gap:clamp(1.75rem,1.4rem + 1.5vw,2.75rem)}
.cd-decision .cd-rule{background:var(--c-rule)}
.cd-decision h3{font-size:var(--fs-h3);color:var(--c-ink)}
.cd-decision p{margin-top:.55rem;max-width:48ch;color:var(--c-body)}
@media(min-width:961px){
  .cd-dec__head{position:sticky;top:calc(var(--header-h) + 2rem)}
}
@media(max-width:960.98px){
  .cd-dec__head,.cd-dec__list{grid-column:1 / -1}
}

/* ==========================================================================
   CASO · 5. COMPRUÉBALO Y LECTURAS · a la izquierda (1-6) la frase de la
   prueba y los dos enlaces para comprobar (el sitio y PageSpeed Insights);
   si data/pagespeed.json tiene una medición real, site.js la pinta aquí. A
   la derecha (8-12), el servicio y las lecturas.
   ========================================================================== */
.cd-proof__grid{align-items:start;row-gap:3rem}
.cd-proof__main{grid-column:1 / span 6}
.cd-proof__main h2{font-size:clamp(1.75rem,1.3rem + 1.8vw,2.75rem)}
.cd-proof__lead{
  margin-top:1rem;max-width:24ch;font-family:var(--font-display);font-size:clamp(1.3125rem,1.05rem + 1.05vw,2rem);
  font-weight:400;line-height:1.25;letter-spacing:-.02em;color:var(--c-ink);
}
.cd-proof__links{list-style:none;margin-top:clamp(1.5rem,1.2rem + 1vw,2.25rem);border-top:1px solid var(--c-rule)}
.cd-proof__links li{border-bottom:1px solid var(--c-rule)}
.cd-proof__a{
  display:flex;align-items:center;gap:.75rem;min-height:56px;padding-block:.75rem;
  font-weight:600;color:var(--c-link);text-decoration:none;
}
.cd-proof__a .icon{width:1.25rem;height:1.25rem;color:var(--c-signal);flex:none}
.cd-proof__a span{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding-bottom:.1em;transition:background-size .35s var(--ease-out)}
.cd-proof__a:hover span{background-size:100% 1px}
.cd-proof__note{margin-top:.9rem;font-size:var(--fs-small);color:var(--c-muted);max-width:48ch}
.cd-psi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem 1.25rem;align-items:end;margin-top:1.75rem;padding-top:1.25rem;border-top:2px solid var(--c-ink)}
.cd-psi__num{font-family:var(--font-display);font-size:clamp(3rem,2rem + 4vw,5rem);font-weight:500;line-height:.85;letter-spacing:-.05em;color:var(--c-signal);font-variant-numeric:tabular-nums}
.cd-psi__num small{margin-left:.35rem;font-family:var(--font-body);font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--c-muted)}
.cd-psi__label{font-weight:600;color:var(--c-ink)}
.cd-psi small{display:block;margin-top:.2rem;font-size:var(--fs-label);color:var(--c-muted)}
.cd-proof__more{grid-column:8 / -1;padding-top:.4rem}
.cd-proof__h{font-size:var(--fs-h3);font-weight:500;padding-bottom:.85rem;border-bottom:1px solid var(--c-ink)}
.cd-proof__more p{margin-top:1rem;max-width:46ch;color:var(--c-body)}
@media(max-width:960.98px){
  .cd-proof__main,.cd-proof__more{grid-column:1 / -1}
}

/* ==========================================================================
   CASO · 6. SIGUIENTE CASO · todo el bloque es el enlace: el rótulo, el
   nombre a escala de cartel y lo que construimos en 1-6; la lámina del
   siguiente caso se asoma en 7-12 (la mitad de arriba) y sube al señalarla.
   Debajo, el caso anterior y el índice.
   ========================================================================== */
.cd-next{padding-block:clamp(3rem,2.25rem + 3vw,5.5rem) clamp(3.5rem,2.5rem + 4vw,6.5rem);border-top:1px solid var(--c-rule)}
.cd-next__link{
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);
  align-items:end;color:inherit;text-decoration:none;
}
.cd-next__label,.cd-next__name,.cd-next__what{grid-column:1 / span 6}
.cd-next__label{grid-row:1;font-size:var(--fs-label);font-weight:600;letter-spacing:.01em;color:var(--c-signal)}
.cd-next__name{grid-row:2;margin-top:.6rem;font-family:var(--font-display);font-size:var(--fs-display);font-weight:600;line-height:.95;letter-spacing:-.045em;color:var(--c-ink);text-wrap:balance}
.cd-next__t{display:inline-block;transition:transform .45s var(--ease-out)}
.cd-next__what{grid-row:3;margin-top:1rem;font-size:var(--fs-lead);line-height:1.45;color:var(--c-body);max-width:34ch}
/* La ventana (la mitad de arriba de la lámina) es la que crece en la
   transición: su propio recorte va en la captura del documento */
.cd-next__shot{
  grid-column:7 / -1;grid-row:1 / span 3;align-self:end;display:block;
  aspect-ratio:16 / 6.2;overflow:hidden;border-radius:var(--r-media) var(--r-media) 0 0;
  background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--rule-soft);
}
.cd-next__shot .cx-desk.shot{border-radius:0;box-shadow:none;background:none}
.cd-next__shot img{transform-origin:50% 0;transition:transform .7s var(--ease-out)}
.cd-next__arrow{position:absolute;right:0;top:0;width:1.75rem;height:1.75rem;color:var(--c-signal);transition:transform .45s var(--ease-out)}
.cd-next__link:focus-visible{outline:2px solid var(--c-signal);outline-offset:8px;border-radius:2px}
@media(hover:hover) and (pointer:fine){
  .cd-next__link:hover .cd-next__t{transform:translateX(8px)}
  .cd-next__link:hover .cd-next__arrow{transform:translateX(4px)}
  .cd-next__link:hover .cd-next__shot img{transform:scale(1.02)}
}
.cd-next__more{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(2rem,1.5rem + 2vw,3rem);padding-top:1.25rem;border-top:1px solid var(--c-rule);font-size:var(--fs-small)}
.cd-next__prev{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--c-muted);text-decoration:none;font-weight:500}
.cd-next__prev .icon{width:1rem;height:1rem;transform:scaleX(-1);transition:transform .35s var(--ease-out)}
.cd-next__prev:hover{color:var(--c-ink)}
.cd-next__prev:hover .icon{transform:scaleX(-1) translateX(4px)}
.cd-next__more .link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:960.98px){
  .cd-next__label,.cd-next__name,.cd-next__what,.cd-next__shot{grid-column:1 / -1}
  .cd-next__shot{grid-row:4;margin-top:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}
  .cd-next__name{font-size:var(--fs-h1)}
}

/* ==========================================================================
   TRANSICIÓN ENTRE DOCUMENTOS · al abrir un caso desde el índice (o el
   siguiente caso), su lámina crece hasta el héroe y el resto de la página se
   funde. View Transitions entre documentos: solo CSS, sin descargar nada y
   solo sin movimiento reducido; las dos páginas tienen que pedirla, así que
   solo pasa entre páginas de casos. El héroe del caso lleva los nombres
   siempre; en la página de origen, js/site.js (sección 11) se los pone al
   hacer clic solo a la lámina que se abre. Navegadores sin soporte navegan
   como siempre.
   ========================================================================== */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .cd-hero__desk{view-transition-name:caso-desk}
  .cd-hero__phone{view-transition-name:caso-phone}
  /* Al abrir el siguiente caso, la lámina que crece es la del bloque */
  html.vt-next .cd-hero__desk,html.vt-next .cd-hero__phone{view-transition-name:none}
}
::view-transition-group(root){animation-duration:.3s}
::view-transition-group(caso-desk),::view-transition-group(caso-phone){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
/* La lámina asomada se abre hacia abajo en lugar de estirarse */
::view-transition-group(caso-desk){overflow:clip}

/* ==========================================================================
   IMPRESIÓN · todo en su estado final aunque el JS haya dejado estilos
   ========================================================================== */
@media print{
  .ci-stage{display:none!important}
  .ci-thumb{display:block!important}
  .cd-rule,.ci-rule{transform:none!important}
  .cd-dec__head{position:static!important}
}