/* case.css · plantilla común de case studies (v5). Va después de global.css y case-base.css */
:root{
  --paper:#F9F8F6; --muted:#6E6A63; --muted-d:#A9A59E; --line:#D9D6D0; --line-d:#2A2927;
  --g:var(--pad); --max:1440px; --r:8px; --gap:clamp(12px,1.6vw,24px);
  --accent:var(--green);
}
body.case-vera{--accent:var(--green)}
body.case-bancosol{--accent:var(--purple)}
body.case-viajante{--accent:var(--yellow)}
body{background:var(--paper);color:var(--ink)}
.wrap{width:auto}
main a{color:inherit}
video{width:100%;background:#111;border-radius:var(--r)}
img{height:auto}

/* ---------- Tipografía: Fraunces habla, General Sans explica ---------- */
main h2{font-family:var(--text);font-weight:500;font-size:clamp(30px,3.2vw,44px);line-height:1.1;letter-spacing:-.02em;font-variation-settings:normal}
main h3{font-family:var(--text);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.01em;font-variation-settings:normal}
main .display,main h2.display{font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.02em}
.eyebrow{font:500 14px/1.4 var(--text);letter-spacing:0;text-transform:none;color:var(--muted)}
.dark .eyebrow{color:var(--muted-d)}
.intro{font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.prose p,.subsection p,.section p{max-width:66ch}
figcaption{font-size:14px;color:var(--muted);line-height:1.45;margin-top:10px}
.dark figcaption{color:var(--muted-d)}

/* ---------- Secciones ---------- */
.section{padding:clamp(80px,9vw,136px) 0}
.dark{background:var(--ink);color:var(--paper)}
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px var(--gap)}
.split>.rail{grid-column:1/span 3}
.split>div:not(.rail),.split>p:not(.rail)+div{grid-column:4/span 9}
.rail{position:sticky;top:100px;align-self:start}
.rail .eyebrow,.eyebrow.rail{font-variant-numeric:tabular-nums}
.statement{padding:clamp(96px,11vw,160px) 0;margin-top:0}
.statement h2.display{font-size:clamp(44px,6vw,96px);line-height:.98}
.statement h2.display span{color:var(--accent)}
.statement-copy{color:var(--muted-d);font-size:18px;max-width:52ch;margin-top:28px}

/* ---------- Medios ---------- */
.gallery img,.compare video,.film video,.photo-wide img{border-radius:var(--r)}
.media-button{display:block;width:100%;padding:0;border:0;background:none;border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.media-button img{transition:transform 600ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){.media-button:hover img{transform:scale(1.02)}}
.selected figcaption::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:1px}
.dark .selected figcaption::before{background:var(--accent)}
.pill{font:500 13px/1 var(--text);border:1px solid currentColor;border-radius:999px;padding:6px 10px;letter-spacing:0;text-transform:none}

/* ---------- Datos ---------- */
.metric strong{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--ink)}
.dark .metric strong{color:var(--accent)}
.flow span,.section:not(.dark) .flow span{color:var(--muted)}
.dark .flow span{color:var(--accent)}
.version.final .tag{color:var(--ink)}
.dark .version.final .tag{color:var(--accent)}
.version .tag small{letter-spacing:0;text-transform:none;font-weight:500}
.dark .section-tag b,.section:not(.dark) .section-tag b{color:inherit}
.learnings li:before{content:counter(lessons,decimal-leading-zero)}
.dark :focus-visible,:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- Hero del caso ---------- */
.c-hero{background:var(--ink);color:var(--cream);padding:clamp(104px,10vw,128px) 0 clamp(56px,6vw,88px)}
.c-crumb{font-size:14px;color:var(--g3);display:flex;gap:8px;flex-wrap:wrap}
.c-crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--g4)}
@media(hover:hover) and (pointer:fine){.c-crumb a:hover{color:var(--cream);text-decoration-color:var(--cyan)}}
.c-title{display:grid;grid-template-columns:repeat(12,1fr);gap:16px var(--gap);align-items:end;margin-top:clamp(20px,3vw,40px)}
.c-title h1{grid-column:1/span 8;font-weight:900;font-size:clamp(56px,10vw,168px);line-height:.92;letter-spacing:-.02em}
.c-title h1 em{display:block;font-weight:800;font-size:.42em;line-height:1.05;margin-top:.12em;letter-spacing:-.01em}
.c-title .c-by{grid-column:10/span 3;color:var(--g2);font-size:16px;line-height:1.45}
.c-stage{margin-top:clamp(32px,4vw,56px);position:relative}
.c-stage .frame-clip{overflow:hidden;border-radius:clamp(8px,1vw,14px)}
.c-stage .frame{aspect-ratio:2.81/1;border-radius:0;background:var(--g9,#141414)}
.c-stage .frame img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-stage .frame .gl{top:-1px;bottom:-1px;width:36.2%}
.c-stage .frame .gl.l{left:-1px}.c-stage .frame .gl.r{right:-1px}
.c-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 16px;border-radius:999px;border:0;background:var(--cream);color:var(--ink);font:600 15px/1 var(--text);cursor:pointer;
  transition:transform var(--d-press) var(--ease-out),background-color var(--d-ui) ease}
.c-play:active{transform:translate(-50%,-50%) scale(.97)}
@media(hover:hover) and (pointer:fine){.c-play:hover{background:var(--cyan)}}
.c-play svg{width:18px;height:18px}
.c-play small{font-weight:500;color:var(--g4)}
.c-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gap);margin:clamp(32px,4vw,48px) 0 0;border-top:1px solid var(--line-d)}
.c-facts>div{padding:18px 0 0}
.c-facts dt{font-size:14px;color:var(--g3);margin:0 0 6px}
.c-facts dd{margin:0;font-size:18px;font-weight:500;line-height:1.3}

