/* Fichas de trabajo, 11/11/2026 · referencia: Exo Ape, ficha de Cambium (exoape.com/work/cambium).
   Oscuras (#0D0E13 / #F4F0EC), Inter Tight y Instrument Serif en cursiva. Una plantilla, cinco webs. */
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin.woff2) format("woff2")}
:root{--n:#0d0e13;--n2:#14151b;--t:#f4f0ec;--ta:rgba(244,240,236,.7);--ra:rgba(244,240,236,.16);--g:clamp(18px,4.2vw,64px);--curva:cubic-bezier(.19,1,.22,1);--ent:cubic-bezier(.65,0,.35,1)}
html{background:var(--n)}
body{background:var(--n);color:var(--t)}
main{display:block}
em{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.02em;font-size:1.08em;line-height:.8}
:focus-visible{outline:2px solid var(--t);outline-offset:3px}

/* pantalla de paso con el nombre */
.paso{position:fixed;inset:0;z-index:95;background:#1b1c20;color:var(--t);display:flex;align-items:center;justify-content:center;gap:.6em;font-size:clamp(22px,2.4vw,38px);font-weight:300;letter-spacing:-.03em;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--ent);pointer-events:none}
.paso::before{content:"";width:.28em;height:.28em;border-radius:50%;background:currentColor}
.paso.on{clip-path:inset(0);pointer-events:auto}
.paso.sale{clip-path:inset(0 0 100% 0)}
.paso span{opacity:0;transform:translateY(14px);transition:opacity .5s .2s,transform .7s .2s var(--curva)}
.paso.on span{opacity:1;transform:none}

/* ---------- cabecera de la ficha: la foto, el título enorme y, al bajar, lo que es y lo que consigue ---------- */
.hs{position:relative;background:var(--n)}
.hf{position:absolute;left:0;top:0;width:100%;height:100svh;display:block;overflow:hidden}
.hf img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.07);transition:transform 2.4s var(--curva)}
.js .hf img{transform:scale(1.07)}
.hs.ve .hf img,html:not(.js) .hf img{transform:none}
.vel{position:absolute;left:0;top:0;width:100%;height:100svh;pointer-events:none;background:linear-gradient(to top,rgba(13,14,19,.86) 0,rgba(13,14,19,.42) 34%,rgba(13,14,19,.08) 62%,rgba(13,14,19,.38) 100%);opacity:var(--v,1)}
.vel::after{content:"";position:absolute;inset:0;background:#0d0e13;opacity:var(--d,0)}
.ca{position:relative;color:var(--t)}
.ca-t{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--g) clamp(48px,11svh,120px)}
.ca-t h1{font-size:clamp(54px,9.6vw,176px);line-height:.92;letter-spacing:-.055em;font-weight:300;margin-left:-.04em;max-width:11em;text-wrap:balance}
.ca-t h1,.ca-t .sub{text-shadow:0 2px 40px rgba(13,14,19,.35)}
.ca-t .sub{margin-top:clamp(14px,2.4svh,26px);font-size:clamp(15px,1.25vw,20px);font-weight:400;color:rgba(244,240,236,.88);letter-spacing:-.005em}
.ca-i{padding:clamp(70px,14svh,150px) var(--g) 0;background:var(--n)}
.intro{font-size:clamp(26px,3.15vw,56px);line-height:1.12;letter-spacing:-.035em;font-weight:300;max-width:20em}
.ca-m{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px clamp(18px,2.4vw,40px);padding:clamp(56px,10svh,110px) var(--g) clamp(70px,12svh,130px);background:var(--n)}
.ca-m>div{border-top:1px solid var(--ra);padding-top:14px}
.ca-m dt{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:rgba(244,240,236,.55);font-weight:400;margin-bottom:clamp(14px,2.4vw,34px)}
.ca-m dd{font-size:clamp(16px,1.3vw,21px);line-height:1.3;font-weight:400;letter-spacing:-.01em}
.baja{display:none}

