/* ============================================================
   UTOPIA CIRCLE — v3 · añadidos sobre utopia.css + circle2.css
   Lo nuevo: el enlace fijo a «The nights», la capa del reel y
   el calendario de Event access.
   ============================================================ */

/* ── enlace a la página de trabajo, siempre visible ───── */
.top-work{display:flex;align-items:center;min-height:36px;padding:0 12px;color:var(--bone);text-decoration:none;
  font:10px 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;border:1px solid transparent;transition:.25s}
.top-work::before{content:'▷';margin-right:8px;color:var(--red2)}
.top-work:hover{border-color:var(--hair)}
:is(.flat,.mobile-depth) .top-work{min-height:44px;padding:0 8px;letter-spacing:.04em}
@media (max-width:420px){ .top-work::before{display:none} }

/* ── capa «The nights»: el reel manda, poco velo ───────── */
#nights .frame-photo::before{
  background:linear-gradient(100deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 36%, rgba(0,0,0,.08) 66%, rgba(0,0,0,.26) 100%)}
#nights .l-title{font-size:clamp(34px,5.4vw,80px);line-height:.98}
#nights .l-sub{font-size:clamp(15px,1.6vw,21px);color:rgba(236,231,221,.78);max-width:30ch;margin-top:18px}
#nights .l-more{display:inline-flex;text-decoration:none}
.ev-cta{text-decoration:none}

/* ── Event access: las próximas fechas ────────────────── */
.cal{list-style:none;margin-top:clamp(18px,2.6vh,28px);display:grid;gap:0;max-width:360px;border-top:1px solid var(--hair)}
.cal li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.cal span{color:var(--red2)}
.cal b{font-weight:400;color:var(--text)}
:is(.flat,.mobile-depth) .cal{max-width:none;margin-top:24px}
:is(.flat,.mobile-depth) .cal li{font-size:11px;letter-spacing:.06em;padding:11px 0}

/* ============================================================
   PUERTA + CUATRO OPCIONES · la entrada de la v3
   1) la puerta de la v1: la cámara te lee y entras.
   2) la primera capa del túnel: la pantalla partida en cuatro.
   ============================================================ */
/* ── 1 · la puerta (estilos base en utopia.css, los de la v1) ── */
.gate-brand{height:20px}
.gate-note{margin-top:14px;color:rgba(242,237,228,.45);font-size:9px;letter-spacing:.16em;transition:opacity .4s}
.gate-actions,.gate-note{transition:opacity .4s,visibility .4s}
.gate.scanning .gate-actions,.gate.scanning .gate-note{opacity:0;visibility:hidden;pointer-events:none}
.gate.entering .gate-note{opacity:0}
@media (max-width:600px){
  .scanner{top:38%}
  .gate-corner.br span.mono{display:none}
}

/* ── 2 · las cuatro opciones: la primera capa del túnel ── */
.hub-layer .frame{background:#000}
.hub-grid{position:absolute;inset:0;display:flex;gap:0;background:#000;z-index:4}
body:not(:is(.flat,.mobile-depth)) .hub-grid{top:clamp(40px,6vh,60px);bottom:clamp(44px,6vh,58px)}
.hub-p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-left:1px solid var(--line);background:#050505;color:var(--bone);text-decoration:none;
  transition:flex-grow .8s cubic-bezier(.2,.7,.2,1)}
.hub-p:first-child{border-left:0}
.hub-p video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.7) grayscale(.35);
  transform:scale(1.06);transition:filter .7s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.hub-p::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.88));pointer-events:none}
.hub-n{position:absolute;top:22px;left:22px;z-index:2;color:var(--red2)}
.hub-t{position:absolute;left:22px;right:22px;bottom:clamp(40px,7vh,72px);z-index:2;display:flex;flex-direction:column;gap:12px}
.hub-t b{font:400 clamp(26px,2.6vw,52px)/.95 var(--serif);text-transform:uppercase;letter-spacing:-.005em}
.hub-t i{font-style:normal;font-size:15px;line-height:1.5;color:rgba(236,231,221,.78);max-width:30ch;max-height:0;overflow:hidden;
  opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),max-height .6s}