/* ---------- Índice de capítulos ---------- */
.c-index{background:var(--ink);color:var(--cream);padding:0 0 clamp(64px,7vw,96px)}
.c-index h2{font:500 14px/1.4 var(--text);color:var(--g3);margin-bottom:14px;letter-spacing:0}
.c-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gap);counter-reset:ch}
.c-index li{border-top:1px solid var(--line-d)}
.c-index a{display:flex;gap:12px;align-items:baseline;padding:12px 0 14px;font-size:16px;text-decoration:none;transition:color var(--d-ui) ease}
.c-index a span{font-size:13px;color:var(--g3);font-variant-numeric:tabular-nums;min-width:2ch}
@media(hover:hover) and (pointer:fine){.c-index a:hover{color:var(--cyan)}}

/* ---------- Cierre: créditos, siguiente caso, contacto ---------- */
.c-end{background:var(--ink);color:var(--cream);padding:clamp(96px,10vw,152px) 0 clamp(64px,7vw,96px)}
.c-credits{display:grid;grid-template-columns:repeat(12,1fr);gap:16px var(--gap);padding-bottom:clamp(56px,6vw,88px);border-bottom:1px solid var(--line-d)}
.c-credits h2{grid-column:1/span 3;font:500 14px/1.4 var(--text);color:var(--g3);letter-spacing:0}
.c-credits .credits-body{grid-column:4/span 9;font-size:clamp(20px,2vw,26px);line-height:1.35;display:grid;gap:6px}
.c-credits .credits-body p{margin:0}
.c-credits .data-note{font-size:15px;color:var(--g3);margin-top:10px}
.c-next{display:grid;grid-template-columns:repeat(12,1fr);gap:24px var(--gap);align-items:end;padding-top:clamp(56px,6vw,88px);text-decoration:none;color:inherit}
.c-next .lbl-n{grid-column:1/-1;font-size:14px;color:var(--g3)}
.c-next .c-next-media{grid-column:1/span 7;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#141414}
.c-next .c-next-media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.c-next .c-next-copy{grid-column:8/span 5}
.c-next h3{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:clamp(40px,5vw,80px);line-height:.95;letter-spacing:-.02em}
.c-next h3 em{display:block;font-size:.5em;margin-top:.15em}
.c-next p{color:var(--g2);margin-top:14px;max-width:36ch}
.c-next .go{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--g4);border-radius:50%;margin-top:22px;transition:background-color var(--d-ui) ease,border-color var(--d-ui) ease,color var(--d-ui) ease}
@media(hover:hover) and (pointer:fine){
  .c-next:hover .c-next-media img{transform:scale(1.03)}
  .c-next:hover .go{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
}
.c-next:focus-visible .go{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.c-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(72px,8vw,120px);padding-top:32px;border-top:1px solid var(--line-d)}
.c-cta p{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:clamp(28px,3vw,44px);line-height:1.05;max-width:22ch}
.c-cta .btn{color:var(--cream);min-height:44px}
.c-cta .btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* ---------- Visor de imágenes y película ---------- */
dialog.c-viewer,dialog.c-film{border:0;padding:0;background:#0b0b0b;color:var(--cream);width:min(1400px,96vw);max-width:96vw;max-height:94dvh;border-radius:12px;overflow:hidden;
  opacity:0;transform:scale(.97);transition:opacity 150ms ease,transform 150ms var(--ease-out),overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog.c-viewer[open],dialog.c-film[open]{opacity:1;transform:none;transition-duration:220ms}
@starting-style{dialog.c-viewer[open],dialog.c-film[open]{opacity:0;transform:scale(.97)}}
dialog.c-viewer::backdrop,dialog.c-film::backdrop{background:rgb(0 0 0 / 0);transition:background-color 150ms ease,overlay 150ms allow-discrete,display 150ms allow-discrete}
dialog.c-viewer[open]::backdrop,dialog.c-film[open]::backdrop{background:rgb(0 0 0 / .88)}
@starting-style{dialog.c-viewer[open]::backdrop,dialog.c-film[open]::backdrop{background:rgb(0 0 0 / 0)}}
.c-dlg-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px 12px 20px}
.c-dlg-head p{font-size:14px;color:var(--g2);margin:0}
.c-dlg-head .count{color:var(--g3);font-variant-numeric:tabular-nums;margin-right:auto;margin-left:12px}
.c-dlg-btn{font:500 14px/1 var(--text);color:var(--cream);background:none;border:1px solid var(--g4);border-radius:999px;min-height:40px;min-width:40px;padding:0 14px;cursor:pointer;display:inline-grid;place-items:center;transition:background-color var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.c-dlg-btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.c-dlg-btn:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}}
.c-dlg-body{position:relative;display:grid;place-items:center;padding:0 16px}
.c-dlg-body img{max-height:76dvh;max-width:100%;width:auto;border-radius:6px;transition:opacity 160ms ease}
.c-dlg-body img.swap{opacity:0}
.c-dlg-cap{font-size:14px;color:var(--g2);text-align:center;padding:14px 20px 18px;margin:0}
.c-film video{border-radius:0;max-height:80dvh}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .c-title h1{grid-column:1/-1}.c-title .c-by{grid-column:1/-1}
  .c-index ol{grid-template-columns:repeat(2,1fr)}
  .c-next .c-next-media,.c-next .c-next-copy{grid-column:1/-1}
  .split>.rail,.split>div:not(.rail){grid-column:1/-1}
  .rail{position:static}
  .c-credits h2,.c-credits .credits-body{grid-column:1/-1}
}
@media(max-width:760px){
  .c-stage .frame-clip{margin-inline:calc(var(--pad) * -1);border-radius:0}
  .c-facts{grid-template-columns:1fr 1fr;gap:0 16px}
  .c-index ol{grid-template-columns:1fr 1fr;gap:0 16px}
  .c-index a{font-size:15px}
  .c-play{top:auto;bottom:-24px;transform:translateX(-50%)}
  .c-play:active{transform:translateX(-50%) scale(.97)}
}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  .media-button img,.c-next .c-next-media img{transition:none}
  .media-button:hover img,.c-next:hover .c-next-media img{transform:none}
  dialog.c-viewer,dialog.c-film,dialog.c-viewer[open],dialog.c-film[open]{transform:none}
  .c-play:active{transform:translate(-50%,-50%)}
}

