/* V12: profundidad y realismo (escena 3D en CSS, sin WebGL) */
.dg-stick{perspective:1100px;perspective-origin:50% 45%;background:radial-gradient(ellipse 70% 55% at 50% 42%,#1a1a1a 0%,#070707 70%)}
.scene{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.floor{position:absolute;left:-20%;right:-20%;top:62%;height:90%;transform:rotateX(80deg);transform-origin:top;background:radial-gradient(ellipse 50% 40% at 50% 10%,rgba(0,0,0,.85),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 90px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 90px);pointer-events:none}
.w3d{transform-style:preserve-3d;background:none}
.w3d .w-f,.w3d .w-l{display:block}
.w3d .w-f{position:relative;background:linear-gradient(175deg,#ffffff 0%,#efebe2 45%,#b9b4a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateZ(0)}
.w3d .w-f .dot{-webkit-text-fill-color:#8b8b8b}
.w3d .w-l{position:absolute;inset:0;color:hsl(40 6% calc(62% - var(--k) * 2.6%));transform:translateZ(calc(var(--k) * -2.4px))}
.w3d .w-l .dot{color:hsl(0 0% calc(40% - var(--k) * 1.6%))}
.w3d .w-l:last-child{text-shadow:0 40px 80px rgba(0,0,0,.9)}
.obj{animation:none;transform-style:preserve-3d}
.obj.far{filter:drop-shadow(0 30px 30px rgba(0,0,0,.6)) blur(1.6px) brightness(.8)}
.obj.near{filter:drop-shadow(0 50px 50px rgba(0,0,0,.75)) contrast(1.05) saturate(1.08)}
.dg-stick::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));z-index:5}

.ring-stage{perspective:1300px;perspective-origin:50% 30%}
.ring-floor{position:absolute;left:50%;top:50%;width:min(110vw,1500px);height:min(110vw,1500px);transform:translate(-50%,-6%) rotateX(84deg);border-radius:50%;background:radial-gradient(circle,rgba(0,0,40,.55) 0%,rgba(0,0,40,.25) 35%,transparent 65%);pointer-events:none}
.card{-webkit-box-reflect:below 6px linear-gradient(transparent 62%,rgba(255,255,255,.28));border-radius:8px;transition:filter .2s}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,transparent 35%,transparent 70%,rgba(255,255,255,.08));mix-blend-mode:screen;pointer-events:none}
.ring-stick{background-color:var(--azul);background-image:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(255,255,255,.12),transparent 70%),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:auto,80px 80px,80px 80px}
.ring-num{text-shadow:0 2px 0 #d9dcf5,0 4px 0 #bcc2ee,0 6px 0 #9fa8e6,0 8px 0 #828ddd,0 10px 0 #6a76d4,0 30px 50px rgba(0,0,40,.5)}
@media (max-width:820px){
  .w3d .w-l{transform:translateZ(calc(var(--k) * -1.2px))}
  .card{-webkit-box-reflect:none}
}
/* Sin azul: plató oscuro con un foco encima del anillo */
.ring{--azul:#0a0a0a;background:#0a0a0a;color:var(--ink)}
.ring-stick{background-color:#0a0a0a;background-image:radial-gradient(ellipse 34% 60% at 50% 0%,rgba(255,244,225,.20),transparent 75%),radial-gradient(ellipse 55% 30% at 50% 78%,rgba(255,244,225,.08),transparent 70%);background-size:auto,auto}
.ring-floor{background:radial-gradient(circle,rgba(255,244,225,.10) 0%,rgba(255,244,225,.04) 30%,transparent 62%)}
.ring .label{color:var(--ink-3)}
.switch{background:rgba(255,255,255,.08)}
.switch button{color:var(--ink)}
.switch button.on{background:var(--ink);color:#0a0a0a}
.ring-num{color:var(--ink);text-shadow:0 2px 0 #cfcac0,0 4px 0 #aaa59b,0 6px 0 #878278,0 8px 0 #66625a,0 10px 0 #47443e,0 34px 60px rgba(0,0,0,.8)}
.nav.on-ring{background:rgba(10,10,10,.7);color:var(--ink)}
.nav.on-ring .nav-cta{background:var(--ink);color:#0a0a0a}
.card{-webkit-box-reflect:below 6px linear-gradient(transparent 60%,rgba(255,255,255,.22))}
/* arreglo: la cara de delante encima y sin aplanar la escena */
.dg-word.w3d{will-change:auto}
.w3d .w-f{position:absolute;inset:0;transform:translateZ(1px)}
.w3d .w-l:first-child{position:relative;inset:auto}
.dg-stick{background:radial-gradient(ellipse 70% 55% at 50% 40%,#242424 0%,#0b0b0b 72%)}
.dg-stick::after{background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.45))}
/* sin la banda del suelo; el monster entra cortado por el borde de la pantalla, no por el recorte */
.floor{display:none}
.obj[src*="monster"]{left:-5%}
/* La cifra limpia: sin sombra escalonada (era lo que la hacía rara) */
.ring-num{text-shadow:0 20px 70px rgba(0,0,0,.75);letter-spacing:-.055em;font-feature-settings:"tnum" 0,"ss01" 1}
.ring-num .unit{font-size:.3em;letter-spacing:.02em;font-weight:800;margin-top:.12em;opacity:.92}
.ring-sub{font-weight:600;text-transform:none;letter-spacing:-.01em;font-size:clamp(15px,1.25vw,19px);color:var(--ink-2);margin-top:18px}
.obj.far{filter:drop-shadow(0 30px 30px rgba(0,0,0,.6)) blur(.5px) brightness(.88)}
.obj.far{filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}
/* 8 objetos, uno por cliente: posiciones en el móvil */
@media (max-width:820px){
  .obj[src*="monster"]{left:-6%;top:12%}
  .obj[src*="bolso"]{left:70%;top:11%}
  .obj[src*="loewe"]{left:34%;top:8%}
  .obj[src*="muela"]{left:84%;top:30%}
  .obj[src*="casa"]{left:-4%;top:62%}
  .obj[src*="puntas"]{left:58%;top:64%}
  .obj[src*="brunch"]{left:26%;top:76%}
  .obj[src*="bote"]{left:6%;top:30%}
}
/* objetos al fondo (detrás de la palabra) y más grandes porque la distancia los encoge */
.obj{width:calc(var(--w) * 1.45)}
.obj.far,.obj.near{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.dg{height:260vh}
.w3d .w-f,.w3d .w-l{will-change:auto}
/* carrusel 3D de verdad (WebGL) */
.ring-gl{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.ring-stage .ring-center{z-index:2}
/* la cifra encima del anillo, sin tapar el vídeo del centro */
@media (min-width:821px){
  .ring-stage .ring-center{justify-content:flex-start;padding-top:1vh}
  .ring-num{font-size:clamp(70px,9vw,170px);display:flex;align-items:baseline;gap:.18em;line-height:.9}
  .ring-num .unit{display:inline;font-size:.42em;margin:0}
  .ring-sub{margin-top:8px}
}
/* objetos arrastrables */
.obj{pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none}
.obj.agarrado{cursor:grabbing;filter:drop-shadow(0 50px 60px rgba(0,0,0,.75)) brightness(1.06)}
/* móvil: menos fondo, objetos más grandes y repartidos, palabra con aire a los lados */
@media (max-width:820px){
  .dg-word{font-size:24vw}
  .obj{width:calc(var(--w) * 2.3)}
  .obj[src*="monster"]{left:-8%;top:14%}
  .obj[src*="bolso"]{left:66%;top:12%}
  .obj[src*="loewe"]{left:36%;top:9%}
  .obj[src*="muela"]{left:78%;top:30%}
  .obj[src*="bote"]{left:8%;top:30%}
  .obj[src*="casa"]{left:-6%;top:58%}
  .obj[src*="puntas"]{left:52%;top:58%}
  .obj[src*="brunch"]{left:22%;top:70%}
}
/* móvil con peso: palabra en dos líneas enorme y objetos grandes montados sobre las letras */
.dg-word .br{display:none}
@media (max-width:820px){
  .dg-word .br{display:block;height:0}
  .dg-word{font-size:43vw;line-height:.8;white-space:normal;text-align:center;width:100%}
  .obj{width:calc(var(--w) * 3.1)}
  .obj[src*="monster"]{left:-14%;top:13%}
  .obj[src*="bolso"]{left:58%;top:15%}
  .obj[src*="loewe"]{left:32%;top:9%}
  .obj[src*="muela"]{left:76%;top:38%}
  .obj[src*="bote"]{left:2%;top:40%}
  .obj[src*="casa"]{left:-12%;top:60%}
  .obj[src*="puntas"]{left:46%;top:60%}
  .obj[src*="brunch"]{left:14%;top:72%}
}
@media (max-width:820px){
  .dg-l{display:none}
  .obj[src*="bolso"]{left:60%;top:16%;width:calc(var(--w) * 2.3)}
  .obj[src*="brunch"]{left:8%;top:68%;width:calc(var(--w) * 2.6)}
  .obj[src*="puntas"]{left:52%;top:62%;width:calc(var(--w) * 2.4)}
  .obj[src*="monster"]{left:-12%;top:12%}
  .obj[src*="casa"]{left:-10%;top:56%;width:calc(var(--w) * 2.6)}
  .obj[src*="bote"]{left:4%;top:34%}
}
@media (max-width:820px){
  .obj[src*="bolso"]{left:47%;top:17%}
  .obj[src*="puntas"]{left:42%;top:61%}
  .obj[src*="brunch"]{left:2%;top:66%}
  .obj[src*="monster"]{left:-16%}
  .dg-bl{display:none}
}
/* anillo de móviles: menos hueco entre la cifra y los móviles */
@media (min-width:821px){
  .ring-top{padding-top:calc(var(--navh) + 10px)}
  .ring-stage .ring-center{padding-top:0}
  .ring-num{font-size:clamp(64px,8vw,150px)}
}
/* Ordenador: racimo compacto, línea de orden, scroll más natural */
.dg{height:170vh}
.ring{height:170vh}
@media (min-width:821px){
  .obj{width:calc(var(--w) * 1.55)}
  .dg-word{top:46%}
  .dg-foot{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:28px;white-space:nowrap}
  .dg-foot p{color:var(--ink-2);font-size:clamp(15px,1.1vw,18px)}
  .btn-dossier{display:inline-flex;gap:10px;align-items:center;background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;padding:14px 20px}
  .dg-b{display:none}
}
@media (max-width:820px){.dg-foot{display:none}}
/* sin hueco negro entre la entrada y el carrusel */
.dg{height:135vh}
.ring{margin-top:-1px}
/* Paso a blanco: la palabra llena la pantalla, sale el logo y se abre hacia el carrusel */
.dg{height:250vh}
.flash{position:absolute;inset:0;z-index:8;background:#f4f1ea;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none}
.flash-logo{font-weight:900;letter-spacing:-.055em;line-height:1;font-size:clamp(64px,9vw,150px);color:#0a0a0a;opacity:0}
.flash-logo .dot{color:#8b8b8b}
.flash-sub{color:rgba(10,10,10,.55)!important;opacity:0}
.dg-c,.dg-foot{transition:none}
.nav.on-white{background:rgba(244,241,234,.85);color:#0a0a0a;border-color:rgba(10,10,10,.1)}
.nav.on-white .label{color:rgba(10,10,10,.5)}
.nav.on-white .nav-cta{background:#0a0a0a;color:#f4f1ea}

/* ===== Depurado 24/10: ligero, un solo negro, sin cortes ===== */
:root{--negro:#0a0a0a}
body{background:var(--negro)}
.dg{height:210vh}
.dg-stick{background:var(--negro)}
.dg-stick::after{display:none}
.dg-word{pointer-events:none}
.obj{width:calc(var(--w) * 1.5)}
.obj.near,.obj.far{filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.flash{background:var(--negro)}
.flash-logo{color:var(--ink)}
.flash-logo .dot{color:var(--dot)}
.flash-sub{color:var(--ink-3)!important}
.nav.on-white{background:rgba(7,7,7,.55);color:var(--ink)}
.ring,.ring-stick{background:var(--negro)!important;background-image:none!important}
.ring-stick::before{content:"";position:absolute;left:50%;top:58%;width:70vw;height:70vh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,244,225,.07),transparent);pointer-events:none}
.ring-top,.ring .sh{border:0!important}
.ring-floor{opacity:.6}
@media (min-width:821px){.dg-foot{bottom:6vh}}
@media (max-width:820px){
  .obj{width:calc(var(--w) * 2.6)}
  .obj[src*="monster"]{left:-8%;top:16%}
  .obj[src*="loewe"]{left:30%;top:12%}
  .obj[src*="muela"]{left:56%;top:13%}
  .obj[src*="bolso"]{left:70%;top:18%}
  .obj[src*="casa"]{left:-6%;top:58%}
  .obj[src*="brunch"]{left:26%;top:64%}
  .obj[src*="puntas"]{left:50%;top:60%}
  .obj[src*="bote"]{left:84%;top:52%}
}
/* el carrusel sube por encima del final de la entrada (mismo negro): sin hueco ni corte */
.ring{position:relative;z-index:3;margin-top:-38vh}
.ring-stick{box-shadow:0 -40vh 40vh -10vh var(--negro)}
/* la escena no tapa a los objetos: se pueden coger aunque estén detrás de la palabra */
.scene,.dg-stick .flash,.floor{pointer-events:none}
.scene .obj{pointer-events:auto}
@media (min-width:821px){.obj{width:calc(var(--w) * 1.7)}}
/* Objetos en el perímetro: BOAFE. limpio en el centro al entrar */
@media (min-width:821px){.obj{width:calc(var(--w) * 1.35)}}
@media (max-width:820px){
  .obj{width:calc(var(--w) * 2.5)}
  .obj[src*="monster"]{left:-10%;top:10%}
  .obj[src*="loewe"]{left:40%;top:9%}
  .obj[src*="muela"]{left:72%;top:11%}
  .obj[src*="bolso"]{left:76%;top:24%}
  .obj[src*="bote"]{left:2%;top:26%}
  .obj[src*="casa"]{left:-6%;top:72%}
  .obj[src*="brunch"]{left:34%;top:80%}
  .obj[src*="puntas"]{left:66%;top:72%}
}
.dg-l,.dg-r{display:none}
/* objetos grandes asomando por los bordes */
@media (min-width:821px){.obj{width:var(--w)}}
.dg-stick{overflow:hidden}
@media (max-width:820px){
  .obj{width:calc(var(--w) * 1.9)}
  .obj[src*="monster"]{left:-18%;top:6%}
  .obj[src*="loewe"]{left:30%;top:4%}
  .obj[src*="muela"]{left:62%;top:5%}
  .obj[src*="bolso"]{left:74%;top:20%}
  .obj[src*="bote"]{left:-4%;top:26%}
  .obj[src*="casa"]{left:-16%;top:72%}
  .obj[src*="brunch"]{left:28%;top:82%}
  .obj[src*="puntas"]{left:62%;top:72%}
}
.dg-foot,.dg-bl{display:none!important}
/* la mitad de scroll entre la entrada y el carrusel */
.dg{height:155vh}
.ring{margin-top:-20vh}
/* etiqueta del cliente al pasar por un objeto */
.obj-tag{position:fixed;left:0;top:0;z-index:90;display:flex;align-items:center;gap:10px;background:rgba(10,10,10,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);padding:8px 14px 8px 8px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .18s;white-space:nowrap}
.obj-tag.on{opacity:1}
.obj-tag img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff}
.obj-tag p{display:flex;flex-direction:column;line-height:1.2}
.obj-tag b{font-weight:700;font-size:14px}
.obj-tag span{font-size:12px;color:var(--ink-3)}
/* el carrusel ya está subiendo cuando el logo empieza a apagarse; su borde de arriba es transparente para no tapar el logo */
.ring{margin-top:-58vh}
.ring .ring-stick{background:linear-gradient(rgba(10,10,10,0) 0, var(--negro) 28vh) !important;box-shadow:none}
.ring{background:transparent!important}
/* lienzo de los objetos 3D de verdad (no tapa los clics: los coge su propio código) */
.dg-gl{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
/* de cerca, la palabra solo con 5 capas de grosor (las 19 a tamaño gigante daban tirones) */
.w3d.zoom .w-l:nth-child(-n+13){visibility:hidden}
.ring-velo{position:absolute;inset:0;z-index:20;background:#0a0a0a;pointer-events:none}