.hub-t em{font-style:normal;color:var(--red2);opacity:0;max-height:0;overflow:hidden;transition:opacity .5s .1s,max-height .6s}
.hub-p.on{flex-grow:2.3}
.hub-p.on video{filter:brightness(.8) saturate(1.05) grayscale(0);transform:scale(1)}
.hub-p.on .hub-t i,.hub-p.on .hub-t em{opacity:1;transform:none;max-height:6em}
.hub-grid.hot .hub-p:not(.on) video{filter:brightness(.26) saturate(.4) grayscale(.6)}
.hub-p:focus-visible{outline-offset:-4px}
/* en plano (movimiento reducido) la capa no tiene alto propio */
.flat .hub-layer .frame{min-height:calc(100svh - 100px)}
.mobile-depth .hub-t{right:52px}
.mobile-depth .hub-t em{right:0}

/* móvil: cuatro bandas apiladas que se encienden por turnos */
@media (max-width:900px),(hover:none){
  .hub-grid{flex-direction:column}
  .hub-p{border-left:0;border-top:1px solid var(--line)}
  .hub-p:first-child{border-top:0}
  .hub-p{flex-basis:0}
  .hub-p.on{flex-grow:1.9}
  .hub-n{top:14px;left:16px}
  .hub-t{left:16px;right:16px;bottom:14px;gap:6px}
  .hub-t b{font-size:clamp(26px,8vw,40px)}
  .hub-t b{white-space:nowrap}
  .hub-t b br{display:none}
  .hub-t{bottom:12px}
  .hub-n{top:12px}
  .hub-t i{font-size:13px}
  .hub-t em{position:absolute;right:0;bottom:4px;opacity:1;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .hub-grid,.hub-p,.hub-p video{transition:none!important}
}

/* saltos de línea distintos en móvil y escritorio (titular de Who we are) */
.br-m{display:none}
:is(.flat,.mobile-depth) .br-m{display:inline}
:is(.flat,.mobile-depth) .br-d{display:none}

/* ── la puerta: foto fija debajo, vídeo con fundido encima (nunca negro) ── */
.gate-poster{position:absolute;inset:0;background:#000 url(../img/gate-door.jpg) center/cover no-repeat;
  transform-origin:50% 63%;transition:transform 1.9s cubic-bezier(.5,0,.2,1),filter 1.9s ease}
@media (max-width:600px){ .gate-poster{background-image:url(../img/mobile.jpg)} }
.gate .gate-video{opacity:0;transition:opacity .9s ease,transform 1.9s cubic-bezier(.5,0,.2,1),filter 1.9s ease}
.gate .gate-video.on{opacity:1}
.gate.entering .gate-poster{transform:scale(4.2);filter:contrast(1.12) brightness(.15) blur(3px)}

/* ── la interfaz de la puerta entra cuando se va el logo, escalonada ── */
.gate .gate-top,.gate .gate-corner,.gate .gate-status,.gate .gate-actions,.gate .gate-note{
  opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1),visibility .4s}
.gate.ready .gate-top{opacity:1;transform:none;transition-delay:.15s}
.gate.ready .gate-status{opacity:1;transform:none;transition-delay:.4s}
.gate.ready .gate-actions{opacity:1;transform:none;transition-delay:.6s}
.gate.ready .gate-note{opacity:1;transform:none;transition-delay:.8s}
.gate.ready .gate-corner{opacity:1;transform:none;transition-delay:.95s}
.gate.ready.scanning .gate-actions,.gate.ready.scanning .gate-note{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s}
.gate.ready.entering .gate-top,.gate.ready.entering .gate-corner,.gate.ready.entering .gate-status{opacity:0;transition-delay:0s}

