/* Componentes de los case studies (VERA, Bancosol, Viajante) unificados y pasados a los tokens del sistema v4 */
h1,h2,h3,p,figure{margin:0}
img,video{display:block;max-width:100%;height:auto}
.film{margin-top:32px;scroll-margin-top:110px}
.film video{aspect-ratio:16/9}
.film figcaption{display:flex;justify-content:space-between;gap:12px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:36px 0 0;border-top:1px solid #000}
.facts>div{padding:20px 18px 24px;border-right:1px solid var(--line)}
.facts>div:first-child{padding-left:0}
.facts>div:last-child{border-right:0}
dt{font-size:13px;color:var(--muted);margin-bottom:8px}
dd{margin:0;font-size:19px;font-weight:600;line-height:1.3}
.dark{background:#000;color:var(--paper);--muted:var(--muted-d);--line:#33312e}
@media(hover:hover) and (pointer:fine){.dark a:hover{color:var(--cyan)}}
.statement{margin-top:30px;padding:100px 0}
.split{display:grid;grid-template-columns:1fr 3fr;gap:var(--g)}
.rail{align-self:start;position:sticky;top:110px}
.statement h2{font-size:clamp(44px,6.7vw,100px);line-height:1.03}
.statement h2 span{color:var(--accent)}
.statement-copy{margin-top:32px;color:#c4c1ba;max-width:55ch;font-size:20px}
.section{padding:90px 0;border-top:1px solid var(--line)}
.section-head{margin-bottom:36px}
.section-head h2{max-width:22ch}
.intro{font-size:clamp(20px,2.2vw,27px);line-height:1.4;max-width:52ch;margin:24px 0}
.prose{max-width:66ch}
.prose p+p{margin-top:18px}
.muted{color:var(--muted)}
.gallery{display:grid;gap:24px 18px;margin-top:32px}
.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
figure{min-width:0}
figcaption{font-size:14px;line-height:1.45;color:var(--muted);margin-top:10px}
.media-button{display:block;border:0;background:transparent;padding:0;width:100%;text-align:left;color:inherit;position:relative}
@media(hover:hover) and (pointer:fine){.media-button:hover img{filter:brightness(1.05)}}
.media-button img{width:100%;aspect-ratio:16/9;object-fit:cover}
.portrait img{aspect-ratio:3/4;object-fit:cover}
.wide-strip img{aspect-ratio:auto;object-fit:contain;background:#efede9}
.selected{position:relative}
.selected:before{content:'Elegida';position:absolute;left:10px;top:10px;z-index:2;padding:6px 10px;background:var(--accent);color:#000;font-size:12px;font-weight:600}
html[lang=en] .selected:before{content:'Selected'}
.discarded:before{content:'Descartada';background:#efede9;color:var(--muted);border:1px solid var(--line)}
html[lang=en] .discarded:before{content:'Discarded'}
.video-holder{position:relative}
.missing .media-button,.missing .video-holder{background:#efede9;border:1px dashed #b9b5ad;aspect-ratio:16/9;min-height:120px;display:block}
.dark .missing .media-button,.dark .missing .video-holder{background:#15140f;border-color:#3c3a35}
.missing img,.missing video{display:none}
.slot-label{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font-size:12px;line-height:1.6;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.missing.portrait .media-button{aspect-ratio:3/4}
.missing.wide-strip .media-button{aspect-ratio:21/9}
.film.missing .video-holder{aspect-ratio:16/9}
.caption-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.subsection{margin-top:52px;padding-top:32px;border-top:1px solid var(--line)}
.subsection>p{max-width:66ch;margin-top:14px}
.text-link{display:inline-block;margin-top:24px;font-size:15px;font-weight:600}
@media(hover:hover) and (pointer:fine){.text-link:hover{background:var(--cyan);color:#000}}
.pill{font-size:12px;font-weight:600;padding:4px 8px;background:var(--accent);color:#000;display:inline-block}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.compare video{aspect-ratio:16/9;object-fit:contain}
.flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin:34px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow>div{padding:22px 22px 26px;border-right:1px solid var(--line)}
.flow>div:first-child{padding-left:0}
.flow>div:last-child{border:0}
.flow span{display:block;color:var(--accent);font-size:14px;margin-bottom:12px}
.dark .flow span{color:var(--accent)}
.section:not(.dark) .flow span{color:var(--ink)}
.flow strong{font-size:20px;display:block;line-height:1.2}
.flow p{font-size:15px;color:var(--muted);margin-top:12px}
.prompt{margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.prompt summary{cursor:pointer;font-size:15px;font-weight:600}
.prompt pre{font:400 15px/1.6 var(--text);white-space:pre-wrap;max-width:80ch;margin:24px 0;color:var(--muted)}
.versions{margin-top:36px;border-top:1px solid var(--line)}
.version{display:grid;grid-template-columns:110px 1fr;gap:var(--g);padding:26px 0;border-bottom:1px solid var(--line)}
.version .tag{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.03em}
.version .tag small{display:block;font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.version h3{font-size:20px;margin-bottom:8px}
.version p{max-width:62ch;color:var(--muted)}
.version.final .tag{color:var(--ink)}
.dark .version.final .tag{color:var(--accent)}
.defects{list-style:none;padding:0;margin:32px 0 0;border-top:1px solid var(--line)}
.defects li{border-bottom:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:1fr 1.6fr;gap:var(--g)}
.defects h3{font-size:21px}
.defects .verdict{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.defects p{max-width:60ch}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:34px}
.metric{padding:22px 18px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.metric:first-child{padding-left:0}
.metric:nth-child(4n){border-right:0}
.metric strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.04em;margin:14px 0 10px;color:var(--accent)}
.metric small{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.data-note{margin-top:28px;max-width:78ch;font-size:14px;color:var(--muted)}
.dark .data-note{color:var(--muted-d)}
.tools{margin-top:30px}
.tools>div{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:20px}
.tools dt{font-size:19px;color:inherit;font-weight:600;margin:0}
.tools dd{font-size:16px;font-weight:400;color:var(--muted)}
.learnings{list-style:none;padding:0;margin:30px 0 0;counter-reset:lessons}
.learnings li{counter-increment:lessons;border-top:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:50px 1fr;gap:15px}
.learnings li:before{content:'0' counter(lessons);font-size:14px;color:var(--muted)}
.learnings p{margin-top:12px;max-width:60ch}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:24px}.rail{position:static}.section{padding:65px 0}.statement{padding:70px 0}.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.facts{grid-template-columns:1fr 1fr}.facts>div:nth-child(2){border-right:0}.facts>div{border-bottom:1px solid var(--line)}.facts>div:nth-child(3){padding-left:0}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2n){border-right:0}.defects li{grid-template-columns:1fr;gap:12px}.version{grid-template-columns:1fr;gap:10px}}
@media(max-width:560px){.film{margin-top:24px}.film figcaption{flex-direction:column;gap:3px}.facts dd{font-size:17px}.facts>div{padding:16px 10px}.statement h2{font-size:12vw}.statement-copy{font-size:18px}.cols2,.cols3,.compare{grid-template-columns:1fr}.cols4{gap:22px 12px}.flow{grid-template-columns:1fr}.flow>div,.flow>div:first-child{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}.metrics{grid-template-columns:1fr}.metric{border-right:0;padding-left:0}.tools>div{grid-template-columns:1fr;gap:0}.caption-row{align-items:start;flex-direction:column;gap:8px}}
.prose p{color:inherit}
figcaption strong{color:inherit;font-weight:600}
.media-button{display:block;border:0;background:transparent;padding:0;width:100%;text-align:left;color:inherit}
.contain img{object-fit:contain;background:#efede9}
.selected:before{content:'Seleccionada';position:absolute;left:10px;top:10px;z-index:1;padding:6px 10px;background:var(--accent);color:#000;font-size:12px;font-weight:600}
.inline-label{font-size:13px;line-height:1.4;color:var(--muted)}
.section-tag{color:var(--muted);margin-bottom:15px}
.section-tag b{font-size:48px;color:var(--accent);display:block;line-height:1.2;letter-spacing:-.05em}
.dark .section-tag b{color:var(--accent)}
.section:not(.dark) .section-tag b{color:#000}
.photo-wide{margin-top:32px}
.photo-wide img{width:100%}
.tools dt{font-size:19px;color:inherit;font-weight:600}
audio{display:block;width:100%;margin-top:16px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:24px}.rail{position:static}.section{padding:65px 0}.statement{padding:70px 0}.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}.facts{grid-template-columns:1fr 1fr}.facts>div:nth-child(2){border-right:0}.facts>div{border-bottom:1px solid var(--line)}.facts>div:nth-child(3){padding-left:0}.section-head h2{max-width:25ch}}
@media(max-width:560px){.film{margin-top:24px}.film figcaption{flex-direction:column;gap:3px}.facts dd{font-size:17px}.facts>div{padding:16px 10px}.statement h2{font-size:12vw}.statement-copy{font-size:18px}.cols2,.cols3,.compare{grid-template-columns:1fr}.cols4{gap:22px 12px}.cols4 figcaption{font-size:13px}.flow{grid-template-columns:1fr}.flow>div,.flow>div:first-child{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}.tools>div{grid-template-columns:1fr;gap:0}.caption-row{align-items:start;flex-direction:column;gap:8px}}
.time-note{font-size:14px;color:var(--muted);max-width:65ch;margin-top:20px}
.timing span{font-size:36px;line-height:1.2;font-weight:600;margin-bottom:20px}
.color-gallery video{aspect-ratio:1280/400}
.audio-sample{max-width:640px}
.photo-wide .media-button img{aspect-ratio:auto;object-fit:contain}
.portrait .media-button img{aspect-ratio:3/4}
.final-gallery{gap:24px 20px}
@media(max-width:450px){.color-gallery{margin-left:calc(var(--g)*-1);margin-right:calc(var(--g)*-1)}.color-gallery figcaption{padding-inline:var(--g)}}
.spaced{margin-top:22px}
.gallery.cols1{grid-template-columns:1fr}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.palette span{display:block;height:48px;border:1px solid #8a8883}
.palette small{display:block;margin-top:8px}
.quote{font-size:clamp(26px,3vw,42px);line-height:1.25;margin:26px 0 30px;letter-spacing:-.02em}
.final-stage{position:relative;background:#141512;aspect-ratio:16/9;overflow:hidden}
.final-stage>img{width:100%;height:100%;object-fit:cover}
.final-stage:has(#final-pending:not([hidden])):after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 90%);pointer-events:none}
#final-pending{position:absolute;z-index:1;left:5%;bottom:7%;color:#fff;max-width:90%}
#final-pending .eyebrow{background:var(--accent);color:#000;padding:7px 10px;display:inline-block;margin-bottom:22px}
#final-pending .display{font-size:clamp(34px,5.8vw,90px);line-height:1.04}
#final-pending>p:last-child{font-size:15px;margin-top:18px}
.audio-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.audio-grid h3{font-size:18px;margin-bottom:16px}
audio{max-width:100%;width:100%}
.take-details{margin-top:20px}
.take-details summary{cursor:pointer;font-weight:600;font-size:15px}
.take-details figure{margin-top:16px}
.timing{margin:34px 0}
.timing>div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.timing>div>span{color:var(--accent);font-size:18px}
.timing h3{font-size:21px;margin-bottom:7px}
.timing p{color:var(--muted)}
.table-scroll{overflow:auto;margin-top:36px}
table{border-collapse:collapse;width:100%;font-size:15px;text-align:left}
caption{text-align:left;margin-bottom:18px;font-weight:600}
th,td{border-bottom:1px solid var(--line);padding:14px 12px;vertical-align:top}
th:first-child{padding-left:0}
tbody th{font-weight:400}
td:last-child{text-align:right;white-space:nowrap}
thead th{font-size:13px}
tfoot{font-weight:600;border-top:2px solid #000}
tfoot td{font-size:17px}
.section:not(.dark) .metric strong{color:var(--ink)}
.section:not(.dark) .metric small{color:var(--muted)}
.section .subsection video{margin-top:22px}
.section p a{text-decoration-thickness:1px}
.gallery .media-button:focus-visible{outline-offset:3px}
@media(max-width:560px){.audio-grid{grid-template-columns:1fr}#final-pending .eyebrow{margin-bottom:10px;font-size:10px}#final-pending .display{font-size:28px}#final-pending>p:last-child{font-size:11px;margin-top:8px}.timing>div{grid-template-columns:90px 1fr;gap:12px}.timing h3{font-size:19px}.palette{gap:8px}th,td{padding:10px 8px;font-size:13px}tfoot td{font-size:13px}.film figcaption{font-size:12px}}
.moment-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.moment-buttons button{border:1px solid #252525;background:transparent;padding:9px 12px;font-size:14px}
.moment-buttons button[aria-pressed=true]{background:var(--accent);color:#000}
.moment-pair{margin-top:20px}
.moment-observation{border-left:4px solid var(--accent);padding:6px 0 6px 20px;margin-top:24px}
.moment-observation h4{font-size:22px;line-height:1.2;margin:0 0 12px}
.moment-observation p{max-width:68ch}
.analysis-findings{margin-top:42px}
.time-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0}
.time-cards>div{padding:22px 20px;border:1px solid var(--line)}
.time-cards strong{display:block;font-family:var(--display);color:var(--ink);font-size:34px;line-height:1.2;margin:18px 0}
.time-cards p:last-child{font-size:14px}
.prompt>p{padding:20px 20px 0}
.prompt>.table-scroll{margin:16px 20px}
.prompt>.data-note{padding-bottom:20px}
@media(max-width:900px){.time-cards{grid-template-columns:1fr}.time-cards strong{font-size:36px}}
@media(max-width:560px){.moment-buttons{gap:6px}.moment-buttons button{font-size:13px;padding:8px 10px}.moment-observation h4{font-size:20px}}