/* BISO · páginas de proyecto (/trabajo/<slug>). Va después de home.css: usa sus tokens y sus componentes (menú, miniaturas
   .work-card, .results, .cta y el pie) y suma solo lo propio. Plantilla: offbrand-patrones.md, parte 3.
   Nada oculto sin JS: los data-reveal son marcas para la capa de movimiento, que oculta lo suyo cuando crea el disparador. */

/* ───────── 1. Portada ─────────
   Desde 1101 px: el nombre arriba (difference: se invierte sobre el video), el video desde --col hasta el borde derecho con
   las esquinas izquierdas redondeadas, y la ficha abajo en la columna izquierda. --col se mide desde el borde de .wrap. */
.case-hero{--col:clamp(300px,24vw,420px);--media-left:calc(max(0px,(100vw - 1360px) / 2) + var(--col));position:relative;min-height:max(640px,100svh);background:var(--night);color:var(--white);overflow:hidden}
.case-hero-media{position:absolute;z-index:0;top:96px;bottom:clamp(20px,4vh,40px);left:var(--media-left);right:0;border-radius:10px 0 0 10px;overflow:hidden;background:#111a14}
.case-hero-video{width:100%;height:100%;object-fit:cover}
/* Velo oscuro arriba del video, solo hasta 1100 px: ahí el video arranca debajo del menú (blanco, por data-nav-theme="dark")
   y con un cuadro claro (Desert Soul, Nacional) el menú bajaba a 1,2:1. Con el velo, de 4,6 a 9,8:1. Desde 1101 no va: el
   video empieza debajo de la barra, y sobre el nombre en difference un velo parcial lleva los claros a medios tonos y le
   baja el contraste (medido: del 23 al 47-65 % de la letra bajo 3:1). */
@media(max-width:1100px){.case-hero-media::after{content:"";position:absolute;inset:0 0 auto;z-index:1;height:max(150px,45%);pointer-events:none;background:linear-gradient(180deg,rgba(10,13,11,.72),rgba(10,13,11,0))}}
/* Medio que no es 16:9 (el screencast vertical del tren): entero y centrado, sobre --deep. */
.case-hero--contain .case-hero-media{background:var(--deep)}
.case-hero--contain .case-hero-video{object-fit:contain;padding-block:clamp(16px,3vh,32px)}
/* Tríptico (Samadhi): tres verticales lado a lado en un 16:9. Recortado como las otras portadas perdía el paquete, que va
   al borde derecho: la caja toma la proporción del video y se ancla abajo, a la línea de la ficha como las demás; lo que
   sobra queda arriba en --night, al lado del nombre. */
.case-hero--triptico .case-hero-media{top:auto;aspect-ratio:16/9;max-height:calc(100% - 96px - clamp(20px,4vh,40px))}
.case-hero-inner{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:max(640px,100svh);padding-top:124px;padding-bottom:clamp(28px,6vh,64px)}
.case-title{font-size:clamp(56px,8vw,136px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
/* Una columna, en el orden del copy (Cliente · Servicios · Año · Resultados): en dos, Cliente y Año quedaban solos en su fila
   a media columna y "Exploración del estudio" cortaba en dos renglones. */
.case-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;width:calc(var(--col) - var(--gutter) - 32px);margin:0}
.case-facts dt{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1.5;color:var(--muted-dark)}
.case-facts dd{margin:8px 0 0;font-size:var(--fs-body);line-height:1.45;color:var(--white)}
.case-facts ul{list-style:none;margin:0;padding:0}

/* ───────── 2. Planteo, proceso y cortes (papel) ─────────
   Columna de etiquetas a la izquierda y contenido al medio (3 · 7 · 2), como el planteo de OFF+BRAND. */
.case-body{background:var(--paper);padding-block:var(--section-y)}
.case-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);gap:var(--col-gap);align-items:baseline}
.case-row+.case-row{margin-top:var(--block-y)}
.case-key{grid-column:1}
.case-val{grid-column:2}
.case-pill{display:inline-block;padding:14px 26px;border:1px solid var(--ink);border-radius:50px;font-size:clamp(17px,.5vw + 14px,22px);line-height:1.35;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.case-objective{max-width:22ch;font-size:clamp(26px,1.8vw + 14px,44px);line-height:1.06;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.case-text{margin-top:28px;max-width:58ch;font-size:var(--fs-lead);line-height:1.65;color:var(--text-2)}
.case-text:first-child{margin-top:0}
.case-row--process{margin-top:var(--section-y)}
.case-row--process .case-text{margin-top:0}
.case-sub{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.03em;color:var(--ink)}

/* Video principal: hasta 1500 px. Movimiento lo hace crecer del 70 al 100 % (data-case-grow); sin JS va entero. */
.case-main{position:relative;width:min(1500px,calc(100% - 2 * var(--gutter)));aspect-ratio:16/9;margin:var(--section-y) auto 0;border-radius:10px;overflow:hidden;background:#111a14}
.case-main--vertical{width:min(460px,calc(100% - 2 * var(--gutter)));aspect-ratio:9/16}
.case-main-video{width:100%;height:100%;object-fit:cover}

/* Cortes: 2 columnas de cuadrados (4 de verticales). La par baja --clip-shift con la propiedad translate (no transform, que es
   de movimiento); el padding de abajo la compensa. Movimiento puede llevar --clip-shift a 0 con el scroll (data-case-clips). */
.case-clips{--clip-shift:0px;list-style:none;max-width:1180px;margin:var(--section-y) auto 0;padding:0 0 var(--clip-shift);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.case-clip:nth-child(even){translate:0 var(--clip-shift)}
.case-clip video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#1b2520}
.case-clips--vertical{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.case-clips--vertical video{aspect-ratio:9/16}
@media(min-width:801px){.case-clips{--clip-shift:clamp(48px,7vw,120px)}}
/* Tres cortes cuadrados: una fila de tres (en dos columnas el tercero quedaba solo, con un hueco al lado). La del medio es la
   corrida, así que la fila sigue escalonada. */
@media(min-width:601px){.case-clips--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Tres verticales (Samadhi): también una fila de tres, del tamaño de los cuatro verticales de antes. Más ancha, cada corte
   pasaba el alto de la pantalla. */
.case-clips--vertical.case-clips--3{max-width:1000px}

/* ───────── 3. Resultados (el molde de la home, sobre --night) ───────── */
.case-results .results-list{margin-top:28px}
.case-results-text{margin-top:32px;max-width:52ch;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2-dark)}

/* ───────── 4. Más proyectos (las miniaturas de la home, sobre --soft) ───────── */
/* --tile-pad lo define .feature en home.css; las miniaturas lo necesitan para ubicar el nombre y la cruz abajo. */
.case-more{--tile-pad:clamp(16px,2vw,28px);background:var(--soft);padding-block:var(--section-y)}
.case-more-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:var(--block-y)}
.case-more-title{font-size:var(--fs-cta);line-height:.95;letter-spacing:-.05em;text-transform:uppercase;color:var(--ink)}
.case-more-title span{display:block}
.case-more-title span+span{padding-left:1.2em}
.case-more-head .pill-link{margin-top:0}
.case-more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ───────── 5. Cierre ───────── */
.case-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.case-cta-mail{font-size:var(--fs-small);color:var(--text-2)}
.case-cta-mail a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.case-cta-mail a:hover{text-decoration-thickness:2px}

/* ───────── 6. Índice /trabajo (copy-home-v3.md, Anexo A) ─────────
   El título y la grilla son los de "Más proyectos"; abajo, el archivo de solo texto (rubro chico, nombre grande, qué hicimos). */
.work-index{padding-top:calc(var(--section-y) + 64px)}
.work-index .case-more-title{font-size:clamp(48px,9vw,136px)}
.work-index-lead{max-width:34ch;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.work-archive{margin-top:var(--section-y)}
.work-archive .label{color:var(--text-2)}
.archive-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--rule-strong)}
.archive-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.4fr);gap:var(--col-gap);align-items:baseline;padding-block:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--rule-strong)}
.archive-kind{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1.5;color:var(--text-2)}
.archive-name{font-size:var(--fs-h3-big);line-height:1;letter-spacing:-.045em;text-transform:uppercase;color:var(--ink)}
.archive-what{font-size:var(--fs-body);line-height:1.5;color:var(--text-2)}

