/* ==========================================================================
   mono.creative — CSS común de los case studies (casestudy_*.html)
   · Un solo archivo para todas las páginas (cacheable). Orden = cascada original.
   · Los bloques marcados SHARED:CSS-* son copia literal del home (index.html): NO
     editarlos aquí; se regeneran con  python "build/sync-shared.py".
   · Lo específico de cada caso (imágenes data-asset) va en un <style> corto
     dentro de su página.
   ========================================================================== */
/* ==========================================================================
   1 · TOKENS DEL HOME (márgenes --m / --mnav, pares dark→light, tokens de
       header/botones/footer). Copia literal de index.html.
   ========================================================================== */
/* SHARED:CSS-TOKENS */
:root{
  --sans:'Plus Jakarta Sans',sans-serif; --mono:'Space Mono',monospace;
  --sbw:0px; --m:24px; --mnav:24px;
  --fade-p:0;
  /* pares dark → light */
  --bg-d:#101913; --bg-l:#f8fbf9;
  --txt-d:#ffffff; --txt-l:#232825;
  --h3c-d:#ffffff; --h3c-l:#101913;
  --accent-d:#b8ff00; --accent-l:#9bd700;
  --lime400-d:#9bd700; --lime400-l:#9bd700;
  --body-d:#bec8c2; --body-l:#264532;
  --body-strong-d:#eef4f0; --body-strong-l:#264532;
  --muted-d:#87918b; --muted-l:#414b45;
  --sect-d:#ffffff; --sect-l:#2c513a;
  --cap-strong-d:#d9e3dd; --cap-strong-l:#414b45;
  --cap-strong2-d:#d9e3dd; --cap-strong2-l:#2c513a;
  --cap-weak-d:#87918b; --cap-weak-l:#87918b;
  --border-d:#414b45; --border-l:#bec8c2;
  --capsule-text-d:#ffffff; --capsule-text-l:#264532;
  --surface-showcase-d:#101913; --surface-showcase-l:#eef4f0;
  --surface-showcase-2-d:rgba(21,43,29,.4); --surface-showcase-2-l:transparent;
  --bezel-d:#264532; --bezel-l:#d9e3dd;
  --chip-fill-d:rgba(16,25,19,.4); --chip-fill-l:transparent;
  --chip-bd-on-d:#5f8300; --chip-bd-on-l:#7baa00;
  --chip-bd-off-d:#414b45; --chip-bd-off-l:#bec8c2;
  --chip-tx-on-d:#eef4f0; --chip-tx-on-l:#5f8300;
  --chip-tx-off-d:#eef4f0; --chip-tx-off-l:#264532;
  --team-bd-d:#414b45; --team-bd-l:#bec8c2;
  --team-name-d:#eef4f0; --team-name-l:#101913;
  --team-label-d:#87918b; --team-label-l:#87918b;
  --team-lead-d:#ffffff; --team-lead-l:#101913;
  --link-card-d:#9bd700; --link-card-l:#7baa00;
  --sticker-d:#eef4f0; --sticker-l:#414b45;
  --sticker-lime-d:#101913; --sticker-lime-l:#232825;
  --cta-h-d:#eef4f0; --cta-h-l:#101913;
  --cta-b-d:#bec8c2; --cta-b-l:#87918b;
  --email-d:#b8ff00; --email-l:#7baa00;
  --footer-legal-d:#87918b; --footer-legal-l:#232825;
  --nav-link-d:#ffffff; --nav-link-l:#232825;
  --nav-link-on-d:#9bd700; --nav-link-on-l:#7baa00;
  --btn1-fill-d:rgba(16,25,19,0); --btn1-fill-l:rgba(255,255,255,0);
  --btn1-stroke-d:#414b45; --btn1-stroke-l:#bec8c2;
  --btn1-arrow-d:#414b45; --btn1-arrow-l:#bec8c2;
  --btn1-label-d:#ffffff; --btn1-label-l:#414b45;
  --btn2-fill-d:#b8ff00; --btn2-fill-l:#9bd700;
  --btn2-stroke-d:#b8ff00; --btn2-stroke-l:#9bd700;
  --btn2-arrow-d:#101913; --btn2-arrow-l:#232825;
  --btn2-label-d:#101913; --btn2-label-l:#232825;
  --btn3-fill-d:#101913; --btn3-fill-l:#9bd700;
  --btn3-stroke-d:#414b45; --btn3-stroke-l:#9bd700;
  --btn3-arrow-d:#414b45; --btn3-arrow-l:#232825;
  --btn3-label-d:#ffffff; --btn3-label-l:#232825;
  --g1-d:.192; --g1-l:0;
  --g2-d:.192; --g2-l:0;
  --g3-d:.144; --g3-l:0;
  --g4-d:.072; --g4-l:0;
  --g5-d:.096; --g5-l:0;
  --g6-d:.032; --g6-l:0;
  --g7-d:.40; --g7-l:.16;
  --g8-d:.20; --g8-l:0;
  --g9-d:.20; --g9-l:0;
  --g10-d:.26; --g10-l:0;
}
/* Cruce ligado al scroll — tokens derivados con selector EXTENDIDO.
   En :root se resuelven con el --fade-p del documento (el camino de desktop).
   Y ADEMÁS se re-derivan en .bgfade, .about, .team, .more, .cta y .foot con el
   --fade-p propio de cada uno: es la base del cruce por ámbitos de móvil (ver
   el bloque @media de .bgfade más abajo). En desktop esos ámbitos heredan el
   mismo --fade-p del documento, así que re-derivar da valores idénticos: cero
   cambio visual.
   OJO: este bloque va SEPARADO del :root{ de arriba a propósito:
   · build-standalone.py ancla la inyección de assets en el literal
     "<style>\n:root{" — cambiarle el selector al bloque de arriba aborta el build;
   · --fade-p:0, --m, --mnav y --sbw deben declararse SOLO en :root: si un
     ámbito los re-declarara, pisaría el valor heredado del documento y
     rompería el fade de desktop y el layout responsive. */