/* ── THE CHAPTERS: la portada, pequeña y debajo de la información ── */
.ev-slide{grid-template-columns:minmax(0,1fr);align-content:center;justify-items:start;gap:clamp(16px,2.4vh,26px)}
.ev-txt{order:1}
.ev-cover{order:2;width:clamp(96px,9vw,150px)}
.ev-cover-link::after{display:none}
:is(.flat,.mobile-depth) .ev-slide{gap:22px}
:is(.flat,.mobile-depth) .ev-cover{width:132px;max-width:42%;margin:0;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
:is(.flat,.mobile-depth) .ev-cover img{object-fit:cover}

/* ── WORK WITH US en móvil: sin «A few details» ── */
:is(.flat,.mobile-depth) #enquiry-message,:is(.flat,.mobile-depth) label[for="enquiry-message"]{display:none}

/* ── EVENT ACCESS en móvil: el jet a la vista ── */
:is(.flat,.mobile-depth) #access .frame-photo img{object-position:80% 50%}

/* ── raíl de secciones en móvil: rayas más pequeñas, pegadas a la derecha ── */
.mobile-depth .depth{right:max(0px,env(safe-area-inset-right))}
.mobile-depth .depth .dstep{width:30px;padding:0 3px 0 0}
.mobile-depth .depth .dbar{width:14px;height:1.5px}
.mobile-depth .depth .dmark{right:3px;width:14px;height:1.5px}
.mobile-depth .depth .dname{right:26px}
/* en móvil el nombre de la sección aparece al cambiar y se va solo (no tapa el formulario) */
.mobile-depth .depth .dstep.active .dname{animation:dnameflash 2.4s ease forwards}
@keyframes dnameflash{0%,70%{opacity:1}100%{opacity:0}}

/* ── el barrido del logo en la carga, también en móvil (la v2 lo apagaba) ── */
.mobile-depth .pl-logo{clip-path:inset(0 100% 0 0);animation:pldraw 1.7s linear forwards}

/* ── THE CHAPTERS: tres círculos con el cartel, en lugar de flechas y 01/03 ── */
.ev-slide .ev-cover{display:none}
.ev-orbs{gap:0}
.ev-orbs .ev-dots{position:relative;display:flex;gap:clamp(18px,2.4vw,34px);margin:0;align-items:flex-start}
.ev-orbs .ev-dots::before{content:'';position:absolute;left:34px;right:34px;top:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair),transparent);pointer-events:none}
.ev-orbs .ev-dots button.ev-orb{position:relative;width:auto;height:auto;padding:0;background:none;border:0;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;color:var(--muted)}
.ev-orbs .ev-dots button.ev-orb::after{display:none}
.ev-orb-ring{position:relative;display:block;width:68px;height:68px;border-radius:50%;overflow:hidden;background:#0a0a0a;
  border:1px solid rgba(184,154,94,.35);transform:scale(.86);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .6s}