/* ───────── 7. Responsive ───────── */
/* Hasta 1100 px (como OFF+BRAND en celular): el video de borde a borde arriba, debajo del menú; después el nombre y la ficha. */
@media(max-width:1100px){
  .case-hero,.case-hero-inner{min-height:0}
  .case-hero-media{position:relative;inset:auto;height:max(300px,56svh);border-radius:0}
  /* El tríptico entero mide 219 px a 390 de ancho: bajo el menú perdía un tercio. Arranca debajo, sin el velo. */
  .case-hero--triptico .case-hero-media{bottom:auto;height:auto;max-height:none;margin-top:84px}
  .case-hero--triptico .case-hero-media::after{content:none}
  .case-hero-inner{padding-top:clamp(28px,5vw,48px);padding-bottom:var(--block-y)}
  .case-title{font-size:clamp(44px,11vw,120px);mix-blend-mode:normal}
  .case-facts{width:auto;max-width:560px}
  .case-row{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
  .case-more-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media(max-width:800px){
  .case-row{grid-template-columns:1fr;gap:14px}
  .case-key,.case-val{grid-column:1}
  .case-pill{padding:12px 20px}
  .archive-row{grid-template-columns:1fr;gap:8px}
}
@media(max-width:600px){
  .case-clips{grid-template-columns:1fr;gap:14px}
  .case-clips--vertical{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Los tres verticales (Samadhi) en una columna centrada: en tres medían 109 px de ancho a 390. */
  .case-clips--vertical.case-clips--3{grid-template-columns:minmax(0,1fr);max-width:260px;gap:14px}
  .case-more-grid{grid-template-columns:1fr;gap:16px}
}