:root,.bgfade,.about,.team,.more,.cta,.foot{
  /* progreso remapeado del TEXTO: el fondo cruza con --fade-p en todo el
     tramo, pero las letras esperan hasta p=.42 y cruzan rápido (ventana de
     .16). Así nunca acompañan al fondo por la zona de gris medio. */
  --fp-txt:clamp(0,calc((var(--fade-p,0) - .42) / .16),1);
  --bg:color-mix(in oklab,var(--bg-l) calc(var(--fade-p,0) * 100%),var(--bg-d));
  --txt:color-mix(in oklab,var(--txt-l) calc(var(--fp-txt) * 100%),var(--txt-d));
  --h3c:color-mix(in oklab,var(--h3c-l) calc(var(--fp-txt) * 100%),var(--h3c-d));
  --accent:color-mix(in oklab,var(--accent-l) calc(var(--fade-p,0) * 100%),var(--accent-d));
  --lime400:color-mix(in oklab,var(--lime400-l) calc(var(--fade-p,0) * 100%),var(--lime400-d));
  --body:color-mix(in oklab,var(--body-l) calc(var(--fp-txt) * 100%),var(--body-d));
  --body-strong:color-mix(in oklab,var(--body-strong-l) calc(var(--fp-txt) * 100%),var(--body-strong-d));
  --muted:color-mix(in oklab,var(--muted-l) calc(var(--fp-txt) * 100%),var(--muted-d));
  --sect:color-mix(in oklab,var(--sect-l) calc(var(--fp-txt) * 100%),var(--sect-d));
  --cap-strong:color-mix(in oklab,var(--cap-strong-l) calc(var(--fp-txt) * 100%),var(--cap-strong-d));
  --cap-strong2:color-mix(in oklab,var(--cap-strong2-l) calc(var(--fp-txt) * 100%),var(--cap-strong2-d));
  --cap-weak:color-mix(in oklab,var(--cap-weak-l) calc(var(--fade-p,0) * 100%),var(--cap-weak-d));
  --border:color-mix(in oklab,var(--border-l) calc(var(--fade-p,0) * 100%),var(--border-d));
--hair:1px;   /* fijo: interpolarlo forzaba layout del documento en cada frame del cruce */
  --capsule-text:color-mix(in oklab,var(--capsule-text-l) calc(var(--fp-txt) * 100%),var(--capsule-text-d));
  --surface-showcase:color-mix(in oklab,var(--surface-showcase-l) calc(var(--fade-p,0) * 100%),var(--surface-showcase-d));
  --surface-showcase-2:color-mix(in oklab,var(--surface-showcase-2-l) calc(var(--fade-p,0) * 100%),var(--surface-showcase-2-d));
  --bezel:color-mix(in oklab,var(--bezel-l) calc(var(--fade-p,0) * 100%),var(--bezel-d));
  --chip-fill:color-mix(in oklab,var(--chip-fill-l) calc(var(--fade-p,0) * 100%),var(--chip-fill-d));
  --chip-bd-on:color-mix(in oklab,var(--chip-bd-on-l) calc(var(--fade-p,0) * 100%),var(--chip-bd-on-d));
  --chip-bd-off:color-mix(in oklab,var(--chip-bd-off-l) calc(var(--fade-p,0) * 100%),var(--chip-bd-off-d));
  --chip-tx-on:color-mix(in oklab,var(--chip-tx-on-l) calc(var(--fade-p,0) * 100%),var(--chip-tx-on-d));
  --chip-tx-off:color-mix(in oklab,var(--chip-tx-off-l) calc(var(--fade-p,0) * 100%),var(--chip-tx-off-d));
  --team-bd:color-mix(in oklab,var(--team-bd-l) calc(var(--fade-p,0) * 100%),var(--team-bd-d));
  --team-name:color-mix(in oklab,var(--team-name-l) calc(var(--fp-txt) * 100%),var(--team-name-d));
  --team-label:color-mix(in oklab,var(--team-label-l) calc(var(--fade-p,0) * 100%),var(--team-label-d));
  --team-lead:color-mix(in oklab,var(--team-lead-l) calc(var(--fp-txt) * 100%),var(--team-lead-d));
  --link-card:color-mix(in oklab,var(--link-card-l) calc(var(--fade-p,0) * 100%),var(--link-card-d));
  --sticker:color-mix(in oklab,var(--sticker-l) calc(var(--fp-txt) * 100%),var(--sticker-d));
  --sticker-lime:color-mix(in oklab,var(--sticker-lime-l) calc(var(--fade-p,0) * 100%),var(--sticker-lime-d));
  --cta-h:color-mix(in oklab,var(--cta-h-l) calc(var(--fp-txt) * 100%),var(--cta-h-d));
  --cta-b:color-mix(in oklab,var(--cta-b-l) calc(var(--fp-txt) * 100%),var(--cta-b-d));
  --email:color-mix(in oklab,var(--email-l) calc(var(--fade-p,0) * 100%),var(--email-d));
  --footer-legal:color-mix(in oklab,var(--footer-legal-l) calc(var(--fp-txt) * 100%),var(--footer-legal-d));
  --nav-link:color-mix(in oklab,var(--nav-link-l) calc(var(--fp-txt) * 100%),var(--nav-link-d));
  --nav-link-on:color-mix(in oklab,var(--nav-link-on-l) calc(var(--fade-p,0) * 100%),var(--nav-link-on-d));
  --btn1-fill:color-mix(in oklab,var(--btn1-fill-l) calc(var(--fade-p,0) * 100%),var(--btn1-fill-d));
  --btn1-stroke:color-mix(in oklab,var(--btn1-stroke-l) calc(var(--fade-p,0) * 100%),var(--btn1-stroke-d));
  --btn1-arrow:color-mix(in oklab,var(--btn1-arrow-l) calc(var(--fade-p,0) * 100%),var(--btn1-arrow-d));
  --btn1-label:color-mix(in oklab,var(--btn1-label-l) calc(var(--fp-txt) * 100%),var(--btn1-label-d));
  --btn2-fill:color-mix(in oklab,var(--btn2-fill-l) calc(var(--fade-p,0) * 100%),var(--btn2-fill-d));
  --btn2-stroke:color-mix(in oklab,var(--btn2-stroke-l) calc(var(--fade-p,0) * 100%),var(--btn2-stroke-d));
  --btn2-arrow:color-mix(in oklab,var(--btn2-arrow-l) calc(var(--fade-p,0) * 100%),var(--btn2-arrow-d));
  --btn2-label:color-mix(in oklab,var(--btn2-label-l) calc(var(--fade-p,0) * 100%),var(--btn2-label-d));
  --btn3-fill:color-mix(in oklab,var(--btn3-fill-l) calc(var(--fade-p,0) * 100%),var(--btn3-fill-d));
  --btn3-stroke:color-mix(in oklab,var(--btn3-stroke-l) calc(var(--fade-p,0) * 100%),var(--btn3-stroke-d));
  --btn3-arrow:color-mix(in oklab,var(--btn3-arrow-l) calc(var(--fade-p,0) * 100%),var(--btn3-arrow-d));
  --btn3-label:color-mix(in oklab,var(--btn3-label-l) calc(var(--fade-p,0) * 100%),var(--btn3-label-d));
  --g1:calc(var(--g1-d) + (var(--g1-l) - var(--g1-d)) * var(--fade-p,0));
  --g2:calc(var(--g2-d) + (var(--g2-l) - var(--g2-d)) * var(--fade-p,0));
  --g3:calc(var(--g3-d) + (var(--g3-l) - var(--g3-d)) * var(--fade-p,0));
  --g4:calc(var(--g4-d) + (var(--g4-l) - var(--g4-d)) * var(--fade-p,0));
  --g5:calc(var(--g5-d) + (var(--g5-l) - var(--g5-d)) * var(--fade-p,0));
  --g6:calc(var(--g6-d) + (var(--g6-l) - var(--g6-d)) * var(--fade-p,0));
  --g7:calc(var(--g7-d) + (var(--g7-l) - var(--g7-d)) * var(--fade-p,0));
  --g8:calc(var(--g8-d) + (var(--g8-l) - var(--g8-d)) * var(--fade-p,0));
  --g9:calc(var(--g9-d) + (var(--g9-l) - var(--g9-d)) * var(--fade-p,0));
  --g10:calc(var(--g10-d) + (var(--g10-l) - var(--g10-d)) * var(--fade-p,0));
}
@media (min-width:768px){:root{--m:calc(24px + (100vw - var(--sbw) - 768px)*.2485119);--mnav:calc(24px + (100vw - var(--sbw) - 768px)*.1428571)}}
@media (min-width:1440px){:root{--m:calc(191px + (100vw - var(--sbw) - 1440px)*.0591667);--mnav:calc(120px - (100vw - var(--sbw) - 1440px)*.075)}}
/* columna central (.wrap): tope de +30% sobre el default de 1440px (1058px -> 1375.4px),
   alcanzado a los 1800px de viewport. Desde ahí --m crece 1:1 con el viewport (rate .5):
   el wrap queda fijo en 1375.4px y centrado a cualquier ancho. .page no tiene tope de
   ancho (lo que va a sangre llega al borde del viewport); por eso desde 1920px --mnav
   también crece 1:1 y el header se queda donde estaba en 1920 (84px del marco centrado). */
@media (min-width:1800px){:root{--m:calc(212.3px + (100vw - var(--sbw) - 1800px)*.5)}}
@media (min-width:1920px){:root{--mnav:calc(84px + (100vw - var(--sbw) - 1920px)*.5)}}
/* TEMA (2026-10-03): ya no hay cruce dark→light con el scroll. El tema es fijo
   y lo cambia el toggle del header (data-theme en <html>): dark = --fade-p 0,
   light = --fade-p 1. Todos los tokens derivados cuelgan de --fade-p, así que
   la interpolación sigue viviendo en UN solo sitio: @property registra
   --fade-p como número y el cambio de tema lo anima el propio CSS. */
@property --fade-p{syntax:'<number>';inherits:true;initial-value:0}
:root[data-theme="light"]{--fade-p:1}
:root{transition:--fade-p .45s ease}
@media (prefers-reduced-motion:reduce){:root{transition:none}}
/* /SHARED:CSS-TOKENS */
/* Tema fijo por data-theme en <html> (light por defecto en el case study).
   --fade-p y su transición vienen del bloque de tokens del home. */

/* ==========================================================================
   2 · TOKENS DEL CASE STUDY (Figma "Case studies", 6610:6735)
       --bg / --accent / --border salen de los tokens del home (mismos valores).
   ========================================================================== */
:root{
  --lime-300:#b8ff00; --lime-400:#9bd700; --lime-500:#7baa00; --lime-600:#5f8300;
  --glow:#9de14a; --qa:#ff0000;
  --forest-600:#2c513a; --forest-700:#264532; --forest-800:#152b1d; --forest-900:#101913;
  --neutral-0:#ffffff; --neutral-50:#eef4f0; --neutral-100:#d9e3dd; --neutral-200:#bec8c2;
  --neutral-400:#87918b; --neutral-600:#414b45; --neutral-900:#232825;

  --text:var(--neutral-900);
  --text-strong:var(--forest-900);
  --text-hero-plain:var(--neutral-900);
  --text-title:var(--forest-600);
  --text-muted:var(--neutral-400);
  --accent-mono:var(--lime-500);
  --dot:var(--forest-600);
  --media:var(--neutral-100);
  --media-inner:var(--neutral-200);
  --before:#b3102e; --after:#0c7354;
  --toggle:var(--forest-600);

  --ff-sans:'Plus Jakarta Sans',sans-serif;
  --ff-mono:'Space Mono',monospace;
  --t-hero:        500 48px/1.1 var(--ff-sans);
  --t-section:     500 40px/1.2 var(--ff-sans);
  --t-statement:   500 32px/1.6 var(--ff-sans);
  --t-lead:        500 30px/1.5 var(--ff-sans);
  --t-item-md:     500 24px/1 var(--ff-sans);
  --t-zigzag:      500 26px/1.2 var(--ff-sans);
  --t-item-sm:     600 20px/1.24 var(--ff-sans);
  --t-body-m:      400 16px/1.7 var(--ff-sans);
  --t-meta:        400 15px/1.7 var(--ff-sans);
  --t-body-s:      400 14px/1.7 var(--ff-sans);
  --t-meta-strong: 600 14px/1.7 var(--ff-sans);
  --t-mono-index-m:400 16px/24px var(--ff-mono);
  --t-mono-index-s:400 14px/24px var(--ff-mono);
  --t-mono-label:  400 13px/24px var(--ff-mono);
  --t-mono-tag:    400 13px/1.5 var(--ff-mono);
}
:root[data-theme="dark"]{
  --text:var(--neutral-100);
  --text-strong:var(--neutral-0);
  --text-hero-plain:var(--neutral-0);
  --text-title:var(--neutral-50);
  --text-muted:var(--neutral-400);
  --accent-mono:var(--lime-300);
  --dot:var(--lime-300);
  --media:var(--forest-800);
  --media-inner:var(--forest-700);
  --before:#ff5a6e; --after:#35d59a;
  --toggle:var(--lime-300);
}

