/* Capa de movimiento compartida. Solo se activa si motion.js carga GSAP (html.motion). */

/* Barra de progreso */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;z-index:20;pointer-events:none}

/* Nav: sólida al salir del hero y oculta al bajar */
nav{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s,backdrop-filter .4s}
nav.solid{background:oklch(13% 0.006 60 / .82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav.hide{transform:translateY(-110%)}

/* Hero */
.hero .bg{transform-origin:50% 40%;will-change:transform}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line > span{display:block;will-change:transform}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-faint)}
.scroll-cue i{display:block;width:1px;height:48px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-height:700px){.scroll-cue{display:none}}

/* Frase con relleno palabra a palabra */
.quote .w{opacity:1}
html.motion .quote .w{opacity:.14}

/* Vídeo a sangre */
.film{padding:var(--section-y) 0}
.film .stage{position:relative;width:100%;height:min(100svh,56.25vw);overflow:hidden;background:#000;clip-path:inset(0 var(--inset,0px) round 2px)}
.film .stage iframe{position:absolute;top:50%;left:50%;width:max(100%,calc(min(100svh,56.25vw) * 16 / 9));height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.film .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,oklch(13% 0.006 60 / .75));pointer-events:none}
.film .sound{position:absolute;right:var(--gutter);bottom:1.6rem;z-index:2;display:flex;align-items:center;gap:.7rem;background:oklch(13% 0.006 60 / .55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line-strong);color:var(--ink);font:400 .7rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;padding:.9rem 1.2rem;cursor:pointer}
.film .sound:hover{border-color:var(--gold);color:var(--gold-bright)}
.film .sound .bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.film .sound .bars b{width:2px;height:3px;background:currentColor}
.film .sound.on .bars b{animation:eq 1s ease-in-out infinite}
.film .sound.on .bars b:nth-child(2){animation-delay:.2s}
.film .sound.on .bars b:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.film .cap{padding:0 var(--gutter);max-width:var(--maxw);margin:1rem auto 0}

/* Rondas: grupo activo */
.round{transition:border-color .5s,background .5s}
.round .dots i{transition:background .5s}
.round.active{border-color:var(--gold);background:oklch(67% 0.072 75 / .07)}
.round.active .dots i{background:var(--gold-bright)}
.round.done{opacity:.55}

/* Línea del programa */
.timeline{position:relative}
.timeline .draw{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--gold);transform-origin:top;transform:scaleY(0)}
html:not(.motion) .timeline .draw{display:none}

/* Imagen con máscara */
.reveal-img{overflow:hidden}
.reveal-img img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .scroll-cue i,.film .sound.on .bars b{animation:none}
}

/* ================= Estilo FiReSPORTS: vídeo, capítulos, cinta y cifras ================= */

/* Vídeo lifestyle de fondo en el hero */
.hero .video-bg{background:url("https://blackdiamondglobal.es/assets/img/hero-boardroom.jpg") center/cover no-repeat;opacity:.55;overflow:hidden;filter:saturate(.7) contrast(1.08) brightness(.85)}
.hero:has(.video-bg)::after{background:
  linear-gradient(90deg,oklch(13% 0.006 60 / .97) 0%,oklch(13% 0.006 60 / .85) 40%,oklch(13% 0.006 60 / .55) 75%,oklch(13% 0.006 60 / .45) 100%),
  linear-gradient(180deg,oklch(13% 0.006 60 / .7) 0%,transparent 28%,transparent 55%,var(--void) 100%)}
.hero .video-bg .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;transform:scale(1.06)}
.hero .video-bg .clip.is-on{opacity:1;animation:kb 9s linear forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.14)}}