/* ---------- Componentes añadidos con Menú Trueno ---------- */
.gallery.cols1{grid-template-columns:minmax(0,1fr)}
.mt-audio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap);margin-top:40px;border-top:1px solid var(--line)}
.mt-audio>div{padding:22px 0 26px;border-bottom:1px solid var(--line)}
.mt-audio h3{margin-top:6px}
.mt-audio p:not(.eyebrow){font-size:15px;color:var(--muted);margin-top:8px;max-width:44ch}
.mt-alt summary{cursor:pointer;margin-top:14px;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.table-scroll{margin-top:40px}
.mt-graphics .media-button{background:#111;aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(16px,2vw,28px)}
.mt-graphics .media-button img{width:100%;height:100%;object-fit:contain;border-radius:0}
.c-closing{padding-bottom:clamp(56px,6vw,88px);margin-bottom:clamp(56px,6vw,88px);border-bottom:1px solid var(--line-d)}
.c-closing p.display{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:800;font-size:clamp(48px,7vw,112px);line-height:.95;letter-spacing:-.02em}
.c-closing p.display em{color:var(--accent);font-style:italic}
.c-closing p:not(.display){margin-top:20px;color:var(--g2);font-size:clamp(18px,1.6vw,22px);max-width:40ch}
body.case-menu-trueno{--accent:var(--yellow)}
@media(max-width:760px){.mt-audio{grid-template-columns:minmax(0,1fr)}}
.metric:nth-child(4n+1){padding-left:0}
@media(max-width:900px){.metric:nth-child(odd){padding-left:0}}
@media(max-width:560px){.metrics{grid-template-columns:1fr 1fr}.metric{border-right:1px solid var(--line);padding-left:14px}.metric:nth-child(2n){border-right:0}.metric:nth-child(odd){padding-left:0}}
/* v6: los bloques de prompt y guion no dependen del idioma de la interfaz */
html[data-lang] body details pre[lang]{display:block}