/* ==========================================================================
   3 · BASE (igual que el home: sin barra de scroll, .page sin tope de ancho)
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease}
html,body{background:var(--bg);scrollbar-width:none;-ms-overflow-style:none}
html{-webkit-text-size-adjust:100%}   /* (2026-10-21) iPhone en horizontal: Safari no agranda el texto (titulares en nowrap) */
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{color:var(--text);font-family:var(--ff-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page,.page *{outline-color:transparent;-webkit-tap-highlight-color:transparent}
.page *:focus,.page *:focus-visible{outline:none}
.page :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block;border:0}
i{font-style:italic}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
.page{container-type:inline-size;position:relative;overflow:clip;background:var(--bg)}
/* salida al home: mismo fundido que el home al abrir una entry (ver js/case-study.js) */
html.mc-leaving .page{opacity:0;transition:opacity .28s ease-out}
.wrap{padding-inline:var(--m)}
.media{background-color:var(--media);background-size:cover;background-position:center;background-repeat:no-repeat}
/* vídeo en un hueco .media (Figma FILL = cover center); el poster va como fondo del [data-asset] */
.vid{position:relative;overflow:hidden}
.vid>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
/* mobile: pieza más ancha que el viewport, alineada a la izquierda con offset (tamaño/offset en la página).
   .hs = tira con scroll horizontal (annotation Dev de Figma); .xc = recorte fijo */
@media (max-width:767.98px){
  .hs,.xc{width:100cqw;overflow:hidden}
  .hs{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;display:grid}   /* grid: celda de la barra (abajo); fijo desde la carga para no rehacer la caja (y su scrollLeft) al activarla */
  .hs::-webkit-scrollbar{display:none}
  :is(.hs,.xc)>.media{flex:none}
  .wrap :is(.hs,.xc){margin-left:calc(-1 * var(--m))}
  /* el margin-left negativo de Figma se mantiene: la tira arranca ahí y no se puede volver más a la izquierda (2026-10-19) */
  /* barra de scroll propia (2026-10-17; .hs-sb la pone js/case-study.js si la tira desborda): track ::before y
     thumb ::after en una 2a fila del grid, sticky a la izquierda (no viajan con la pieza: su celda mide lo que la
     pieza), 6 px montados sobre el borde inferior (alto del bloque igual). Ancho del thumb = --hs-w (JS); posición
     por scroll-timeline (compositor) o, sin soporte, --hs-x (JS). Entra con la imagen (ir-in / ir-done) */
  .hs.hs-sb::before,.hs.hs-sb::after{content:"";grid-area:2/1;position:sticky;left:0;z-index:1;height:6px;margin-top:-6px;pointer-events:none;
    transition:opacity 1s cubic-bezier(.33,0,.2,1),background-color .4s ease}
  .hs.hs-sb::before{width:100cqw;background-color:rgb(35 40 37/.7)}
  :root[data-theme="dark"] .hs.hs-sb::before{background-color:rgb(35 40 37/.5)}
  .hs.hs-sb::after{width:var(--hs-w);background-color:#BEC8C2;transform:translateX(var(--hs-x,0px))}
  html.js .hs.hs-sb:has(>.media:not(.ir-in):not(.ir-done))::before,
  html.js .hs.hs-sb:has(>.media:not(.ir-in):not(.ir-done))::after{opacity:0}
  @supports (animation-timeline:scroll()){
    .hs.hs-sb::after{animation-name:hs-x;animation-timing-function:linear;animation-fill-mode:both;
      animation-duration:1ms;animation-duration:auto;animation-timeline:scroll(nearest inline)}
  }
}
@keyframes hs-x{from{transform:translateX(0)}to{transform:translateX(calc(100cqw - var(--hs-w)))}}
@media (min-width:768px){.hs,.xc{display:contents}}
.accent{color:var(--accent)}
.br-d{display:none}
.d-only{display:none}
@media (min-width:768px){.br-d{display:inline}.d-only{display:block}}

/* grano, cursor y manchas del home */
html .page,html .page *{cursor:none}
#cursor-dot{position:fixed;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:10001;transform:translate3d(-50%,-50%,0);opacity:0;transition:none}
@media (hover:none),(pointer:coarse),(max-width:767.98px){#cursor-dot{display:none}}
.glow{position:absolute;background:var(--glow);border-radius:54% 46% 38% 62%/56% 44% 62% 38%;pointer-events:none;will-change:transform,opacity}
@media (min-width:768px){.cta .glow.g-d{animation:blot 25s ease-in-out .6s infinite}}
.idle .cta .glow.g-d,.cta.idle .glow.g-d{animation-play-state:paused}   /* .cta.idle: js/case-study.js (__mcGlowPx) */
@keyframes blot{0%{translate:0 0;scale:1}23%{translate:4% -7%;scale:1.14}47%{translate:-5% 5%;scale:.92}72%{translate:6% 3%;scale:1.09}100%{translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){.cta .glow.g-d{animation:none}}   /* .g-m (móvil): quietas, sin animación (2026-10-21) */
/* (2026-10-19) manchas pre-desenfocadas (script __mcGlowPx de js/case-study.js, igual que el home) */
.glow.pre{filter:none!important;background:none!important}
.glow>img.glow-px{position:absolute;pointer-events:none;max-width:none;will-change:transform}
@media (max-width:767.98px){.g-d{display:none}}
@media (min-width:768px){.g-m{display:none}}
@media (min-width:441px) and (max-width:767.9px){.cta{overflow:visible;clip-path:inset(-400px 0)}}

/* tipos del home que usan CTA y footer */
.h6{font-size:24px;font-weight:600;line-height:46px;letter-spacing:-1px;color:var(--cta-h)}
.h7{font-size:32px;font-weight:600;line-height:1.16;letter-spacing:-2px;text-align:center;color:var(--cta-h)}
@media (min-width:768px){.h6{font-size:30px}.h7{font-size:48px;letter-spacing:-2.38px}}

/* ==========================================================================
   4 · HEADER (home, literal)
   ========================================================================== */
/* SHARED:CSS-NAV */
/* nav */
.nav{height:100px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--mnav);position:relative;z-index:2}
.nav-logo{display:flex;align-items:center;gap:8px}
.nav-anim-m{position:relative;display:inline-block;width:62px;height:26.304px;flex:none;color:var(--accent)}
.nav-anim{display:none}
@media (min-width:768px){
  .nav-anim{position:relative;display:inline-block;width:210.1667px;height:21.636px;flex:none;color:var(--accent)}
}
.nav-right{display:flex;align-items:center;gap:12px}   /* mobile: 12 entre botón, toggle y menú (mono.case_mobile.html) */
.nav-links{display:none;gap:40px}
.nav-link{font-family:var(--mono);font-size:13px;line-height:24px;letter-spacing:.2px;color:var(--nav-link);white-space:nowrap}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .5s ease}
.nav-link{transition:color .5s ease}
.nav-link:hover{color:var(--accent)}
.nav-link:hover::after,.nav-link.on::after{transform:scaleX(1)}
.nav-link.on{color:var(--nav-link-on)}
/* hamburguesa (2026-10-04): sin contorno, medidas del header mobile del case study:
   caja 29x42, dos líneas de 20 a x3, separadas 7 (centro a centro), 1.6 de grosor.
   Color: forest-600 en light, neutral-200 en dark. */
.menu{position:relative;width:29px;height:42px;flex:none;display:flex;flex-direction:column;gap:5.4px;justify-content:center;align-items:flex-start;padding-left:3px;cursor:pointer}
.menu span{width:20px;height:1.6px;background:color-mix(in oklab,#2c513a calc(var(--fade-p,0) * 100%),#bec8c2)}
@media (min-width:768px){
  .nav-anim-m{display:none}
  .nav-logo{gap:8.167px}
  .nav-links{display:flex}
  .nav-right{gap:40px}
  .menu{display:none}
}

/* toggle de tema (header): sol que gira, "respira" al pulsar y brilla 1 s */
.theme-toggle{--tt-dur:420ms;--tt-ease:cubic-bezier(0.65,0,0.35,1);flex:none;width:18px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:color-mix(in oklab,#2c513a calc(var(--fade-p,0) * 100%),#9bd700);-webkit-tap-highlight-color:transparent;order:2}
.theme-toggle svg{display:block;width:18px;height:18px;overflow:visible;filter:drop-shadow(0 0 6px rgba(184,255,0,0));transition:filter 1.8s cubic-bezier(.4,0,.2,1)}
.theme-toggle .tt-half{transform-box:view-box;transform-origin:8.75px 8.75px;transform:rotate(0deg);transition:transform var(--tt-dur) var(--tt-ease)}
.theme-toggle.tt-glow svg{filter:drop-shadow(0 0 6px rgba(184,255,0,0.45));transition:filter .3s ease-out}
/* el giro sigue al tema de <html> (fijado en el <head> antes de pintar), no a aria-pressed:
   así no gira solo al cargar mientras el script corrige aria-pressed. Solo gira al pulsar. */
html:not([data-theme="light"]) .theme-toggle .tt-half{transform:rotate(180deg)}
.theme-toggle svg.tt-breathe{animation:tt-breathe var(--tt-dur) var(--tt-ease)}
@keyframes tt-breathe{0%,100%{transform:scale(1)}50%{transform:scale(0.92)}}
@media (prefers-reduced-motion:reduce){.theme-toggle .tt-half{transition:none}.theme-toggle svg.tt-breathe{animation:none}}
/* mobile: botón → toggle → menú · desktop: links → toggle → botón */
.nav-right .nav-btn{order:1}.nav-right .menu{order:3}
@media (min-width:768px){
  .theme-toggle{height:42px}
  .nav-right .nav-btn,.theme-toggle{order:0}
}

/* button */
.btn{position:relative;width:147px;height:42px;flex:none;cursor:pointer;outline:none}
.btn .btn-fluid{position:absolute;left:0;top:0;width:100%;height:100%}
.btn .btn-dot{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);opacity:0;will-change:transform;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn.goo .btn-fluid{filter:url(#goo)}
}
.btn .btn-shape{position:absolute;left:0;top:0;overflow:visible}
.btn .bpath{transition:fill .25s ease-out,stroke .25s ease-out}
.btn .btn-arr{position:absolute;top:14.75px;transition:color .25s ease-out}
.btn .al{left:11.9px}
.btn .ar{left:113.5px;opacity:0}
.btn .btn-label{position:absolute;left:50%;top:0;height:41.5px;line-height:41.5px;white-space:nowrap;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.002em;transform:translateX(-50%) translateX(16.5px);transition:transform 368ms cubic-bezier(.35,.9,.25,1),color .25s ease-out}
/* botones del header y footer a 48 px de alto (geometria en JS via data-h) */
.btn.nav-btn,.btn.foot-btn{height:48px;width:158px}
.btn.nav-btn .btn-arr,.btn.foot-btn .btn-arr{top:16.67px}
.btn.nav-btn .al,.btn.foot-btn .al{left:13.45px}
.btn.nav-btn .ar,.btn.foot-btn .ar{left:120.14px}
.btn.nav-btn .btn-label,.btn.foot-btn .btn-label{height:48px;line-height:48px;transform:translateX(-50%) translateX(18.51px)}
/* MENÚ MOBILE (2026-10-05) — desplegable de la hamburguesa (diseño mono-home-mobile-dark/light).
   Compartido: sync-shared.py lo copia a entries y contact con el header (CSS-NAV, MENU, JS-MENU).
   · Panel STICKY al principio de .page con margen negativo igual a su alto: no ocupa sitio y
     queda pegado arriba aunque la página se mueva debajo. (position:fixed no sirve: .page es
     contenedor —container-type— y ancla los fixed a sí misma.)
   · Cerrado = display:none: cero coste de layout/pintado mientras no se usa.
   · Estado: html.mm-open (script JS-MENU). Entrada en tres tiempos con @starting-style: fondo
     plano → línea + links escalonados (suben 8 px) → CTA. Al cerrar se funde el panel entero y
     display:none espera al fundido (allow-discrete). Sin soporte: abre y cierra sin fundido.
   · Solo opacity/translate en la animación (compositor). Colores: dark = tokens; light =
     valores del diseño (#fff fondo, #bec8c2 separadores), interpolados con --fade-p para
     seguir al toggle de tema. */
.mm{display:none}
@media (max-width:767.98px){
  .mm{position:sticky;top:0;z-index:40;flex:none;flex-direction:column;gap:8px;
    height:100vh;height:100dvh;margin-bottom:-100vh;margin-bottom:-100dvh;
    padding:100px var(--mnav) 32px;overflow-y:auto;overscroll-behavior:contain;
    background:color-mix(in oklab,#fff calc(var(--fade-p,0) * 100%),var(--bg-d));
    opacity:0;transition:opacity .35s ease,display .35s;transition-behavior:allow-discrete}
  html.mm-open .mm{display:flex;opacity:1;transition-duration:.3s}
  .mm-nav{display:flex;flex-direction:column;border-top:1px solid var(--border);padding:16px 16px 0;transition:border-top-color .4s ease .14s}
  /* Space Mono solo tiene 400 (el diseño pide 300, que cae igualmente en 400) */
  .mm-link{display:flex;align-items:center;justify-content:space-between;height:60px;border-bottom:1px solid color-mix(in oklab,#bec8c2 calc(var(--fade-p,0) * 100%),rgba(44,81,58,.4));font-family:var(--mono);font-size:20px;letter-spacing:-.3px;color:var(--txt)}
  .mm-link:hover{color:var(--txt)}
  .mm-link:last-child{border-bottom:0}
  .mm-link.on span:first-child{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
  .mm-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
  /* CTA 280x50 del diseño; por debajo de 328 px de pantalla se estrecha (≤3 %, imperceptible) */
  .mm-cta{position:relative;display:block;align-self:center;width:min(280px,100%);height:50px;margin-top:64px;flex:none}
  .mm-cta svg{position:absolute;display:block;overflow:visible}
  .mm-cta-shape{left:0;top:0;width:100%;height:100%}
  .mm-cta-shape path{fill:var(--btn2-fill);stroke:var(--btn2-stroke);vector-effect:non-scaling-stroke}
  .mm-cta-arr{left:14.76px;top:21.65px}
  .mm-cta-arr path{stroke:var(--btn2-arrow)}
  .mm-cta span{position:absolute;left:40px;right:0;top:13px;text-align:center;font-family:var(--mono);font-size:13px;line-height:24px;letter-spacing:.002em;white-space:nowrap;color:var(--btn2-label)}
  .mm-link,.mm-cta{transition:opacity .4s ease var(--mm-d),translate .55s cubic-bezier(.22,.7,.2,1) var(--mm-d)}
  .mm-link:nth-child(1){--mm-d:.16s}
  .mm-link:nth-child(2){--mm-d:.22s}
  .mm-link:nth-child(3){--mm-d:.28s}
  .mm-cta{--mm-d:.4s}
  @starting-style{
    html.mm-open .mm{opacity:0}
    html.mm-open .mm-nav{border-top-color:transparent}
    html.mm-open .mm-link,html.mm-open .mm-cta{opacity:0;translate:0 8px}
  }
  /* header con el menú abierto: por encima del panel (y no vuelve abajo hasta que el panel se
     ha fundido), sin el Let's Talk, y la hamburguesa se cruza en X (líneas a 7 c-c => ±3.5) */
  .nav{transition:z-index 0s .35s}
  html.mm-open .nav{z-index:41;transition:none}
  .nav-btn{transition:opacity .25s ease}
  html.mm-open .nav-btn{opacity:0;pointer-events:none}
  .menu span{transition:rotate .22s cubic-bezier(.6,0,.2,1),translate .2s cubic-bezier(.6,0,.2,1) .18s}
  html.mm-open .menu span{transition:translate .2s cubic-bezier(.6,0,.2,1),rotate .28s cubic-bezier(.6,0,.2,1) .18s}
  html.mm-open .menu span:first-child{translate:0 3.5px;rotate:45deg}
  html.mm-open .menu span:last-child{translate:0 -3.5px;rotate:-45deg}
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .mm,.mm-nav,.mm-link,.mm-cta,.menu span,html.mm-open .mm,html.mm-open .menu span{transition:none}
}
/* /SHARED:CSS-NAV */

/* ==========================================================================
   5 · CTA + FOOTER (home, literal)
   ========================================================================== */
/* SHARED:CSS-CTA-FOOT */
/* cta */
.cta{position:relative;margin-top:39px;padding-top:60px;background:linear-gradient(var(--border),var(--border)) var(--m) 0/calc(100% - 2 * var(--m)) var(--hair) no-repeat;overflow:hidden}
.cta-inner{display:flex;flex-wrap:wrap;column-gap:40px}
.cta-copy{flex:1 1 255px;min-width:255px}
.oval{flex:none}
.cta-head{display:flex;align-items:center;gap:8px}
.cta-bubble{position:relative;top:1px;display:inline-block;width:56.5px;height:23.38px;flex:none;color:var(--accent)}
.cta-bubble>*{background:transparent}
.cta-b{margin-top:6px;font-size:14px;line-height:1.8;color:var(--cta-b);max-width:255px}
.oval{position:relative;margin:-8px 0 0 auto;width:228px;height:86.185px;flex:none;cursor:pointer;transform:rotate(0);transform-origin:50% 50%;transition:transform .5s cubic-bezier(.35,.9,.25,1)}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .oval:hover{transform:rotate(6deg)}
  .oval:hover span{color:#2c513a}
}
.oval.tap{transform:rotate(6deg)}
.oval.tap span{color:#2c513a}
.oval span{transition:color .5s ease}
@media (min-width:571px){
  .oval{margin-top:-1.8px}
}
.oval i,.oval b{position:absolute;width:224.03px;height:72.868px;border-radius:50%}
/* (2026-10-21) trazos en SVG (como el home) para dibujarlos al entrar en pantalla; b sin relleno (se ve el grano) y el
   trazo de i recortado con la forma de b (clipPath #ov-front en el HTML). html.ov-arm lo pone js/case-study.js. */
.oval svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--border);stroke-width:.775}
.oval ellipse{stroke-dasharray:1 1;stroke-dashoffset:0}
html.ov-arm .oval:not(.ov-in) ellipse{stroke-dashoffset:1}
html.ov-arm .oval:not(.ov-in) span{opacity:0}
html.ov-arm .oval.ov-in b ellipse{transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) .15s}
html.ov-arm .oval.ov-in i ellipse{transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) .6s}
html.ov-arm .oval.ov-in span{transition:color .5s ease,opacity .4s ease .65s}
.oval i{left:0;top:0;transform:matrix(.998,-.060,.060,.998,0,13.449);transform-origin:0 0}
.oval b{left:1.988px;top:6.659px}
.oval span{position:absolute;left:50%;top:50%;transform:translate(calc(-50% - 2.4px),calc(-50% + 1.7px)) rotate(-3.46deg);transform-origin:50% 50%;font-family:var(--mono);font-size:13.18px;line-height:1.176;letter-spacing:.205px;white-space:nowrap;text-align:center;color:var(--email)}
@media (min-width:768px){
  .cta{margin-top:25.4px;padding-top:88.8px;min-height:264px}
  .cta-b{font-size:15px;line-height:27.2px;max-width:none}
  .oval{width:294.122px;height:111.179px;overflow:hidden}
  .oval i,.oval b{width:289px;height:94px}
  .oval i{transform:matrix(.998,-.060,.060,.998,0,17.349)}
  .oval b{left:2.563px;top:8.59px}
  .oval span{transform:translate(calc(-50% - 3.15px),calc(-50% + 2.2px)) rotate(-3.46deg);font-size:17px;letter-spacing:.264px}
}
@media (min-width:1100px){
  .cta-inner{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .cta-b{white-space:nowrap}
  .oval{margin:-1.8px 42.44px 0 0}
}

/* footer */
.foot{margin-top:103px;padding-bottom:38.7px}
.foot .h7{margin:0 auto}
.foot-btn{margin:40px auto 0}
.socials{margin:79px auto 0;display:flex;align-items:center;gap:48px;width:max-content}
.ico{position:relative;width:19.236px;height:19.236px;flex:none;--soc:#9bd700}
.ico:hover{--soc:#7baa00}
.ico i{position:absolute;display:block;background:var(--soc);transition:background-color .5s ease;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;transform-origin:0 0;transform:scale(1.1)}
.foot-rule{margin-top:90.5px;border-top:var(--hair) solid var(--border)}
.legal-row{margin-top:23px;display:grid;grid-template-columns:1fr 1fr;row-gap:47.3px;align-items:center}
.foot-marks{grid-row:1;grid-column:1/-1;justify-self:center;display:flex;align-items:center}
.foot-anim{position:relative;display:inline-block;width:55px;height:22.731px;flex:none;color:var(--accent)}
.legal{font-family:var(--mono);font-size:11px;line-height:1.47;letter-spacing:.48px;white-space:nowrap;color:var(--footer-legal)}
.legal-c{grid-row:2;grid-column:2;justify-self:end}
.legal-r{grid-row:2;grid-column:1;justify-self:start}
/* toggle de idioma (reemplaza "© 2026 mono.creative"; ref. reference.svg 56x18): globo 13/12 em + 4px + En/Es, activo en Space Mono 700 */
.lang-tg{display:inline-flex;align-items:center}
.lang-ico{width:1.0833em;height:1.0833em;margin-right:4px;flex:none;background:currentColor;-webkit-mask:url(../assets/shared/icon-language-13x13.svg) center/100% 100% no-repeat;mask:url(../assets/shared/icon-language-13x13.svg) center/100% 100% no-repeat}
.lang-b{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .3s ease}
.lang-b[aria-pressed="true"]{font-weight:700;cursor:default}
.lang-b[aria-pressed="false"]:hover{color:#fff}
:root[data-theme="light"] .lang-b[aria-pressed="false"]:hover{color:#5f8300}
.legal-link{text-decoration:underline;text-underline-offset:2px;transition:color .3s ease}   /* hovers = "Learn more" del tooltip de cookies */
.legal-link:hover{color:#fff}
:root[data-theme="light"] .legal-link:hover{color:#5f8300}
@media (min-width:768px){
  .foot .h7{max-width:520px}
  .foot{margin-top:50px;padding-top:29.244px;padding-bottom:40.8px}
  .foot-btn{margin-top:38.8px}
  .socials{margin-top:86.9px}
  .foot-rule{margin-top:101.9px}
  .legal-row{margin-top:26px;grid-template-columns:1fr auto 1fr;row-gap:0}
  .foot-marks{grid-row:1;grid-column:2}
  .legal{font-size:12px}
  .legal-c{grid-row:1;grid-column:1;justify-self:start}
  .legal-r{grid-row:1;grid-column:3;justify-self:end}
}
/* /SHARED:CSS-CTA-FOOT */
/* (2026-10-04) placeholder del runtime invisible: mientras se descarga un componente
   (logo del header, burbuja del CTA, marcas del footer) el runtime pinta una caja con
   borde que parecía una imagen rota. Conserva su tamaño (no mueve nada); el componente
   aparece en su sitio al cargar. Gana a BASE_CSS de support.js por especificidad. */
html .page .sc-placeholder{background:none;border-color:transparent}
html .page .sc-placeholder::before{display:none}

@keyframes fx-in{from{opacity:0}to{opacity:1}}
.nav,.cta,.foot{animation:fx-in .7s ease .1s both}

/* ==========================================================================
   6 · ANCHO DE VIEWPORT (QA, fuera del diseño). El toggle de tema viene con
       el header del home (CSS-NAV / JS-THEME).
   ========================================================================== */
.qa-w{position:fixed;left:8px;top:8px;z-index:9999;color:var(--qa);font-family:var(--ff-mono);font-size:12px;line-height:1;pointer-events:none;white-space:nowrap}

/* ==========================================================================
   7 · CASE STUDY — mobile first (< 768 = Figma 360)
   ========================================================================== */
/* entrada por bloques */
@keyframes fx-in-b{from{opacity:0}to{opacity:1}}
.js .fx{opacity:0}
.js .fx.is-in{animation:fx-in-b .6s ease both}
.js .fx.is-in.fx-w{animation-delay:.1s}   /* entra con el header (ver "HEADER Y CONTENIDO A LA VEZ"): mismo .1s de retardo que .nav */
.js .fx-line{opacity:0}
.js .is-in .fx-line{animation:fx-in-b .7s ease both;animation-delay:calc(.1s + var(--i) * .3s)}
@media (prefers-reduced-motion:reduce){.js .fx,.js .fx.is-in,.js .fx-line,.js .is-in .fx-line{opacity:1;animation:none}}

/* ---- Project Hero (B01) ---- */
.cs-hero{padding:0 0 56px}
/* imagen: 6px a cada lado del viewport (sale del wrap de --m), 360/380 como en Figma 360 */
.cs-hero__media{width:calc(100cqw - 12px);margin-left:calc(6px - var(--m));aspect-ratio:360/380;border-radius:16px}
.cs-hero__body{display:flex;flex-direction:column;margin-top:32px}
.cs-hero__title{font:500 32px/1.1 var(--ff-sans);color:var(--text-hero-plain)}
.cs-hero__title .fx-line{display:block;--i:0}
.cs-hero__title .fx-line+.fx-line{--i:1}
.cs-hero__meta{display:flex;flex-direction:column;margin-top:16px}
.meta__label{display:block;font:var(--t-mono-tag);color:var(--text-muted)}
.meta__value{display:block;font:400 16px/1.7 var(--ff-sans);color:var(--text)}
.meta--role{order:1}.avatars{order:2;margin-top:2px}.meta--year{order:3;margin-top:8px}
.avatars{display:flex}
.avatar{width:49px;height:49px;border-radius:50%;background-color:var(--neutral-100);background-size:cover;background-position:center;border:3px solid var(--bg)}
.avatar+.avatar{margin-left:-13px}
/* fotos del team (mismas del home): 1 Gabriel, 2 Ale, 3 Romina, 4 David */
[data-asset="team-1"]{background-image:url(../assets/shared/team/avatar-1.webp?v=3)}
[data-asset="team-2"]{background-image:url(../assets/shared/team/avatar-2.webp)}
[data-asset="team-3"]{background-image:url(../assets/shared/team/avatar-3.webp)}
[data-asset="team-4"]{background-image:url(../assets/shared/team/avatar-4.webp)}
/* avatares → tarjeta mínima (nombre + redes, mismos enlaces que el home). Fuente:
   mono.creative_entry/mono.case_desktop.html y mono.case_mobile.html. Abre con tap/clic
   (.is-open, JS "avatares del team" en js/case-study.js) o con foco; en desktop con ratón,
   también con hover. Mobile: la tarjeta sale a la derecha del grupo (con 3 avatares, más
   estrecha para caber en 360); desktop: debajo de su avatar. Todo bajo .cs-hero: contact.html también
   carga esta hoja y sus avatares no llevan tarjeta. */
.cs-hero__left{position:relative;z-index:1}   /* la tarjeta pasa por encima de lo que sigue */
.cs-hero .avatars{position:relative}
.cs-hero .avatar{flex:0 0 auto;outline:0;box-shadow:0 0 0 0 var(--accent);-webkit-tap-highlight-color:transparent;transition:margin-left .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease,box-shadow .3s ease}
.cs-hero .avatars:is(.is-open,:focus-within) .avatar+.avatar{margin-left:6px}
.cs-hero .avatars.is-open .avatar:not(.is-open):not(:focus-within){opacity:.45}
.cs-hero .avatar:is(:focus-visible,:focus-within,.is-open){z-index:2;box-shadow:0 0 0 1px var(--accent)}
.pcard{position:absolute;left:120px;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:24px 40px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
@media (max-width:767.98px){.cs-hero .avatars:has(>.avatar:nth-child(3)) .pcard{left:175px;padding-inline:clamp(24px,50vw - 155px,40px)}}   /* 3 avatares: 159 px abiertos + 16; bajo 390 el óvalo se estrecha para caber */
.pcard__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--border);stroke-width:1;pointer-events:none}
.pcard__ring ellipse{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 0s linear .2s}
.pcard__ring ellipse:first-child{fill:var(--bg)}   /* con <clipPath> delante (casestudy_GVRN) deja de ser :first-child: sin relleno, se ve el grano y el trazo de atrás se recorta con la forma del de adelante */
.pcard__name,.pcard__links{position:relative;transform:rotate(-3deg);opacity:0;transition:opacity .15s ease}
.pcard__name{font:400 16px/24px var(--ff-sans);letter-spacing:-.32px;color:var(--text-title)}
.pcard__links{display:flex;gap:10px}
.pcard__links a{display:block;font:400 13px/18px var(--ff-mono);letter-spacing:.52px;color:var(--accent-mono);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}
.pcard__links a:hover,.pcard__links a:focus-visible{color:var(--accent);outline:0}
.cs-hero .avatar:is(:focus-within,.is-open) .pcard{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0s,visibility 0s}
.cs-hero .avatar:is(:focus-within,.is-open) .pcard__ring ellipse{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) 0s}
.cs-hero .avatar:is(:focus-within,.is-open) .pcard__ring ellipse+ellipse{transition-delay:.45s}
.cs-hero .avatar:is(:focus-within,.is-open) :is(.pcard__name,.pcard__links){opacity:1;transition:opacity .4s ease .5s}
/* al cambiar de avatar, la tarjeta anterior se va en el acto y la nueva se dibuja. :not(:focus-within):
   el tap enfoca el avatar nuevo antes del clic; sin esto su tarjeta abría ya sin transición */
.cs-hero .avatars.is-open .avatar:not(.is-open):not(:focus-within) :is(.pcard,.pcard *){transition:none!important}
@media (min-width:768px){
  .cs-hero .avatar{position:relative}
  .pcard{left:0;top:calc(100% + 12px);translate:none}
  .pcard::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* puente: el hover no se corta al bajar */
}
@media (min-width:768px) and (hover:hover) and (pointer:fine){
  .cs-hero .avatars:hover .avatar+.avatar{margin-left:6px}
  .cs-hero .avatars:hover .avatar:not(:hover){opacity:.45}
  .cs-hero .avatar:hover{z-index:2;box-shadow:0 0 0 1px var(--accent)}
  .cs-hero .avatar:hover .pcard{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0s,visibility 0s}
  .cs-hero .avatar:hover .pcard__ring ellipse{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) 0s}
  .cs-hero .avatar:hover .pcard__ring ellipse+ellipse{transition-delay:.45s}
  .cs-hero .avatar:hover :is(.pcard__name,.pcard__links){opacity:1;transition:opacity .4s ease .5s}
  .cs-hero .avatars:hover .avatar:not(:hover) :is(.pcard,.pcard *){transition:none!important}
}
@media (prefers-reduced-motion:reduce){.cs-hero .avatar,.cs-hero .avatar :is(.pcard,.pcard *){transition:none!important}}
.cs-hero__right{margin-top:16px}
.cs-hero__lead{font:500 20px/1.5 var(--ff-sans);letter-spacing:-.22px;color:var(--text-title)}
.cs-hero__intro{font:400 15px/24px var(--ff-sans);margin-top:16px}
.cs-hero__cols{display:flex;flex-direction:column;gap:32px;margin-top:48px}
.cs-hero__col{position:relative;padding-top:14px}
.cs-hero__col::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--accent);transform-origin:0 50%}
.cs-hero__label{font:var(--t-meta-strong);letter-spacing:.14px;color:var(--text-title)}
.cs-hero__text{font:var(--t-body-m);margin-top:4px}

/* ---- Section header (compartido) ---- */
.sh{display:flex;flex-direction:column;gap:16px}
.sh__title{font:500 32px/1.1 var(--ff-sans);letter-spacing:-.5px;color:var(--text-strong)}
.sh__title span{display:block}
.sh__desc{font:var(--t-body-s);color:var(--text)}

/* ---- Bullets (compartido) ---- */
.bullet{display:flex;gap:8px;font:var(--t-body-s);color:var(--text)}
.bullet__ic{flex:0 0 10px;width:10px;height:10px;margin-top:calc((1.7em - 10px) / 2);color:var(--accent)}

/* ---- Statement (B06) ---- */
.cs-statement{padding:30px 0 40px}
.cs-statement__label{font:var(--t-mono-tag);color:var(--accent-mono)}
.cs-statement__text{font:500 22px/1.5 var(--ff-sans);letter-spacing:-.6px;color:var(--text-title);margin-top:16px}

/* ---- Constraints (B04) ---- */
.cs-constraints{padding:56px 0}
.cs-constraints .sh__title span:first-child{color:var(--accent)}
.cs-constraints .sh__title span:last-child{color:var(--text-strong)}
.cs-constraints__canvas{position:relative;margin-top:16px}
.curve{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;fill:none;stroke:var(--accent)}
:root[data-theme="dark"] .curve{stroke:var(--lime-600)}
.curve--h{display:none;stroke-width:1px}
/* curva vertical: se estira al alto de la lista; el JS coloca cada punto sobre ella */
.curve--v{width:61px;height:100%;stroke-width:1.5px}
.cs-constraints__list{position:relative;display:flex;flex-direction:column;gap:24px}
.ci{position:relative;padding-left:var(--tx)}
.ci:nth-child(1){--dx:6px;--tx:48px;--my:0}
.ci:nth-child(2){--dx:40px;--tx:76px;--my:.158941}   /* 168/1057 */
.ci:nth-child(3){--dx:16px;--tx:58px;--my:.146641}   /* 155/1057 */
.ci:nth-child(4){--dx:46px;--tx:90px;--my:.212867}   /* 225/1057 */
.ci__dot{position:absolute;left:var(--dx);top:7px;width:10px;height:10px;border-radius:50%;background:var(--dot)}
.ci__num{display:block;font:var(--t-mono-index-s);letter-spacing:.2px;color:var(--accent-mono)}
.ci__title{font:600 18px/24px var(--ff-sans);letter-spacing:-.2px;color:var(--text-title);margin-top:4px}
.ci__text{font:var(--t-body-s);margin-top:6px}
/* animación: curva revelada con el scroll + puntos/textos secuenciales */
.js .curve path{stroke-dasharray:0 0 0 2}
.js .ci__num,.js .ci__title,.js .ci__text{opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1),color .4s ease}
.js .ci__num{transition-delay:.25s}.js .ci__title{transition-delay:.35s}.js .ci__text{transition-delay:.45s}
.js .ci.is-on .ci__num,.js .ci.is-on .ci__title,.js .ci.is-on .ci__text{opacity:1;transform:none;filter:none}
.ci__num{translate:0 var(--py-num,0px)}.ci__title{translate:0 var(--py-title,0px)}.ci__text{translate:0 var(--py-text,0px)}
.js .ci__dot{transform:scale(0);opacity:0}
.js .ci.is-on .ci__dot{transform:scale(1);opacity:1;animation:ci-appear 1.1s linear .25s both,ci-breathe 4.8s cubic-bezier(.45,0,.55,1) calc(1.6s + var(--bd,0s)) infinite}
@keyframes ci-appear{0%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(.12,.75,.25,1)}55%{transform:scale(1.12,1.06);opacity:1;animation-timing-function:cubic-bezier(.5,0,.3,1)}100%{transform:scale(1);opacity:1}}
@keyframes ci-breathe{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
.ci:nth-child(2){--bd:.9s}.ci:nth-child(3){--bd:1.7s}.ci:nth-child(4){--bd:.4s}
@media (prefers-reduced-motion:reduce){html.js .curve path{stroke-dasharray:none}html.js .ci .ci__num,html.js .ci .ci__title,html.js .ci .ci__text,html.js .ci .ci__dot,html.js .ci.is-on .ci__dot{opacity:1;transform:none;filter:none;transition:none;animation:none}.ci .ci__num,.ci .ci__title,.ci .ci__text{translate:none}}

/* ---- Research & Exploration (B10) ---- */
.cs-media-2up-wide{padding:56px 0}
.m2w__wide{width:100cqw;aspect-ratio:360/260;margin-top:32px}
.m2w__caption{font:var(--t-body-m);margin-top:32px}
/* variante 2-up: fila de 2 → caption → ancha */
.m2w__grid{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.m2w__img{aspect-ratio:312/310;border-radius:16px}
.m2w__grid~.m2w__caption{margin-top:16px}
.m2w--2up .m2w__wide{margin-top:16px}

/* ---- Final Direction (B07) ---- */
.cs-feature-bleed{padding:56px 0}
.fb__row{display:flex;gap:24px;width:100cqw;margin-top:32px}
.fb__left{display:none}
.fb__right{flex:1;aspect-ratio:360/314}

/* ---- UI Details (B10 modified) ---- */
.cs-media-2up-captions{padding:56px 0}
.m2c__grid{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.m2c__img{aspect-ratio:312/310;border-radius:16px}
.m2c__item .bullet{margin-top:8px}

/* ---- Before / After (B09) ---- */
.cs-before-after{padding:56px 0}
.ba__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px}
.ba--before{--c:var(--before)}.ba--after{--c:var(--after)}
.ba__img{aspect-ratio:312/314;border-radius:16px 16px 0 0}
.ba__bar{height:4px;background:var(--c)}
.ba__label{display:block;font:var(--t-mono-label);letter-spacing:.2px;color:var(--c);margin-top:16px}
.ba__text{font:var(--t-body-m);margin-top:4px}

/* líneas de acento (hero Objective/Outcome y barras B09): entrada única izq → der */
.js .cs-hero__col::before,.js .ba__bar{transform:scaleX(0);transform-origin:0 50%}
.js .ba__bar.ln-in{animation:ln-draw 1.15s cubic-bezier(.7,-.12,.18,1) var(--ld,0s) both}
/* hero: la línea de cada columna se dibuja cuando aparece su columna (.hr-in, ver "HERO POR PARTES") */
.js .cs-hero__col.hr-in::before{animation:ln-draw 1.15s cubic-bezier(.7,-.12,.18,1) calc(var(--hr-d,0s) + .25s) both}
@keyframes ln-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html.js .cs-hero__col::before,html.js .cs-hero__col.hr-in::before,html.js .ba__bar,html.js .ba__bar.ln-in{transform:none;animation:none}}

/* ==========================================================================
   ENTRADA DE IMÁGENES, CARGA DIFERIDA, HERO POR PARTES Y LOGO DEL HEADER (2026-10-04)
   Lo activa js/case-study.js. Receta y motivos: xlogClaude/PROMPT-optimizacion-y-animaciones-entries.md
   ========================================================================== */
:root{
  /* curvas con los puntos de control en y ∈ [0,1] → nunca se pasan del final (sin rebote) */
  --ir-snap:cubic-bezier(.8,0,.1,1);   /* radio: aguanta, arranca de golpe y frena largo */
  --ir-out:cubic-bezier(.12,.9,.2,1);  /* escala: salida rápida y asiento largo */
}
/* carga diferida: sin .ld no hay background-image (gana a [data-asset="x"] por especificidad).
   Hero y avatares cargan en el acto. Sin JS (sin html.js) todo carga normal. */
html.js main [data-asset]:not(.ld):not([data-asset="hero"]):not(.avatar){background-image:none}
/* entrada de imágenes (todas menos Before / After): fade con esquinas a 0 + escala leve;
   luego el radio crece hasta el del diseño (ir-round solo tiene 'from': llega al radio de
   cada breakpoint). Oculta con opacity, NO con clip-path: un clip-path propio deja el área
   de intersección en 0 y el IntersectionObserver nunca dispara. */
html.js main .media:not(.ba__img){opacity:0}
/* (2026-10-21) ir-pop en backwards, no both: su escala final (1) se quedaba aplicada y arrastraba el grano fijo
   de la imagen (::before position:fixed); sin relleno final se ve igual (scale 1 = sin escala). */
html.js main .media.ir-in:not(.ba__img){opacity:1;
  animation:ir-fade 1s cubic-bezier(.33,0,.2,1) var(--ir-d,0s) both,
            ir-pop 1s var(--ir-out) var(--ir-d,0s) backwards,
            ir-round 1s var(--ir-snap) calc(var(--ir-d,0s) + .35s) both}
html.js main .media.ir-in:not(.ba__img) .csc__inner{
  animation:ir-fade 1.1s cubic-bezier(.33,0,.2,1) calc(var(--ir-d,0s) + .35s) both,
            ir-pop 1.2s var(--ir-out) calc(var(--ir-d,0s) + .35s) both,
            ir-round 1.1s var(--ir-snap) calc(var(--ir-d,0s) + .8s) both}
html.js main .media.ir-done:not(.ba__img){animation:none}
/* cortina de arriba abajo: opt-in por sección con data-reveal="wipe" (hoy solo Jupiter 5.4 y 5.5) */
html.js main [data-reveal="wipe"] .media.ir-in:not(.ba__img){clip-path:inset(0);
  animation:ir-wipe 1.1s cubic-bezier(.76,0,.24,1) var(--ir-d,0s) both,
            ir-round .9s cubic-bezier(.33,1,.68,1) calc(var(--ir-d,0s) + .55s) both}
html.js main [data-reveal="wipe"] .media.ir-in:not(.ba__img) .csc__inner{clip-path:inset(0);
  animation:ir-wipe .9s cubic-bezier(.76,0,.24,1) calc(var(--ir-d,0s) + .3s) both,
            ir-round .7s cubic-bezier(.33,1,.68,1) calc(var(--ir-d,0s) + .8s) both}
html.js main [data-reveal="wipe"] .media.ir-done:not(.ba__img){clip-path:none;animation:none}
/* HERO POR PARTES (la sección .cs-hero NO es .fx: no se funde entera, lo de bajo el pliegue se
   animaría sin verse). Imagen y título al montar, solo CSS, a la vez que el header (un
   observer, con el hilo ocupado tras montar, llegaba hasta ~2 s tarde). Meta, lead, intro y
   columnas al estar en pantalla (.hr-in: las visibles al iniciar en el acto, el resto con el
   scroll). */
html.js main .cs-hero .fx-line{animation:fx-in-b .7s ease both;animation-delay:calc(.1s + var(--i) * .3s)}
@media (prefers-reduced-motion:no-preference){
  html.js main .cs-hero :is(.cs-hero__meta,.cs-hero__lead,.cs-hero__intro,.cs-hero__col){opacity:0}
  html.js main .cs-hero :is(.cs-hero__meta,.cs-hero__lead,.cs-hero__intro,.cs-hero__col).hr-in{opacity:1;animation:fx-in-b .7s ease var(--hr-d,0s) both}
  /* avatares: fade + deslizamiento sutil, escalonados (los de contact.css, mc-av-in), al
     entrar su meta. "backwards" y no "both": el relleno final pisaría el atenuado (.45) del hover */
  html.js main .cs-hero .cs-hero__meta.hr-in .avatar{animation:av-in .89s cubic-bezier(.2,.7,.2,1) calc(var(--hr-d,0s) + .3s) backwards}
  html.js main .cs-hero .cs-hero__meta.hr-in .avatar:nth-child(2){animation-delay:calc(var(--hr-d,0s) + .389s)}
  html.js main .cs-hero .cs-hero__meta.hr-in .avatar:nth-child(3){animation-delay:calc(var(--hr-d,0s) + .478s)}
  html.js main .cs-hero .cs-hero__meta.hr-in .avatar:nth-child(4){animation-delay:calc(var(--hr-d,0s) + .567s)}
}
@keyframes av-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* imagen del hero: fade + escala al montar (compositor: nunca se traban). El radio se calcula
   en el hilo principal, ocupado justo tras montar: se queda a 0 (cuadrada) hasta que el JS ve
   la página libre y lo anima (clase .ir-r + Web Animations); si no, saltaría de golpe. */
html.js main .cs-hero .media{opacity:1;
  animation:ir-fade 1s cubic-bezier(.33,0,.2,1) .1s both,
            ir-pop 1s var(--ir-out) .1s backwards}
@media (prefers-reduced-motion:no-preference){html.js main .cs-hero .media:not(.ir-r){border-radius:0}}
/* el fade del hero espera a que su imagen esté decodificada (html.hero-ok, script del <head>; tope 2,5 s):
   si la imagen llegaba tras el fade, aparecía de golpe */
html.js:not(.hero-ok) main .cs-hero .media{animation-play-state:paused}
/* header: su fade de entrada espera, en pausa e invisible, a que el logo (lo dibuja un
   componente por JS) tenga trazo: html.logo-ok (o tope de 1,2 s). El logo además tiene su
   propio fade (html.logo-drawn): si llega tarde, entra suave y no de golpe. */
html.js:not(.logo-ok) .page .nav{animation-play-state:paused}
/* (2026-10-19) HEADER Y CONTENIDO A LA VEZ, como el home (que congela todo bajo su pantalla de carga con .espera):
   mientras el header espera a su logo (html.logo-ok: logo con trazo o tope de 1,2 s), todas las entradas de la
   página esperan con él, congeladas en su primer frame; al llegar logo-ok arrancan juntas desde cero (play-state,
   no animation:none: cada delay se respeta). Solo páginas con header (:has(.nav)): thank-you carga este CSS sin
   header ni case-study.js y nunca tendría logo-ok. Sin :has() la regla se descarta = comportamiento anterior.
   Las transiciones no se congelan (las de entrada por transición, Constraints, están bajo el pliegue). */
html.js:not(.logo-ok) .page:has(.nav) :is(main,.cta,.foot),
html.js:not(.logo-ok) .page:has(.nav) :is(main,.cta,.foot) *,
html.js:not(.logo-ok) .page:has(.nav) :is(main,.cta,.foot) *::before,
html.js:not(.logo-ok) .page:has(.nav) :is(main,.cta,.foot) *::after{animation-play-state:paused!important}
html.js .page .nav :is(.nav-anim,.nav-anim-m){opacity:0;transition:opacity .6s ease}
html.js.logo-drawn .page .nav :is(.nav-anim,.nav-anim-m){opacity:1}
@keyframes ir-wipe{from{clip-path:inset(0 0 100% 0)}}
@keyframes ir-fade{from{opacity:0}to{opacity:1}}
@keyframes ir-pop{from{scale:.955}to{scale:1}}
@keyframes ir-round{from{border-radius:0}}
@media (prefers-reduced-motion:reduce){
  html.js main .media:not(.ba__img),
  html.js main .media:not(.ba__img) .csc__inner,
  html.js main [data-reveal="wipe"] .media.ir-in:not(.ba__img),
  html.js main [data-reveal="wipe"] .media.ir-in:not(.ba__img) .csc__inner,
  html.js main .cs-hero .fx-line{opacity:1;clip-path:none;animation:none}
  html.js .page .nav :is(.nav-anim,.nav-anim-m){transition:none}
}

/* ---- Tradeoffs (B04 list) ---- */
.cs-list-numbered{padding:56px 0}
.ln{display:flex;flex-direction:column;gap:32px}
.ln__desc{font:var(--t-body-s);margin-top:16px}
.ln__list{display:flex;flex-direction:column;gap:32px}
.ln__item{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px}
.ln__num{font:var(--t-mono-index-m);color:var(--accent-mono);text-align:right}
.ln__title{font:500 20px/1.2 var(--ff-sans);letter-spacing:-.4px;color:var(--text-title)}
.ln__text{grid-column:2;font:var(--t-body-s);margin-top:8px}

/* ---- Mobile (B14) ---- */
.cs-media-single{padding:56px 0}
.ms__img{aspect-ratio:312/260;border-radius:16px;margin-top:32px}

/* ---- Outcome (B02) ---- */
.cs-closing-scene{padding:56px 0 24px}
.csc__bullets,.c3__bullets{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.csc__scene{width:100cqw;aspect-ratio:360/320;display:grid;place-items:center;margin-top:32px}
.csc__inner{width:96.67%;aspect-ratio:348/196;background-color:var(--media-inner);background-size:cover;background-position:center}
/* variante solo escena (sin SH): sin padding superior */
.csc--bare{padding-top:0}
.csc--bare .csc__scene{margin-top:0}
/* variante con caption: debajo de la escena; dentro de ella desde 1100 (ver @container) */
.csc__caption{font:var(--t-body-m);margin-top:32px}

/* ---- Media 2-up wide: variantes ----
   .m2w--captions: bullet-caption bajo cada imagen (B16)
   .m2w--cap-end:  DOM sh+2up / ancha / caption; en desktop la caption sube sobre la ancha */
.m2w--captions .m2c__item .bullet{margin-top:16px}
.m2w--captions .m2w__wide{margin-top:16px}
.m2w__cap{margin-top:16px}
.bullet b{font-weight:700}

/* ---- Media single: variante con callouts + caption bajo la imagen ---- */
.ms__notes{font:var(--t-body-s);color:var(--accent-mono);margin-top:32px}
.ms__caption{font:var(--t-body-s);margin-top:12px}

/* ---- Carousel3 (B12): 3 cards; mobile apiladas a sangre ---- */
.cs-carousel3{padding:56px 0}
.c3__track{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.c3__card{aspect-ratio:360/260}
.c3__caption{font:var(--t-body-m);margin-top:32px}

/* ---- Zigzag (B08): imagen + texto alternados; mobile imagen a sangre y texto debajo ---- */
.cs-zigzag{padding:56px 0}
.zz{display:flex;flex-direction:column;gap:32px;margin-top:32px}
.zz__row{display:flex;flex-direction:column;gap:32px}
.zz__media{width:100cqw;margin-left:calc(-1 * var(--m));aspect-ratio:360/260}
.zz__media--split{display:flex;flex-direction:column;aspect-ratio:auto}
.zz__media--split>.media{border-radius:0 16px 16px 0;aspect-ratio:360/360}
.zz__media--split>.media:first-child{aspect-ratio:360/502}
.zz__title{font:500 20px/1.2 var(--ff-sans);letter-spacing:-.4px;color:var(--text-title)}
.zz__text{font:var(--t-body-m);margin-top:12px}
/* variante .zz--inset (Butrich 10.5): en mobile imagen a sangre 360/240 y todo a 16px;
   desktop = zigzag normal */
@media (max-width:767.98px){
  .zz--inset .zz,.zz--inset .zz__row{gap:16px}
  .zz--inset .zz__media{aspect-ratio:360/240}
  .zz--inset .zz__body{padding:8px 0 16px}
}

/* ==========================================================================
   8 · CASE STUDY — desktop (≥ 768 = Figma 1440). Grillas en fracciones del
       wrap, imágenes por aspect-ratio, tipografía y paddings fijos.
   ========================================================================== */
@media (min-width:768px){
  /* hero */
  .cs-hero{padding:0 0 16px}
  .cs-hero__media{width:auto;margin-left:0;aspect-ratio:1056/508;border-radius:35px}
  .cs-hero__body{display:grid;grid-template-columns:minmax(0,340fr) minmax(0,700fr);column-gap:16px;margin-top:40px}
  .cs-hero__title{font:var(--t-hero)}
  .cs-hero__meta{margin-top:24px}
  .meta__value{font:var(--t-meta)}
  .meta--year,.meta--role,.avatars{order:0}
  .meta--year{margin-top:0}.meta--role{margin-top:16px}.avatars{margin-top:6px}
  .cs-hero__right{margin-top:0}
  .cs-hero__lead{font:var(--t-lead);letter-spacing:-.22px}
  .cs-hero__intro{font:var(--t-body-s);margin-top:24px}
  .cs-hero__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:40px}
  .cs-hero__col{padding-top:24px}
  .cs-hero__text{margin-top:16px}

  /* section header: título a la izquierda, descripción de 482 máx. a la derecha */
  .sh{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:32px}
  .sh__title{flex:1 1 auto;font:var(--t-section);letter-spacing:-.3px}
  .sh__desc{flex:none;width:min(482px,46%)}

  /* statement: columna de 913 centrada (no crece) */
  .cs-statement{padding:140px 0 163px}
  .cs-statement .wrap{padding-inline:max(var(--m),calc((100% - 913px) / 2))}
  .cs-statement__text{font:var(--t-statement);letter-spacing:-1.44px}

  /* constraints: tipografía desktop en todos los anchos ≥ 768 */
  .cs-constraints{padding:32px 0 88px}
  .cs-constraints__canvas{margin-top:24px}
  .ci__title{font:var(--t-item-sm);letter-spacing:-.2px}

  /* research: imagen al ancho del wrap */
  .cs-media-2up-wide{padding:112px 0}
  .m2w__wide{width:auto;aspect-ratio:1056/500;margin:32px var(--m) 0;border-radius:30px}
  .m2w__caption{max-width:912px;margin:24px auto 0;text-align:center}
  .m2w__grid{flex-direction:row;gap:24px}
  .m2w__img{flex:1 1 0;aspect-ratio:516/510;border-radius:30px}
  .m2w__grid~.m2w__caption{margin-top:24px}
  .m2w--2up .m2w__wide{margin-top:24px}

  /* feature bleed: dos paneles a sangre (460 / 956 de 1440) */
  .cs-feature-bleed{padding:112px 0}
  .fb__left{display:block;flex:460 1 0;aspect-ratio:460/644;border-radius:0 30px 30px 0}
  .fb__right{flex:956 1 0;aspect-ratio:956/644;border-radius:30px 0 0 30px}

  /* 2-up con captions */
  .cs-media-2up-captions{padding:112px 0}
  .m2c__grid{flex-direction:row;gap:24px}
  .m2c__item{flex:1 1 0;min-width:0}
  .m2c__img{aspect-ratio:516/510;border-radius:30px}

  /* before / after */
  .cs-before-after{padding:64px 0}
  .ba__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 24px}
  .ba__img{aspect-ratio:516/519;border-radius:25px 25px 0 0}

  /* tradeoffs: izq / hueco / lista = 401 / 206 / 449 */
  .cs-list-numbered{padding:80px 0}
  .ln{display:grid;grid-template-columns:minmax(0,401fr) minmax(0,206fr) minmax(0,449fr);align-items:center;gap:0}
  .ln__head{grid-column:1}
  .ln__desc{max-width:340px;margin-top:24px}
  .ln__list{grid-column:3;gap:48px}
  .ln__item{column-gap:16px}
  .ln__title{font:var(--t-item-md);letter-spacing:-.8px}

  /* mobile */
  .cs-media-single{padding:112px 0}
  .ms__img{aspect-ratio:1056/601;border-radius:30px}

  /* closing scene */
  .cs-closing-scene{padding:64px 0 24px}
  .csc__bullets,.c3__bullets{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 16px;max-width:1028px;margin-inline:auto}
  .csc__bullets .bullet,.c3__bullets .bullet{font:var(--t-body-m)}
  .csc__scene{aspect-ratio:1440/900}
  .csc__inner{width:51.67%;aspect-ratio:744/419}

  /* closing scene: variantes */
  .csc--bare{padding-top:0}
  .csc--cap .csc__scene{margin-top:24px}

  /* media 2-up wide: variantes */
  .cs-media-2up-wide.m2w--captions{padding:64px 0}
  .m2w--captions .m2c__item .bullet{margin-top:8px}
  .m2w--captions .m2w__wide{margin-top:32px}
  .m2w__cap{margin-top:8px}
  .m2w--cap-end{display:flex;flex-direction:column}
  .m2w--cap-end .m2w__wide{order:1}

  /* media single con notas: texto centrado de 634 */
  .ms--notes .ms__img{aspect-ratio:1056/650}
  .ms__notes,.ms__caption{max-width:634px;margin-inline:auto;text-align:center}
  .ms__caption{margin-top:32px}

  /* carousel3: 711×400 sobre wrap 1058; la central centrada, las laterales cortadas */
  .cs-carousel3{padding:112px 0}
  .c3__bullets{margin-top:48px}
  .c3__track{flex-direction:row;justify-content:center;gap:12px;margin-top:48px;overflow:clip}
  .c3__card{flex:none;width:calc((100cqw - 2 * var(--m)) * 711 / 1058);aspect-ratio:711/400;border-radius:30px}
  .c3__caption{max-width:913px;margin:40px auto 0;text-align:center}

  /* zigzag: imagen 704 / texto 320 (gap 32), texto abajo; filas pares invertidas */
  .cs-zigzag{padding:112px 0}
  .zz{gap:64px;margin-top:64px}
  .zz__row{flex-direction:row;align-items:flex-end}
  .zz__row:nth-child(even){flex-direction:row-reverse}
  .zz__media{flex:704 1 0;min-width:0;width:auto;margin-left:0;aspect-ratio:704/396;border-radius:30px}
  .zz__body{flex:320 1 0;min-width:0}
  .zz__media--split{display:grid;aspect-ratio:704/396;grid-template-columns:minmax(0,284fr) minmax(0,396fr);column-gap:24px;border-radius:0}
  .zz__media--split>.media,.zz__media--split>.media:first-child{aspect-ratio:auto;border-radius:30px}
  .zz__title{font:var(--t-zigzag);letter-spacing:0}

  /* ---- tramo tablet 768–1099 (no existe en Figma: lo decide el home) ---- */
  @container (max-width:1099.9px){
    /* hero: 2 columnas con izquierda al 30%, Objective/Outcome apilados */
    .cs-hero__body{grid-template-columns:30% minmax(0,1fr)}
    .cs-hero__cols{grid-template-columns:minmax(0,1fr);gap:32px}
    /* constraints: sigue en curva vertical (la de mobile) con tipografía desktop */
  }
}

/* constraints horizontales desde 1100: grilla de 4 en fracciones del wrap.
   Todo escala con el ancho (curva, pasos y desniveles), así la línea pasa
   siempre por los puntos sin deformarse. */
@container (min-width:1100px){
  .curve--h{display:block;width:100%;height:auto}
  .curve--v{display:none}
  .cs-constraints__list{flex-direction:row;align-items:flex-start;gap:calc(100% * 72 / 1057);aspect-ratio:1057/416}
  .ci{flex:0 0 calc(100% * 210 / 1057);padding:50px 0 0;margin-top:calc(100% * var(--my))}
  .ci__dot{left:0;top:0}
  .ci__title{margin-top:16px}
  .ci__text{margin-top:8px}
  .js .ci__num,.js .ci__title,.js .ci__text{transform:translateY(14px);filter:blur(6px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1),color .4s ease}
  .js .ci__num{transition-delay:.4s}.js .ci__title{transition-delay:.52s}.js .ci__text{transition-delay:.64s}
  .js .ci.is-on .ci__num,.js .ci.is-on .ci__title,.js .ci.is-on .ci__text{transform:none;filter:none}
  .js .ci.is-on .ci__dot{animation:ci-appear 1.1s linear .4s both,ci-breathe 4.8s cubic-bezier(.45,0,.55,1) calc(1.8s + var(--bd,0s)) infinite}
}

/* closing scene con caption dentro de la escena (desde 1100; antes va debajo) */
@container (min-width:1100px){
  .csc--cap{position:relative}
  .csc--cap .csc__scene{align-content:start;padding-top:14.236cqw}
  .csc--cap .csc__caption{position:absolute;left:0;right:0;bottom:calc(24px + 14.236cqw);max-width:69.17cqw;margin:0 auto;text-align:center}
}
/* (2026-10-20) manchas desktop pintadas en canvas (js/case-study.js, __mcGlowCv): ver allí el porqué */
.glow-cv-c{display:none}
@media (min-width:768px){
  html.glow-cv .glow-cv-c{display:block;position:absolute;pointer-events:none}
  html.glow-cv .glow.cv-on{animation-name:none!important;will-change:auto!important;visibility:hidden!important}
  html.glow-cv .glow.cv-on>img{will-change:auto!important}
}