/* ===== Inicio: Foco (iris), Aforo, Trayectoria, Cierre ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ini{--r:28px}

/* ---------- 1. Foco: cuatro oficios, cada foto se abre como un reflector ---------- */
.fo{position:relative;height:340vh;background:var(--ink)}
.fo-st{position:sticky;top:0;height:100svh;overflow:hidden;color:#fff;background:var(--ink)}
.fo-ph{position:absolute;inset:0}
.pl{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.pl img{position:absolute;inset:0;object-fit:cover;transform:scale(var(--z,1.12));will-change:transform}
.pl::after{content:"";position:absolute;inset:0;background:#08080A;opacity:var(--dk,.16);pointer-events:none}
.pl-v{position:absolute;inset:0;z-index:1;background:
 linear-gradient(0deg,rgba(8,8,10,.94) 0,rgba(8,8,10,.66) 22%,rgba(8,8,10,.2) 46%,rgba(8,8,10,0) 62%),
 linear-gradient(180deg,rgba(8,8,10,.62) 0,rgba(8,8,10,0) 24%)}
.fo-ring{position:absolute;left:50%;top:58%;width:0;height:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 70px 14px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-50%)}
.fo-top{position:absolute;z-index:5;left:var(--m);top:calc(var(--nav) + 30px)}
.fo-cnt{position:absolute;z-index:5;right:var(--m);top:calc(var(--nav) + 30px);font:500 15px/1 var(--fx);letter-spacing:.04em;color:var(--b2)}
.fo-cnt b{font-weight:500;color:#fff}
.fo-tx{position:absolute;inset:0;z-index:5;pointer-events:none}
.fx{position:absolute;left:var(--m);right:var(--m);bottom:calc(11vh + 30px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-rows:auto auto auto;column-gap:5cqw;align-items:end;opacity:0;transition:opacity .3s}
.fx.on{opacity:1}
.fx-n{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:22px;font:600 12.5px/1 var(--fx);letter-spacing:.26em;text-transform:uppercase;color:var(--b)}
.fx-n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--o)}
.fx-n span{color:#fff}
.fx-t{grid-column:1;grid-row:2;font:500 clamp(64px,9.6cqw,176px)/.9 var(--fx);letter-spacing:-.058em}
.fx-p{grid-column:1;grid-row:3;margin-top:28px;max-width:34ch;font:400 clamp(18px,1.5cqw,25px)/1.4 var(--fx);letter-spacing:-.015em;color:rgba(255,255,255,.86);opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s}
.fx-lk{display:table;margin-top:14px;font:600 14.5px/1 var(--fx);letter-spacing:0;color:#fff;padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .4s;visibility:hidden}
.fx-lk:hover{background-size:0 1px}
.fx.on .fx-lk{visibility:visible;pointer-events:auto}
.fx.on .fx-p{opacity:1;transform:none;transition:opacity 1s var(--out),transform 1s var(--out);transition-delay:.45s}
.fx .w{padding:.14em .12em .14em .06em;margin:-.14em -.12em -.14em -.06em}
.fx .w>span{transform:translateY(135%);transition:transform .35s var(--ease)}
.fx.on .w>span{transform:none;transition:transform 1.2s var(--out);transition-delay:calc(var(--i)*80ms + 120ms)}
.fx-d{grid-column:2;grid-row:2/4;display:grid;grid-template-columns:1fr;gap:0;align-self:end}
.fx-d div{padding:20px 0 22px;border-top:1px solid rgba(255,255,255,.3);opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
.fx.on .fx-d div{opacity:1;transform:none;transition:opacity .9s var(--out),transform .9s var(--out);transition-delay:calc(.35s + var(--k,0)*110ms)}
.fx-d div:nth-child(2){--k:1}.fx-d div:nth-child(3){--k:2}
.fx-d dt{font:500 clamp(24px,2.1cqw,38px)/1.1 var(--fx);letter-spacing:-.03em;color:#fff}
.fx-d dd{margin-top:8px;font:400 clamp(15px,1.05cqw,18px)/1.4 var(--fx);color:var(--b)}
.fo-rail{position:absolute;z-index:6;left:var(--m);right:var(--m);bottom:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fo-rail button{position:relative;text-align:left;padding-top:14px;font:600 11.5px/1.2 var(--fx);letter-spacing:.2em;text-transform:uppercase;color:var(--b2);transition:color .3s;overflow-wrap:break-word}
.fo-rail button i{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.22);overflow:hidden}
.fo-rail button i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--q,0));transform-origin:0 50%}
.fo-rail button.on{color:#fff}
/* aviso de que la sección avanza con el scroll: se queda hasta el último oficio */
.fo-cue{position:absolute;z-index:6;left:50%;bottom:80px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font:600 11.5px/1 var(--fx);letter-spacing:.24em;text-transform:uppercase;color:#fff;pointer-events:none;transition:opacity .5s}
.fo-cue.off{opacity:0}
.fo-cue span{padding-left:.24em;text-shadow:0 1px 14px rgba(8,8,10,.8)}
.fo-cue i{position:relative;width:2px;height:40px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.fo-cue i::after{content:"";position:absolute;left:0;top:0;width:2px;height:18px;border-radius:2px;background:var(--o);animation:foCue 1.7s var(--ease) infinite}
@keyframes foCueX{from{transform:translateX(-14px)}to{transform:translateX(26px)}}
@keyframes foCue{from{transform:translateY(-20px)}to{transform:translateY(42px)}}
.fo-rail button:hover{color:#fff}

/* ---------- 2. Altia Render: adelanto. El salón vacío pasa a tener el montaje a medida que avanza la página ---------- */
.af{position:relative;background:var(--ink2);padding:150px 0 104px;overflow:hidden}
.af-in{padding:0 var(--m)}
.af-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);gap:5cqw;align-items:end}
.af-hd .t2{margin-top:22px;max-width:16ch}
.af-go{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.af-go .btn{height:56px;padding:0 30px;font-size:15.5px}
.af-stage{position:relative;display:block;margin-top:7vh;aspect-ratio:21/9;border-radius:30px;overflow:hidden;background:#000;--p:0%;--lo:0;box-shadow:0 50px 120px -40px rgba(0,0,0,.9)}
.af-stage img{position:absolute;inset:0;object-position:50% 60%;transition:transform 1.2s var(--out)}
.af-stage:hover img{transform:scale(1.015)}
.af-d{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.af-ln{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 26px 3px rgba(255,255,255,.4);opacity:var(--lo)}
.af-l{position:absolute;bottom:20px;z-index:3;display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:rgba(8,8,10,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:600 12px/1 var(--fx);letter-spacing:.2em;text-transform:uppercase;color:#fff;box-shadow:inset 0 0 0 1px var(--hl);opacity:0;transition:opacity .45s}
.af-l.d{left:22px}.af-l.a{right:22px}
.af-stage.vd .af-l.d,.af-stage.va .af-l.a{opacity:1}
.af-cap{margin-top:20px;font:400 14.5px/1.5 var(--fx);color:var(--b2)}

/* ---------- 3. Trayectoria ---------- */
.cf{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--ink);isolation:isolate}
.cf-i{position:absolute;left:0;top:-8%;width:100%;height:116%;z-index:-2;filter:brightness(.6) saturate(.85);will-change:transform}
.cf-v{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08080A 0,rgba(8,8,10,.2) 26%,rgba(8,8,10,.3) 55%,rgba(8,8,10,.92) 100%)}
.cf-in{padding:120px var(--m) 92px}
.cf-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4cqw;margin:5vh 0 3vh}
.cf-g p{display:flex;flex-direction:column}
.cf-g small{font:600 11.5px/1 var(--fx);letter-spacing:.26em;text-transform:uppercase;color:var(--b)}
.cf-g span{display:block;margin-top:18px;font:500 clamp(130px,21cqw,380px)/.78 var(--fx);letter-spacing:-.075em}
.cf-g b{font-weight:500}
.cf-g i{margin-top:2.2cqw;font:400 clamp(17px,1.5cqw,25px)/1.2 var(--fx);font-style:normal;letter-spacing:-.015em;color:var(--b)}

/* ---------- 4. Cierre: los tres datos escriben la frase y la foto se enciende a medida que se llena ---------- */
.ci{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;background:var(--ink);isolation:isolate;--fill:0}
.ci-i{position:absolute;inset:0;z-index:-2;filter:brightness(calc(.3 + var(--fill)*.5)) saturate(calc(.7 + var(--fill)*.3));transform:scale(calc(1.04 - var(--fill)*.04));transition:filter 1.4s var(--out),transform 2s var(--out)}
.ci-v{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,10,.95) 0,rgba(8,8,10,.9) 40%,rgba(8,8,10,.72) 62%,rgba(8,8,10,.1) 90%),linear-gradient(180deg,#08080A 0,rgba(8,8,10,0) 22%,rgba(8,8,10,0) 70%,#08080A 100%)}
.ci-in{padding:120px var(--m) 100px}
.ci-fr{margin-top:30px;max-width:1040px;text-shadow:0 2px 34px rgba(8,8,10,.7);font:500 clamp(34px,4.7cqw,86px)/1.12 var(--fx);letter-spacing:-.042em}
/* cada dato sin llenar es una ficha; al llenarse pasa a ser parte de la frase */
.tk{display:inline-flex;align-items:center;vertical-align:.17em;height:3.5em;padding:0 1.5em;margin:0 .35em;border-radius:999px;font:600 max(.2em,11px)/1 var(--fx);letter-spacing:.2em;text-transform:uppercase;color:var(--b);background:rgba(244,237,230,.1);box-shadow:inset 0 0 0 1px rgba(244,237,230,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;transition:color .25s,box-shadow .25s,background-color .25s}
.tk:hover,.tk.foco{color:#fff;background:rgba(244,237,230,.16);box-shadow:inset 0 0 0 1.5px var(--o)}
.tk.on{display:inline;vertical-align:baseline;height:auto;padding:0;margin:0;border-radius:0;font:inherit;letter-spacing:inherit;text-transform:none;color:var(--o);background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:tkIn .6s var(--out)}
@keyframes tkIn{from{opacity:0}to{opacity:1}}
/* barra de datos sobre papel claro */
.ci-f{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.7fr) auto;align-items:stretch;gap:0;margin-top:5.5vh;max-width:1120px;padding:10px;border-radius:999px;background:var(--tx);color:var(--tinta);box-shadow:0 44px 90px -44px rgba(0,0,0,.95)}
.cp{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:76px;padding:10px 30px;border-radius:999px;cursor:text;transition:background-color .25s,box-shadow .25s}
.cp+.cp::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:rgba(15,15,15,.18);transition:opacity .2s}
.cp:hover{background:rgba(15,15,15,.055)}
.cp:focus-within{background:#fff;box-shadow:0 0 0 2px var(--o),0 16px 30px -16px rgba(15,15,15,.45)}
.cp:hover::before,.cp:hover+.cp::before,.cp:focus-within::before,.cp:focus-within+.cp::before{opacity:0}
.cp span{font:600 11px/1 var(--fx);letter-spacing:.2em;text-transform:uppercase;color:rgba(15,15,15,.62)}
.cp input{display:block;width:100%;min-width:0;height:24px;padding:0;background:none;border:0;border-radius:0;outline:0;font:500 18px/24px var(--fx);letter-spacing:-.015em;color:var(--tinta);color-scheme:light;caret-color:var(--o2);-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.cp input::-webkit-outer-spin-button,.cp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cp input::placeholder{color:rgba(15,15,15,.5);opacity:1}
.cp input.vac{color:rgba(15,15,15,.5)}
.cp input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;margin:0;padding:0}
.cp input::-webkit-date-and-time-value{text-align:left}
.ci-f .btn{align-self:stretch;height:auto;min-height:76px;margin-left:10px;padding:0 32px;font-size:16px}
.ci-n{margin-top:20px;font:400 14.5px/1.5 var(--fx);color:var(--b)}
.ci-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqw;margin-top:11vh;max-width:1180px}
.ci-fx li{padding-top:18px;border-top:1px solid rgba(255,255,255,.28)}
.ci-fx b{display:block;font:500 clamp(17px,1.35cqw,23px)/1.2 var(--fx);letter-spacing:-.02em}
.ci-fx span{display:block;margin-top:8px;font:400 15px/1.4 var(--fx);color:var(--b)}
@media (max-width:900px){.fo{height:300vh}.fo-rail{gap:10px}.fo-rail button{font-size:11px;letter-spacing:.06em}.af{padding:96px 0 80px}
 /* oficios en teléfono: el bloque de texto se compacta para caber en el alto visible de Safari (unos 630 a 740 px) */
 .fx{bottom:76px}.fx-n{margin-bottom:12px}.fx-t{font-size:clamp(40px,11.5cqw,54px)}
 .fx-p{margin-top:14px;font-size:15.5px;line-height:1.38}
 .fx-d{margin-top:14px}.fx-d div{padding:11px 0 12px}.fx-d dt{font-size:19px}.fx-d dd{margin-top:4px;font-size:13.5px}
.pl-v{background:linear-gradient(0deg,rgba(8,8,10,.95) 0,rgba(8,8,10,.82) 34%,rgba(8,8,10,.6) 60%,rgba(8,8,10,.4) 78%,rgba(8,8,10,.62) 100%)}.fo-cue{left:auto;right:var(--m);bottom:auto;top:calc(var(--nav) + 58px);transform:none;flex-direction:row;gap:10px;font-size:10px}.fo-cue i{width:24px;height:2px}.fo-cue i::after{width:12px;height:2px;animation-name:foCueX}.fx{grid-template-columns:1fr}.fx-d{grid-column:1;grid-row:auto}.af-hd{grid-template-columns:1fr;gap:26px}.af-stage{aspect-ratio:4/3;border-radius:22px;margin-top:5vh}.af-l{height:30px;padding:0 11px;font-size:9.5px;bottom:12px}.af-l.d{left:12px}.af-l.a{right:12px}.cf-g{grid-template-columns:1fr}.ci-fx{grid-template-columns:1fr}.ci-f{grid-template-columns:1fr;border-radius:28px;padding:8px}.cp{min-height:70px;padding:10px 20px;border-radius:20px}.cp+.cp::before{left:20px;right:20px;top:0;bottom:auto;width:auto;height:1px}.ci-f .btn{margin:8px 0 0;min-height:60px}.tk{vertical-align:.1em;height:2.7em;padding:0 1.1em}.ci-v{background:linear-gradient(180deg,#08080A 0,rgba(8,8,10,.8) 20%,rgba(8,8,10,.74) 62%,rgba(8,8,10,.5) 82%,#08080A 100%)}}
@media (prefers-reduced-motion:reduce){.fx,.fx .w>span,.fx-d div{transition:none}.fo-cue i::after{animation:none;transform:translateY(11px)}}
@media (max-width:900px) and (max-height:600px){.fx-d dd{display:none}}

/* tamaños y "Siga bajando" (14 oct 2026) */
.fo-top{font-size:17px;letter-spacing:.2em}
.ci-in .eb{font-size:17px;letter-spacing:.2em}
.ci-n,.af-cap{font-size:17px}
.fo-cue{gap:14px;font-size:14px;letter-spacing:.22em}
.fo-cue span{padding:11px 20px 11px calc(20px + .22em);border-radius:999px;background:rgba(8,8,10,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fo-cue i{height:52px;width:3px}.fo-cue i::after{width:3px;height:24px}
@media (max-width:900px){
 .fo-top{font-size:12px;letter-spacing:.12em;gap:9px}
 .ci-in .eb{font-size:14.5px}
 .ci-n,.af-cap{font-size:15.5px}
 .fo-cue{font-size:12.5px}
 .fo-cue span{padding:9px 14px 9px calc(14px + .22em)}
 .fo-cue i{width:26px;height:3px}.fo-cue i::after{width:13px;height:3px}
}