/* con movimiento: la foto se queda quieta y el título cede paso a lo que es y a lo que consigue */
.anima .hw{height:285svh}
.anima .hs{position:sticky;top:0;height:100svh;overflow:hidden}
.anima .ca{position:absolute;left:0;top:0;width:100%;height:100%;background:none;padding:0}
.anima .ca-t{min-height:0;padding:0 var(--g) clamp(48px,11svh,120px);opacity:var(--t1,1);transform:translateY(calc(var(--y1,0) * -1vh));will-change:opacity,transform}
.anima .ca-i{display:flex;align-items:center;padding:0 var(--g);opacity:var(--t2,0);transform:translateY(calc((1 - var(--t2,0)) * 5vh));pointer-events:none}
.anima .ca-m{display:grid;align-content:end;padding:0 var(--g) clamp(48px,11svh,120px);opacity:var(--t3,0);transform:translateY(calc((1 - var(--t3,0)) * 4vh))}
.anima .hf{height:100%}
.anima .vel{height:100%}
.anima .baja{display:inline-flex;position:absolute;right:var(--g);bottom:clamp(20px,4svh,40px);gap:.5em;font-size:13px;letter-spacing:.03em;color:var(--ta);opacity:calc(1 - var(--t1,1) * 0 - (1 - var(--t1,1)) * 1.6);transition:none}
.anima .ca-m dt{color:rgba(244,240,236,.7)}

.en-hero .cab.fondo{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:820px){.anima .baja{display:none}}
/* ---------- secciones ---------- */
.sec{padding:clamp(80px,16svh,190px) var(--g) clamp(80px,14svh,170px);background:var(--n)}
.sec.alt{background:var(--n2)}
.cab-s{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);margin-bottom:clamp(40px,8svh,96px)}
.lab{grid-column:1/-1;display:flex;align-items:center;gap:.7em;font-size:clamp(14px,1.05vw,16px);font-weight:400;color:var(--ta);margin-bottom:clamp(22px,4svh,40px)}
.lab i,.que i{flex:none;display:block;width:.95em;height:.95em;background:var(--t);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.gr{grid-column:1/10;font-size:clamp(40px,6.4vw,112px);line-height:.98;letter-spacing:-.05em;font-weight:300;text-wrap:balance}
.tx{grid-column:7/13;margin-top:clamp(22px,4.4svh,48px);font-size:clamp(17px,1.35vw,22px);line-height:1.5;color:var(--ta);font-weight:400;max-width:32em}

/* lienzo de 12 columnas: cada pantalla, entera */
.fila{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);align-items:start;margin-top:clamp(28px,5vw,80px)}
.fila:first-of-type{margin-top:0}
.pa{margin:0}
.pa img{display:block;width:100%;height:auto;border-radius:clamp(8px,.9vw,14px);box-shadow:0 0 0 1px rgba(244,240,236,.1),0 50px 90px -50px rgba(0,0,0,.9)}
.pa.ancha{grid-column:2/12}
.pa.media{grid-column:var(--c,3/12)}
.dos .izq{grid-column:1/8}
.dos .der{grid-column:8/13;margin-top:clamp(40px,10vw,160px)}

