/* Estudio 3D de la zona Lab (Golden, la caja de The Choise y la M de esta web). Se abre en círculo desde donde se hizo clic, como la vitrina y el Mutanteverso. */
.estudio{--ox:50%;--oy:50%;--acento:var(--mutation);--linea:rgba(248,245,240,.18);
  position:fixed;inset:0;z-index:27;background:#070606;color:var(--hueso);overflow:hidden;visibility:hidden;
  clip-path:circle(0% at var(--ox) var(--oy));transition:clip-path 1s var(--suave),visibility 0s 1s;
  font-family:'Archivo',sans-serif;-webkit-user-select:none;user-select:none}
.estudio.abierta{visibility:visible;clip-path:circle(150% at var(--ox) var(--oy));transition:clip-path 1.05s var(--suave)}
.estudio button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Fondo de estudio: luz cálida para el costal y el azul de The Choise para la caja */
.estudio::before,.estudio::after{content:'';position:absolute;inset:0;transition:opacity .9s var(--suave)}
.estudio::before{background:
  radial-gradient(ellipse 34% 46% at 64% 44%,rgba(242,74,31,.22),transparent 70%),
  radial-gradient(ellipse 60% 70% at 64% 40%,#2b1d14 0%,#120c09 55%,#070606 100%)}
.estudio::after{background:radial-gradient(ellipse 60% 70% at 60% 50%,#0b5bf0 0%,#0451e4 55%,#0344c4 100%);opacity:0}
.estudio[data-pieza="cuadros"]{--acento:var(--hueso)}
.estudio[data-pieza="cuadros"]::before{opacity:0}
.estudio[data-pieza="cuadros"]::after{opacity:1}

.es-escena{position:absolute;inset:0;z-index:1;cursor:grab;touch-action:none}
.es-escena:active{cursor:grabbing}
.es-3d,.es-cuadros{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .5s}
.es-cuadros{opacity:0;-webkit-mask-image:radial-gradient(ellipse 46% 44% at 62% 47%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 46% 44% at 62% 47%,#000 62%,transparent 100%)}
.estudio[data-pieza="cuadros"] .es-cuadros{opacity:1}
.estudio[data-pieza="cuadros"] .es-3d{opacity:0}

/* Barrido entre piezas: una cortina con filo naranja que cruza la escena */
.es-barrido{position:absolute;inset:0;z-index:2;background:#070606;transform:translateX(-101%);pointer-events:none}
.es-barrido::after{content:'';position:absolute;top:0;bottom:0;right:-3px;width:3px;background:var(--mutation);box-shadow:0 0 30px 6px rgba(242,74,31,.55)}
.es-barrido.va{animation:es-barrido .95s var(--suave) forwards}
@keyframes es-barrido{0%{transform:translateX(-101%)}44%,52%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* Barra */
.es-barra{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:22px 40px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;pointer-events:none}
.es-barra > *{pointer-events:auto}
.es-marca{display:flex;align-items:center;gap:14px}
.es-marca img{height:26px;width:auto}
.estudio[data-pieza="cuadros"] .es-marca img{filter:brightness(0) invert(1)}
.es-cerrar{border:1px solid rgba(248,245,240,.5)!important;padding:12px 18px;letter-spacing:.3em;text-transform:uppercase;font-family:'JetBrains Mono',monospace!important;font-size:11px!important;transition:background .3s,color .3s}
.es-cerrar:hover{background:var(--hueso);color:#070606}

/* Texto de la pieza */
.es-info{position:absolute;z-index:3;left:40px;top:50%;transform:translateY(-50%);width:min(440px,34vw)}
.es-ojo{display:flex;gap:14px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(248,245,240,.75)}
.es-ojo b{font-weight:500;color:var(--acento)}
.es-titulo{margin:18px 0 0;font-weight:900;text-transform:uppercase;font-size:clamp(52px,6.2vw,108px);line-height:.88;letter-spacing:-.015em}
.es-titulo x-p{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .06em 0;white-space:nowrap}
.es-titulo x-l{display:inline-block;font-variation-settings:'wdth' 125,'EDPT' 200;transform:translateY(108%);transition:none}
.es-info.entra .es-titulo x-l{transform:none;transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms),font-variation-settings 1.4s var(--suave) calc(var(--i) * 45ms + 200ms)}
.es-info:not(.entra) .es-titulo x-l{font-variation-settings:'wdth' 62,'EDPT' 0}
.es-cliente{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acento)}
.es-desc{margin-top:22px;font-size:17px;line-height:1.6;color:rgba(248,245,240,.84);max-width:40ch}
.es-servicios{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0}
.es-servicios li{border:1px solid rgba(248,245,240,.3);border-radius:999px;padding:9px 14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.es-tira{display:flex;gap:10px;margin-top:26px}
.es-tira button{width:66px;height:82px;padding:0;overflow:hidden;border-radius:4px;outline:1px solid rgba(248,245,240,.2);transition:transform .4s var(--suave),outline-color .3s}
.es-tira button:hover{transform:translateY(-6px) rotate(-2deg);outline-color:var(--acento)}
.es-tira img{width:100%;height:100%;object-fit:cover;display:block}
.estudio[data-pieza="cuadros"] .es-tira button{width:96px;height:58px}
.estudio[data-pieza="isotipo"] .es-tira button{width:96px;height:60px}
/* sobre el azul de la caja, el título va en blanco con la extrusión azul marino de The Choise */
.estudio[data-pieza="cuadros"] .es-titulo.pp{font-palette:--choise-blanco}
.es-ficha{margin-top:24px;padding:0 0 6px!important;border-bottom:1px solid var(--acento)!important;font-family:'JetBrains Mono',monospace!important;font-size:11px!important;letter-spacing:.24em;text-transform:uppercase}
/* el bloque entra en cascada */
.es-info > *:not(.es-titulo){opacity:0;transform:translateY(14px)}
.es-info.entra > *:not(.es-titulo){opacity:1;transform:none;transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.es-info.entra > .es-cliente{transition-delay:.35s}.es-info.entra > .es-desc{transition-delay:.45s}
.es-info.entra > .es-servicios{transition-delay:.55s}.es-info.entra > .es-tira{transition-delay:.65s}.es-info.entra > .es-ficha{transition-delay:.75s}

/* Pista de uso */
.es-pista{position:absolute;z-index:3;left:64%;bottom:150px;transform:translate(-50%,10px);display:flex;align-items:center;gap:12px;pointer-events:none;
  padding:12px 18px;border-radius:999px;background:rgba(7,6,6,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(248,245,240,.18);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .6s,transform .6s var(--suave)}
.es-pista.on{opacity:1;transform:translate(-50%,0)}
.es-pista i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--acento);position:relative;animation:es-arrastre 1.8s var(--suave) infinite}
@keyframes es-arrastre{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
.estudio[data-pieza="cuadros"] .es-pista{left:60%;bottom:178px}

/* Línea de tiempo de la caja */
.es-linea{position:absolute;z-index:3;left:calc(min(440px,34vw) + 110px);right:48px;bottom:104px;opacity:0;pointer-events:none;transition:opacity .5s}
.estudio[data-pieza="cuadros"] .es-linea{opacity:1;pointer-events:auto}
.es-capitulos{position:relative;height:30px}
.es-capitulos button{position:absolute;bottom:8px;transform:translateX(-50%);font-family:'JetBrains Mono',monospace!important;font-size:10px!important;letter-spacing:.2em;text-transform:uppercase;opacity:.6;transition:opacity .3s;white-space:nowrap;padding:4px 0}
.es-capitulos button:first-child{transform:none}
.es-capitulos button.on,.es-capitulos button:hover{opacity:1}
.es-riel{position:relative;height:22px;cursor:ew-resize;touch-action:none}
.es-riel::before{content:'';position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(248,245,240,.3)}
.es-riel i{position:absolute;left:0;right:0;top:10px;height:2px;background:var(--hueso);transform-origin:left;transform:scaleX(0)}
.es-riel b{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--hueso);box-shadow:0 0 0 6px rgba(248,245,240,.18)}
.es-carga{position:absolute;right:0;top:-2px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}

/* Pie: piezas y siguiente zona */
.es-pie{position:absolute;z-index:4;left:40px;right:40px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none}
.es-pie > *{pointer-events:auto}
.es-piezas{display:flex;gap:8px}
.es-piezas button{display:flex;align-items:center;gap:10px;border:1px solid rgba(248,245,240,.3)!important;border-radius:999px;padding:12px 18px;
  font-family:'JetBrains Mono',monospace!important;font-size:11px!important;letter-spacing:.2em;text-transform:uppercase;transition:background .35s,color .35s,border-color .35s}
.es-piezas button b{font-weight:500;color:var(--acento)}
.es-corto{display:none}
.es-piezas button.on{background:var(--hueso);color:#070606;border-color:var(--hueso)!important}
.es-piezas button.on b{color:var(--mutation)}
.es-siguiente{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-weight:900;font-size:clamp(22px,2.2vw,34px)!important;text-transform:uppercase;letter-spacing:-.01em;transition:color .3s}
.es-siguiente span{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.3em;opacity:.65}
.es-siguiente:hover{color:var(--acento)}
.estudio .es-siguiente{font-weight:900;font-variation-settings:'wdth' 125,'EDPT' 200;white-space:nowrap}
.es-cerrar:focus:not(:focus-visible){outline:none}

@media (max-width:820px){
  .es-barra{padding:16px}
  .es-marca span{display:none}
  .es-cerrar{padding:10px 14px}
  .es-info{left:16px;right:16px;top:auto;bottom:84px;transform:none;width:auto}
  .es-titulo{font-size:clamp(38px,11vw,62px);margin-top:12px}
  .es-cliente{margin-top:10px;font-size:11px}
  .es-desc{margin-top:12px;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .es-servicios,.es-tira{display:none}
  .es-ficha{margin-top:14px}
  .es-pista{left:50%;bottom:auto;top:74px;font-size:9px;letter-spacing:.14em;padding:9px 13px;white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 32px)}
  .estudio[data-pieza="cuadros"] .es-pista{left:50%;bottom:auto;top:74px}
  .es-cuadros{-webkit-mask-image:radial-gradient(ellipse 70% 22% at 50% 30%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 22% at 50% 30%,#000 60%,transparent 100%)}
  .estudio::before{background:radial-gradient(ellipse 60% 34% at 50% 34%,rgba(242,74,31,.24),transparent 70%),radial-gradient(ellipse 90% 60% at 50% 34%,#2b1d14 0%,#120c09 55%,#070606 100%)}
  .estudio::after{background:radial-gradient(ellipse 90% 60% at 50% 30%,#0b5bf0 0%,#0451e4 55%,#0344c4 100%)}
  .es-linea{left:16px;right:16px;bottom:auto;top:47%}
  .es-capitulos button{font-size:9px!important;letter-spacing:.12em}
  .es-capitulos button:nth-child(2){display:none}
  .es-pie{left:16px;right:16px;bottom:16px}
  .es-piezas{gap:6px}
  .es-piezas button{padding:10px 11px;gap:7px;font-size:10px!important;letter-spacing:.12em}
  .es-largo{display:none}.es-corto{display:inline}
  .es-siguiente{font-size:16px!important}
  .es-siguiente span{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .es-titulo x-l,.es-info > *{transition:none!important;transform:none!important;opacity:1!important}
  .es-pista i{animation:none}
}