/* Capítulos: vertical sin JS; horizontal fijado con movimiento en escritorio y móvil */
.chapters{padding:var(--section-y) 0 calc(var(--section-y) * .6);background:var(--void)}
.ch-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}
.ch-hint{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.ch-hint span{display:inline-block;color:var(--gold-bright);margin-left:.6rem;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.ch-track{display:flex;flex-direction:column}
.chapter{position:relative;display:grid;grid-template-columns:1fr;align-items:end;min-height:70svh;padding:3rem var(--gutter);border-top:1px solid var(--line);overflow:hidden}
.ch-time{position:absolute;right:var(--gutter);top:1.5rem;font-family:var(--display);font-weight:300;font-size:clamp(6rem,3rem + 16vw,20rem);line-height:.8;color:transparent;-webkit-text-stroke:1px oklch(67% 0.072 75 / .35);letter-spacing:-.02em;pointer-events:none;font-variant-numeric:tabular-nums}
.ch-body{position:relative;max-width:34rem}
.ch-n{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-bright)}
.ch-title{font-family:var(--display);font-weight:300;font-size:clamp(3.4rem,2rem + 6vw,8rem);line-height:.95;margin:1.2rem 0 1.4rem}
.ch-desc{color:var(--ink-dim);font-size:clamp(1rem,.95rem + .3vw,1.2rem);max-width:32ch}
.ch-stat{display:flex;align-items:baseline;gap:1rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line-strong)}
.ch-stat b{font-family:var(--display);font-weight:300;font-size:2.6rem;line-height:1;color:var(--gold-bright)}
.ch-stat span{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint)}
.ch-foot{display:flex;align-items:center;gap:2rem;margin-top:2rem}
.ch-bar{flex:1;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.ch-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.ch-foot .note{margin:0;white-space:nowrap}
html:not(.motion) .ch-hint,html:not(.motion) .ch-bar{display:none}
@media all{
  html.motion .chapters{height:100svh;display:flex;flex-direction:column;padding:clamp(5.5rem,4rem + 3vh,7.5rem) 0 1.6rem}
  html.motion .ch-head{margin-bottom:1rem;flex:none}
  html.motion .ch-viewport{overflow:hidden;flex:1;min-height:0}
  html.motion .ch-track{flex-direction:row;width:max-content;height:100%}
  html.motion .chapter{width:100vw;height:100%;min-height:0;border-top:0;border-left:1px solid var(--line);padding:1.5rem var(--gutter) 1rem}
  html.motion .ch-title{font-size:clamp(3rem,1rem + 7vh,7rem);margin:.8rem 0 1rem}
  html.motion .ch-stat{margin-top:1.2rem;padding-top:.9rem}
  html.motion .ch-time{font-size:clamp(6rem,2rem + 22vh,18rem)}
  html.motion .ch-foot{margin-top:1rem;flex:none}
  html.motion .chapter:first-child{border-left:0}
}

/* Cinta de texto infinita */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.6rem 0;background:var(--void)}
.mq-track{display:flex;width:max-content;will-change:transform}
.mq-track span{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,1.4rem + 3.4vw,5rem);line-height:1;white-space:nowrap;padding-right:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.mq-track span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--gold)}
.mq-track i{font-style:normal;color:var(--gold);font-size:.45em;vertical-align:middle;margin:0 1.2rem}
html:not(.motion) .mq-track{animation:mq 40s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* Cifras */
.stats{border-top:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:4rem;border-top:1px solid var(--line-strong)}
.stat-grid > div{padding:2.4rem 1.6rem 0 0;border-right:1px solid var(--line)}
.stat-grid > div:last-child{border-right:0}
.stat-grid > div + div{padding-left:1.6rem}
.stat-grid .big{font-family:var(--display);font-weight:300;font-size:clamp(3.2rem,1.8rem + 4vw,6rem);line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-grid .big .x,.stat-grid .big .cur{color:var(--gold-bright);font-size:.55em;margin:0 .08em}
.stat-grid > div:last-child .big{color:var(--gold-bright)}
.stat-grid .lbl{font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);margin-top:1.4rem}
.stat-grid .sub{font-size:.9rem;color:var(--ink-faint);margin-top:.3rem}
@media (max-width:980px){.stat-grid{grid-template-columns:1fr 1fr}.stat-grid > div{border-right:0;padding-left:0 !important;padding-bottom:2rem;border-bottom:1px solid var(--line)}}

/* Titulares: palabras con máscara */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wm > span{display:inline-block;will-change:transform}

/* ================= Puerta del diamante (primera sección) ================= */
.door{position:relative;background:#000;padding:0}
.door-stage{position:relative;height:100svh;overflow:hidden;perspective:1800px;background:#000}
.door .hero{position:absolute;inset:0;min-height:0;padding:clamp(5.5rem,4rem + 4vh,8rem) 0 clamp(2rem,1rem + 3vh,4rem);align-items:flex-end}
.door .hero h1{font-size:clamp(2.8rem,1.2rem + 6vw,6.5rem);margin:1.2rem 0 1.4rem}
.door .hero .facts{margin-top:2.2rem}
.door .hero .ctas{margin-top:2rem}
.door-panel{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#000;z-index:2;will-change:transform;backface-visibility:hidden}
.door-panel.left{left:0;transform-origin:0 50%}
.door-panel.right{right:0;transform-origin:100% 50%}
.door-inner{position:absolute;top:0;bottom:0;width:200%;display:flex;align-items:center;justify-content:center}
.door-panel.left .door-inner{left:0}
.door-panel.right .door-inner{right:0}
.door-face{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1rem}
.gem{width:clamp(120px,9rem + 6vw,230px);height:auto;overflow:visible}
.gem .g-line{fill:none;stroke:var(--gold-bright);stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gem .g-fill{fill:var(--gold);opacity:0}
.door-word{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.9rem);letter-spacing:.06em;text-transform:uppercase;margin-top:2.2rem;line-height:1}
.door-sub{font-size:clamp(.66rem,.6rem + .2vw,.8rem);letter-spacing:.38em;text-transform:uppercase;color:var(--gold-bright);margin-top:1.1rem;padding-left:.38em}
.door-hint{position:absolute;left:0;right:0;bottom:2.2rem;text-align:center;z-index:3;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:.8rem}
.door-hint::after{content:"";width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite}
.door-glow{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;transform:translate(-50%,-50%);background:radial-gradient(circle,oklch(74% 0.085 78 / .22),transparent 65%);pointer-events:none;opacity:0}
/* Sin movimiento: la portada se ve directamente */
html:not(.motion) .door-panel,html:not(.motion) .door-hint{display:none}
/* Negro total en la primera pantalla: sin banda del menú ni resplandor */
.door .hero{background:#000}
nav:not(.solid){background:transparent}
.door-panel.left{box-shadow:1px 0 0 #000}
/* Cifras a altura de mayúscula (Cormorant usa números de estilo antiguo por defecto) */
.stat-grid .big,.ch-time,.ch-stat b,.facts dd,.talks-list .tn,.timeline time{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
/* Foco de la edición: texto flotante a la derecha del panel de Real Estate */
.focus-float{position:absolute;right:var(--gutter);bottom:clamp(1.5rem,1rem + 3vh,3.5rem);z-index:1;display:flex;align-items:center;gap:1rem;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-bright);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.focus-float i{display:block;width:3.5rem;height:1px;background:var(--gold-bright)}
@media (max-width:899px){.focus-float{position:relative;right:auto;bottom:auto;margin-bottom:1rem}}
/* Sin palabras sueltas: reparto equilibrado de líneas */
h1,h2,h3,h4,.ch-title,.comp-title{text-wrap:balance}
p,li,dd{text-wrap:pretty}
/* Foco de la edición: frase destacada y centrada en el panel de Real Estate */
.focus-center{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:1;width:min(40rem,62%);text-align:center;font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);line-height:1.2;color:var(--porcelain);text-shadow:0 2px 18px rgba(0,0,0,.75)}
.focus-center em{color:var(--gold-bright)}
.focus-center span{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:1rem}
.focus-center span::before,.focus-center span::after{content:"";display:inline-block;width:2.4rem;height:1px;background:var(--gold);vertical-align:middle;margin:0 1rem}
@media (max-width:899px){.focus-center{position:relative;left:auto;top:auto;transform:none;width:auto;text-align:left;margin-bottom:1.5rem}.focus-center span::before{display:none}}
/* Datos de la portada legibles sobre el vídeo */
.door .hero .facts{border-top-color:oklch(100% 0 0 / .28)}
.door .hero .facts dt{color:oklch(96.5% 0.004 80 / .9)}
.door .hero .facts small{color:oklch(96.5% 0.004 80 / .78)}
/* Números con relleno, sin contorno (en ambas páginas) */
html body .ch-time,html body .areas-h .ch-time,html body .ben-list .bn,html body .pn,html body .tn,html body .talks-list .tn{color:var(--gold-bright) !important;-webkit-text-stroke:0 !important}
html body .ch-time{opacity:.55}

/* ================= Móvil (revisión iPhone) ================= */
/* Proporción fija del logotipo: Safari y Chrome lo miden igual */
html body .bd-lockup img:last-child{aspect-ratio:1195.3/256;width:auto}
@media (max-width:600px){
  html body nav{padding-top:.8rem;padding-bottom:.8rem}
  html body .bd-lockup{gap:.45rem}
  html body nav .bd-lockup img:first-child{height:22px}
  html body nav .bd-lockup img:last-child{height:21px}
  html body nav .btn{padding:.6rem .75rem;font-size:.58rem;letter-spacing:.12em}
  /* Portada: todo el contenido cabe entre el menú y el borde inferior */
  html .door .hero{padding-top:4.2rem;padding-bottom:1rem;align-items:center}
  html .door .hero .hero-brands{display:none}
}
@media (max-width:600px){
  html.motion .chapters{padding-top:4.6rem}
  html.motion .ch-head{flex-direction:column;align-items:flex-start;gap:.6rem}
  html.motion .ch-title{font-size:clamp(2.2rem,1rem + 5vh,3.4rem)}
  html.motion .ch-time{font-size:clamp(5rem,2rem + 14vh,9rem)}
  html.motion .focus-center{font-size:1.35rem;margin-bottom:1rem}
}
/* Vídeo bloqueado por el móvil: fotograma de la villa + reproducir */
.film .film-cover{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:0;cursor:pointer;color:var(--porcelain);background:#000 url("https://i.vimeocdn.com/video/1064844139-72d9169f112fe07779e27019ecdf29d8ed249db0cf4eb808f57dabf4c2d29970-d_1280x720") center/cover no-repeat}
.film .film-cover[hidden]{display:none}
.film .film-cover::before{content:"";position:absolute;inset:0;background:oklch(13% 0.006 60 / .35)}
.film .fc-play{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid oklch(100% 0 0 / .6);background:oklch(13% 0.006 60 / .45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.film .fc-play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--porcelain)}
.film .fc-txt{position:relative;font:500 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.film .stage.blocked .sound{display:none}
.film .stage.tap iframe{pointer-events:auto}
.film .stage.tap::after{display:none}
@media (max-width:600px){html.motion .ch-foot .note{display:none}}
/* Ninguna animación de entrada puede provocar desplazamiento lateral en el móvil */
html,body{overflow-x:clip}

/* Selector de idioma ES | EN */
.nav-end{display:flex;align-items:center;gap:1.2rem}
.lang{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.16em}
.lang a{color:var(--ink-faint);transition:color .3s}
.lang a:hover,.lang a[aria-current]{color:var(--porcelain)}
.lang i{width:1px;height:.8rem;background:var(--line-strong)}
nav .logo{flex-shrink:0}
.l-short{display:none}
@media (max-width:600px){nav .l-long{display:none}nav .l-short{display:inline}.nav-end{gap:.7rem}.lang{gap:.35rem;font-size:.6rem;letter-spacing:.1em}}

/* Capítulos en pantallas táctiles: carrusel nativo con el dedo */
html.motion .chapters.swipe .ch-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
html.motion .chapters.swipe .ch-viewport::-webkit-scrollbar{display:none}
html.motion .chapters.swipe .chapter{scroll-snap-align:start;scroll-snap-stop:always}
html.motion .chapters.swipe .ch-hint{cursor:pointer}