/* móviles */
.tels{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,54px);margin-top:clamp(28px,5vw,80px);padding:clamp(34px,7vw,110px) clamp(16px,4vw,70px);border-radius:clamp(8px,.9vw,14px);background:rgba(244,240,236,.06);box-shadow:inset 0 0 0 1px rgba(244,240,236,.09)}
.tels:first-child{margin-top:0}
.sec.alt .tels{background:rgba(244,240,236,.05)}
.tel{flex:0 1 clamp(170px,19vw,300px);min-width:0;margin:0}
.tel:nth-child(even){margin-top:clamp(36px,6vw,100px)}
.tels.n3 .tel{flex-basis:clamp(150px,16vw,260px)}
.tel .cr{display:block;position:relative;overflow:hidden;border-radius:clamp(14px,1.8vw,26px);box-shadow:0 0 0 1px rgba(244,240,236,.18),0 40px 70px -34px rgba(0,0,0,.9);background:#000}
.tel img{display:block;width:100%;height:auto}
.tel.largo .cr{aspect-ratio:9/19}
.tel.largo img{position:absolute;left:0;top:0;will-change:transform}

/* qué se hizo */
.hecho .cab-s{margin-bottom:clamp(30px,6svh,70px)}
.que{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,54px) clamp(18px,2.4vw,40px)}
.que li{border-top:1px solid var(--ra);padding-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9em;align-items:start}
.que i{margin-top:.5em;width:.8em;height:.8em}
.que p{font-size:clamp(19px,1.75vw,30px);line-height:1.22;letter-spacing:-.025em;font-weight:300}
.vivo{margin-top:clamp(50px,10svh,110px)}
.bot{display:inline-flex;align-items:center;gap:.7em;min-height:68px;padding:0 1.7em;background:var(--t);color:var(--n);border-radius:99px;font-size:clamp(18px,1.4vw,22px);font-weight:400;letter-spacing:-.01em;transition:background .4s}
.bot:hover{background:#dfd1b9}
.bot span{display:inline-block;transition:transform .3s}
.bot:hover span{transform:translate(3px,-3px)}

/* siguiente trabajo: a pantalla completa, como el cierre de Exo Ape */
.sig{position:relative;display:flex;align-items:flex-end;min-height:min(92svh,860px);overflow:hidden;color:var(--t);background:var(--n)}
.sf,.sf img{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.sf img{object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--curva)}
.sig:hover .sf img,.sig:focus-visible .sf img{transform:scale(1.1)}
.sv{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,14,19,.88) 0,rgba(13,14,19,.3) 55%,rgba(13,14,19,.5) 100%)}
.si{position:relative;display:block;padding:clamp(80px,14svh,150px) var(--g) clamp(44px,9svh,100px);width:100%}
.si .k{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:rgba(244,240,236,.7);margin-bottom:clamp(14px,3svh,28px);font-weight:400}
.si .n{display:block;font-size:clamp(46px,9.4vw,168px);line-height:.95;letter-spacing:-.055em;font-weight:300;transition:transform .8s var(--curva);margin-left:-.04em}
.sig:hover .si .n{transform:translateX(clamp(8px,1.4vw,24px))}
.si .d{display:flex;align-items:center;gap:.7em;margin-top:clamp(16px,3svh,30px);font-size:clamp(16px,1.35vw,22px);font-weight:400;color:var(--ta)}
.si .d b{font-weight:300;font-size:1.3em;transition:transform .5s var(--curva)}
.sig:hover .si .d b{transform:translateX(8px)}
.todos{background:var(--n);padding:clamp(18px,3svh,30px) var(--g)}
.todos a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:400;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(244,240,236,.45)}
.todos a:hover{text-decoration-color:var(--t)}

/* aparecer al bajar */
.js.anima .rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--curva),transform 1.2s var(--curva)}
.js.anima .rv.ve{opacity:1;transform:none}
.js.anima .pa.rv img{clip-path:inset(0 0 12% 0 round 12px);transition:clip-path 1.5s var(--curva)}
.js.anima .pa.rv.ve img{clip-path:inset(0 0 0 0 round 12px)}

@media (max-width:820px){
  .ca-t h1{font-size:clamp(46px,14.6vw,84px)}
  .ca-t{padding-bottom:78px}
  .intro{font-size:clamp(23px,6.6vw,34px);line-height:1.16}
  .ca-m{grid-template-columns:1fr 1fr;gap:26px 16px}
  .ca-m dt{margin-bottom:10px}
  .ca-m dd{font-size:16px}
  .anima .ca-m{align-content:center}
  .anima .hw{height:300svh}
  .cab-s{display:block}
  .gr{font-size:clamp(38px,11.4vw,64px)}
  .tx{margin-top:22px}
  .fila{display:block;margin-top:26px}
  .pa.ancha,.pa.media{width:100%}
  .dos .der{margin-top:26px}
  .tels{flex-wrap:wrap;gap:22px 14px;padding:26px 16px 34px}
  .tel,.tels.n3 .tel{flex:0 0 calc(50% - 7px)}
  .tel:nth-child(even){margin-top:30px}
  .tel:last-child:nth-child(odd){flex:0 0 62%;margin-inline:auto;margin-top:0}
  .que{grid-template-columns:1fr}
  .que p{font-size:22px}
  .sig{min-height:78svh}
  .si .n{font-size:clamp(44px,13.4vw,84px)}
}
@media (prefers-reduced-motion:reduce){
  .paso,.paso span,.hf img,.sf img{transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
  .pa.rv img{clip-path:none!important}
}