/* ============================================================================
   PORTAFOLIO 2025 · layout RESPONSIVE (flex) — sin solapes, reflowea y apila.
   Cada sección = pantalla completa: render a sangre + texto en zona flex legible.
   ============================================================================ */
@import url("tokens.css");
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#0c0c0c;color:#fff;font-family:var(--font-content);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* <picture> como wrapper transparente: el <img> hereda las reglas .bg img / .logo img / .tcell img */
picture{display:contents}
a{color:inherit;text-decoration:none}
.en{display:none} html[lang="en"] .es{display:none} html[lang="en"] .en{display:inline}
::selection{background:var(--c-yellow);color:#111}

/* sección a pantalla completa */
.scene{position:relative;min-height:100svh;display:flex;overflow:hidden;isolation:isolate}
.scene.dark{color:#fff} .scene.light{color:#111}
.bg{position:absolute;inset:0;z-index:0;will-change:transform}
.bg img{width:100%;height:100%;object-fit:cover}
/* scrim SOLO para legibilidad del texto sobre render, localizado en su zona */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.scrim-bl,.scrim-bc,.scrim-br{background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.6) 26%,rgba(0,0,0,.18) 50%,transparent 74%)}
.scrim-tl,.scrim-tc,.scrim-tr{background:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.35) 32%,transparent 60%)}
/* legibilidad del texto sobre render */
.scene .bg ~ .scene-in .col,.scene .bg ~ .scene-in .metae{text-shadow:0 2px 30px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9)}

.scene-in{position:relative;z-index:2;width:100%;max-width:1640px;margin:0 auto;
  padding:clamp(80px,11vh,140px) clamp(22px,6vw,96px);display:flex;flex-direction:column;gap:clamp(20px,4vh,44px)}
/* zonas de contenido (según el deck) — justify vertical + align horizontal */
.zone-tl,.zone-tc,.zone-tr{justify-content:flex-start}
.zone-bl,.zone-bc,.zone-br{justify-content:flex-end}
.zone-tl,.zone-bl{align-items:flex-start;text-align:left}
.zone-tc,.zone-bc{align-items:center;text-align:center}
.zone-tr,.zone-br{align-items:flex-end;text-align:right}

.col{display:flex;flex-direction:column;gap:clamp(12px,2.2vh,26px);max-width:min(92vw,980px)}
.s-display{font-family:var(--font-content);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,7.2vw,128px);line-height:.9;letter-spacing:-.03em;text-wrap:balance}
.s-h{font-weight:700;text-transform:uppercase;font-size:clamp(24px,4vw,64px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.s-lead{font-weight:500;font-size:clamp(18px,2.1vw,28px);line-height:1.32;max-width:38ch}
.s-body{font-weight:300;font-size:clamp(14px,1.25vw,17px);line-height:1.55;max-width:62ch;opacity:.92}
.metae{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:6px;font-size:12px;opacity:.72;
  font-family:var(--font-structure);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.metae span{max-width:26ch}

.vlabel{position:absolute;left:clamp(10px,1.8vw,28px);top:0;bottom:0;display:flex;align-items:center;z-index:3;
  writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-structure);font-weight:700;
  text-transform:uppercase;font-size:11px;letter-spacing:.14em;opacity:.7}

/* galerías / imagen suelta en páginas sobre color/papel */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(8px,1.4vw,18px);width:100%}
.gcell{margin:0;overflow:hidden;border-radius:2px;aspect-ratio:16/10;background:#111}
.gcell img,.single img{width:100%;height:100%;object-fit:cover}
.single{margin:0;width:100%;max-width:1120px;aspect-ratio:16/9;overflow:hidden;border-radius:2px}
.gcell,.single{transition:transform .5s var(--ease)}

/* divisores a color pleno */
.scene.c-yellow[style]{color:#111}
.scene.c-blue[style],.scene.c-red[style]{color:#fff}

/* páginas estructuradas: clientes / concursos / contacto */
.scene.on-cream{background:#F2F0EB;color:#111}
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(10px,1.4vw,20px);width:100%}
.logo{background:#fff;border-radius:8px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:16px;box-shadow:0 1px 10px rgba(0,0,0,.05)}
.logo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.3s var(--ease)}
.logo:hover img{filter:none;opacity:1}
.tiers{display:flex;flex-wrap:wrap;gap:24px;margin-top:6px;font-family:var(--font-structure);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.tiers>span{display:inline-flex;align-items:center;gap:9px}
.fig{display:inline-block;width:15px;height:15px;flex:none}
.fig.tri{background:var(--c-yellow);clip-path:polygon(50% 0,100% 100%,0 100%)}
.fig.cir{background:var(--c-blue);border-radius:50%}
.fig.sqr{background:var(--c-red)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(8px,1.2vw,16px);width:100%}
.tcell{margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:2px;background:#1a1a1a;transition:transform .5s var(--ease)}
.tcell img{width:100%;height:100%;object-fit:cover}
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,48px);width:100%;max-width:1120px}
.office .ocity{font-family:var(--font-structure);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.08em;margin-bottom:12px;color:var(--c-yellow)}
.office .oline{font-size:14px;line-height:1.55;opacity:.85}
.office a{border-bottom:1px solid rgba(255,255,255,.28)}
@media(max-width:720px){.logowall{grid-template-columns:1fr 1fr 1fr}.tgrid{grid-template-columns:1fr 1fr}}

/* nav + progreso */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--c-yellow);z-index:100}
nav.top{position:fixed;top:0;left:0;right:0;z-index:90;mix-blend-mode:difference;color:#fff}
nav.top .wrap{max-width:none;display:flex;align-items:center;gap:16px;height:58px;padding:0 clamp(18px,5vw,48px)}
nav .bm{font-family:var(--font-content);font-weight:700;font-size:20px;letter-spacing:-.02em}
nav .links{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
nav .links a{font-family:var(--font-structure);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.09em;opacity:.7}
nav .links a:hover,nav .links a.active{opacity:1}
@media(max-width:820px){nav .links{display:none}}
.toggle{display:flex;border:1px solid #fff7;border-radius:999px;overflow:hidden;cursor:pointer;font-family:var(--font-structure);font-weight:700;font-size:11px;letter-spacing:.05em}
.toggle span{padding:5px 11px;opacity:.55}
.toggle .on{background:#fff;color:#000;opacity:1;mix-blend-mode:normal}
.scrollcue{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80;font-family:var(--font-structure);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.2em;opacity:.6;mix-blend-mode:difference;color:#fff}

/* móvil */
@media(max-width:720px){
  .scene-in{padding:clamp(64px,13vh,100px) 22px;justify-content:flex-end}
  .zone-tr,.zone-br,.zone-tc,.zone-bc,.zone-tl,.zone-bl{align-items:flex-start;text-align:left}
  .col{max-width:100%}
  .s-lead{max-width:none}
  .vlabel{display:none}
  .gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:440px){.gallery{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.bg{inset:0}}