.ev-orb-ring img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(.7) brightness(.5);transition:filter .6s}
.ev-orb-lbl{display:flex;flex-direction:column;align-items:center;gap:3px;font:9px 'Space Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;opacity:.8;transition:opacity .4s,color .4s}
.ev-orb-lbl b{font-weight:400;color:var(--red2)}
.ev-orb:hover .ev-orb-ring img{filter:grayscale(.2) brightness(.8)}
.ev-orb:hover .ev-orb-lbl{opacity:.85}
.ev-orb.on .ev-orb-ring{transform:scale(1);border:1.5px solid var(--red2);
  box-shadow:0 0 0 5px rgba(0,0,0,.6),0 0 0 6px rgba(193,170,115,.35),0 0 28px rgba(193,170,115,.35)}
.ev-orb.on .ev-orb-ring img{filter:none}
.ev-orb.on .ev-orb-lbl{opacity:1;color:var(--bone)}
.ev-orb:focus-visible{outline:none}
.ev-orb:focus-visible .ev-orb-ring{outline:2px solid var(--red2);outline-offset:6px}

/* móvil: los círculos, justo debajo de los textos */
:is(.flat,.mobile-depth) .ev-nav.ev-orbs{order:3;justify-content:flex-start;margin:30px auto 0;padding-top:24px;border-top:1px solid var(--line)}
:is(.flat,.mobile-depth) .ev-orbs .ev-dots{display:flex;gap:22px}
:is(.flat,.mobile-depth) .ev-orbs .ev-dots button.ev-orb{width:auto;height:auto}
:is(.flat,.mobile-depth) .ev-orb-ring{width:64px;height:64px}
:is(.flat,.mobile-depth) .ev-orbs .ev-dots::before{top:32px;left:32px;right:32px}
:is(.flat,.mobile-depth) .chapter-continue{order:4}

/* ── cabecera en móvil: logo y «Tell us» a la misma altura (36 px) ── */
:is(.flat,.mobile-depth) .brand img{height:36px;width:auto}
:is(.flat,.mobile-depth) .top-cta{min-height:36px;padding:0 12px}

/* ── la puerta en móvil: el zoom entra por el hueco de la puerta, no por debajo ── */
@media (max-width:600px){
  .gate-poster,.gate .gate-video{transform-origin:50% 50%}
}

/* ── la puerta, más clara: que se vea a los porteros ── */
.gate-poster,.gate .gate-video{filter:brightness(1.45) contrast(1.06)}
.gate .gate-video.on{filter:brightness(1.45) contrast(1.06)}
.gate-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 58%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.9) 100%)}
/* texto y botón, más pequeños */
.gate-status{font-size:12px;letter-spacing:.14em}
.gate-btn{font-size:10px;padding:11px 18px;letter-spacing:.18em}
.gate-note{font-size:8px}
@media (max-width:600px){
  .gate-center{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .gate-status{font-size:11px;margin-top:0}
  .gate-actions{margin-top:14px}
  .gate-btn{width:auto}
  .gate-note{margin-top:10px}
}
.gate.entering .gate-video.on{filter:contrast(1.12) brightness(.15) blur(3px)}

/* ── 4 opciones: botón dorado fijo abajo → Who we are (sustituye al «Descend») ── */
.scrollhint{display:none!important}
.hub-down{position:absolute;left:50%;bottom:clamp(6px,1.2vh,12px);transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:12px;min-height:40px;padding:0 20px;background:var(--red2);color:#000;
  font:700 10px 'Space Mono',monospace;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.5);transition:background .25s}
.hub-down:hover{background:#d2bc86}
.hub-down span[aria-hidden]{display:inline-block;animation:hubdown 1.6s ease-in-out infinite}
@keyframes hubdown{50%{transform:translateY(3px)}}
.mobile-depth .hub-layer .hub-grid{bottom:58px}
.mobile-depth .hub-down{bottom:8px;min-height:44px;font-size:11px}
@media (prefers-reduced-motion:reduce){ .hub-down span[aria-hidden]{animation:none} }

/* ── la puerta en móvil: botón más grande y textos de abajo legibles ── */
@media (max-width:600px){
  .gate-btn{font-size:12px;padding:16px 30px;letter-spacing:.2em;min-width:230px}
  .gate-status{font-size:13px}
  .gate-note{font-size:10px;letter-spacing:.1em;color:rgba(242,237,228,.78);text-shadow:0 1px 8px #000}
  .gate-corner .mono{font-size:10px;letter-spacing:.12em;color:rgba(242,237,228,.9);text-shadow:0 1px 8px #000}
  .gate-corner .mono.red{color:var(--red2)}
  .gate-cbtn{font-size:10px;padding:8px 10px;background:rgba(0,0,0,.55)}
  .gate-top .mono{font-size:10px;color:rgba(242,237,228,.85);text-shadow:0 1px 8px #000}
}
.holdhint{display:none!important}
@media (max-width:600px){ .gate-note{letter-spacing:.04em;font-size:9.5px;white-space:nowrap} }