/* DELAFOLLA — portfolio 3D navegable */
@font-face {
  font-family: "Akira Expanded";
  src: url("assets/AkiraExpanded.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --bg: #e4e4e0;
  --ink: #141414;
  --mid: #6f6f6a;
  --ghost: #c9c9c4;
  --blue: #364be7;
  --glass: #e9e9e5;
  --glass-hover: #e9e9e5;
  --glass-strong: #e9e9e5;
  --glass-border: transparent;
  --font-sans: "Archivo", "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
/* fondo de vídeo (montaje Vimeo en bucle) — solo en Proyectos, no afectado por la órbita */
#proj-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0d0d0c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
#proj-bg.on { opacity: 1; }
.pbg-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100vh; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.pbg-frame.show { opacity: 1; }
.pbg-scrim { position: absolute; inset: 0; background: rgba(255,255,255,0.30); }
/* ocultar barras de scroll en todo el sitio (mantiene el scroll funcional) */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cg%20fill='%23364be7'%3E%3Crect%20x='9.3'%20y='1'%20width='3.4'%20height='20'%20rx='1.1'/%3E%3Crect%20x='9.3'%20y='1'%20width='3.4'%20height='20'%20rx='1.1'%20transform='rotate(60%2011%2011)'/%3E%3Crect%20x='9.3'%20y='1'%20width='3.4'%20height='20'%20rx='1.1'%20transform='rotate(120%2011%2011)'/%3E%3C/g%3E%3C/svg%3E") 11 11, auto;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#stage { position: fixed; inset: 0; cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Cg%20fill='%23364be7'%3E%3Crect%20x='9.3'%20y='1'%20width='3.4'%20height='20'%20rx='1.1'/%3E%3Crect%20x='9.3'%20y='1'%20width='3.4'%20height='20'%20rx='1.1'%20transform='rotate(60%2011%2011)'/%3E%3Crect%20x='9.3'%20y='1'%20width='3.4'%20height='20'%20rx='1.1'%20transform='rotate(120%2011%2011)'/%3E%3C/g%3E%3C/svg%3E") 11 11, auto; }
#stage.dragging { cursor: grabbing; }

/* ---------- microinteracciones estilo delafolla ---------- */
.click-flash {
  position: fixed; z-index: 9999;
  pointer-events: none; transform: translate(-50%, -50%);
  color: #364be7;
  font-family: "Akira Expanded", sans-serif;
  font-weight: 400; font-size: 22px; line-height: 1;
  animation: click-flash .32s steps(2) forwards;
}
.click-flash::after { content: "*"; display: block; }
@keyframes click-flash {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(.4); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.1); }
}
.dark-btn, .playlist-btn, .upload-btn, .mode-toggle button, .lang-btn {
  transition: background-color .1s, color .1s, opacity .12s;
}
.dark-btn:active, .playlist-btn:active, .upload-btn:active, .mode-toggle button:active, .lang-btn:active {
  background: var(--ink); color: var(--bg);
}
.ov-row { transition: background-color .12s, transform .14s ease; }
.ov-row:hover { transform: translateX(8px); }
.ov-row .h { transition: transform .14s ease; }
.ov-row:hover .h { transform: scale(1.8); }
#gl, #css3d { position: absolute; inset: 0; }
#gl, #css3d { z-index: 1; }
#css3d, #css3d * { pointer-events: none; }
#css3d .card3d, #css3d .card3d * { pointer-events: auto; cursor: pointer; }
#css3d .poster3d, #css3d .poster3d * { pointer-events: auto; cursor: pointer; }

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 4vw;
  /* la franja del header deja pasar el ratón a la escena 3D (cámara orbital):
     solo sus elementos interactivos capturan clics */
  pointer-events: none;
}
.hud a, .hud button, .hud .lang, .hud .hud-links { pointer-events: auto; }
.hud .logo { justify-self: start; font-weight: 900; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.hud .logo sup { font-size: 9px; font-weight: 400; }
.hud-links { display: flex; gap: 22px; justify-self: center; }
.lang { justify-self: end; }
.hud-links button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); padding: 4px 0;
  border-bottom: 1px solid transparent;
  position: relative;
  transition: letter-spacing .14s ease;
}
.hud-links button::before, .hud-links button::after {
  position: absolute; top: 4px;
  font-family: var(--font-mono); font-size: 11px;
  opacity: 0; transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.hud-links button::before { content: "["; left: -11px; transform: translateX(5px); }
.hud-links button::after { content: "]"; right: -11px; transform: translateX(-5px); }
.hud-links button:hover { letter-spacing: 0.16em; border-bottom-color: transparent; }
.hud-links button:hover::before, .hud-links button:hover::after { opacity: 0.5; transform: translateX(0); }
.lang { display: flex; align-items: center; gap: 6px; }
.lang-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--ink);
  opacity: 0.4; padding: 4px 2px;
}
.lang-btn.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang-sep { font-family: var(--font-mono); font-size: 11px; opacity: 0.4; }

.hint {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--mid);
  text-align: center;
}
/* Pantalla de carga inicial: tapa la escena mientras se precargan el modelo 3D
   y las imágenes de los proyectos, en cualquier tamaño de pantalla */
#mobile-splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--blue, #2b4bf2);
  color: #fff;
  text-align: center;
  padding: 8vw;
  transition: opacity .45s ease;
  cursor: none;
}
#mobile-splash.hide { opacity: 0; pointer-events: none; }
#ms-physics {
  position: absolute;
  inset: 0;
  z-index: 0;
  touch-action: none;
  cursor: none;
}
#ms-cursor-pct {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  transform: translate(18px, -10px);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue, #2b4bf2);
  background: #f4f4ef;
  padding: 4px 9px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
#ms-cursor-ring {
  display: none;
}
.ms-hint {
  position: absolute;
  z-index: 1;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f4f4ef;
  opacity: 0.85;
  animation: msHintPulse 1.8s ease-in-out infinite;
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes msHintPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
.ms-word {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  opacity: 0.9;
}
@keyframes msSlide { 0%{transform:translateX(-110%);} 100%{transform:translateX(320%);} }

.loading {
  position: fixed;
  bottom: 48px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--mid);
  text-align: center;
}

/* botón de subida de modelo */
.upload-btn {
  position: fixed;
  bottom: 22px;
  left: 4vw;
  z-index: 11;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 3px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#add-scene-model { bottom: 46px; }
#scene-toggle { bottom: 70px; }
#upload-music-model { bottom: 46px; }
.upload-btn:hover { opacity: 0.5; }

/* ---------- modo oscuro ---------- */
body.dark {
  --bg: #161614;
  --ink: #e9e9e4;
  --mid: #93938d;
  --ghost: #2e2e2b;
  --glass: #1b1b19;
  --glass-hover: #1b1b19;
  --glass-strong: #1b1b19;
  --glass-border: transparent;
}

.dark-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 18px;
  padding: 4px 0;
}
.dark-btn:hover { opacity: 0.5; }

/* botón de sonido */
.sound-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 18px;
  padding: 4px 0;
}
.sound-btn:hover { opacity: 0.5; }

/* wordmark */
.logo .logo-img { height: 18px; display: block; }

/* botón playlist de Spotify */
.playlist-btn {
  position: fixed;
  bottom: 22px;
  right: 4vw;
  z-index: 11;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.playlist-btn:hover { opacity: 0.5; }
/* bocadillo "Play me!" flotando sobre el botón (escritorio) */
.playlist-btn { overflow: visible; }
.playlist-btn::after {
  content: "Play me!";
  position: absolute;
  left: auto;
  right: -6px;
  bottom: calc(100% + 12px);
  transform: translateX(0) translateY(0);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 5px 9px;
  border-radius: 11px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  animation: plBob 1.9s ease-in-out infinite;
}
.playlist-btn::before {
  content: "";
  position: absolute;
  left: auto;
  right: 8px;
  bottom: calc(100% + 5px);
  transform: translateX(0) translateY(0);
  border: 5px solid transparent;
  border-top-color: var(--blue);
  pointer-events: none;
  animation: plBob 1.9s ease-in-out infinite;
}
@keyframes plBob {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(0) translateY(-4px); }
}
#spotify-panel {
  position: fixed;
  bottom: 54px;
  right: 4vw;
  z-index: 12;
  width: min(360px, 88vw);
  max-height: 64vh;
  display: none;
  flex-direction: column;
  border: 1px solid var(--ink);
  background: var(--bg);
  overflow: hidden;
}
#spotify-panel.show { display: flex; }
.tl-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--ink);
  flex: 0 0 auto;
}
.tl-head { flex: 1; font-size: 10px; letter-spacing: 0.16em; color: var(--ink); text-decoration: none; }
a.tl-head:hover { opacity: 0.5; }
.tl-x { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 10px; color: var(--ink); padding: 2px; }
/* controles prev / play-pausa / next en la barra de la playlist */
.tl-ctrl { display: inline-flex; align-items: center; gap: 6px; }
.tl-cbtn {
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 12px; line-height: 1; padding: 3px 4px;
  opacity: 0.7; transition: opacity .12s ease;
}
.tl-cbtn:hover { opacity: 1; }
#tl-play .tlc-pause { display: none; }
#tl-play.playing .tlc-play { display: none; }
#tl-play.playing .tlc-pause { display: inline; }
.tl-x:hover { opacity: 0.5; }
.tl-mute { background: none; border: none; cursor: pointer; color: var(--ink); padding: 2px; display: inline-flex; align-items: center; }
.tl-mute:hover { opacity: 0.5; }
/* altavoz junto al selector de idioma (ES / EN) */
#tl-mute {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 2px;
  opacity: 0.55;
}
#tl-mute svg { width: 15px; height: 15px; display: block; }
#tl-mute:hover { opacity: 1; }
#tl-mute.muted { color: #364be7; opacity: 1; }
.tl-mute .mute-off { display: none; }
.tl-mute.muted .mute-on { display: none; }
.tl-mute.muted .mute-off { display: inline; }
.tl-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 22px; height: 14px; }
.tl-eq i { width: 3px; height: 100%; background: var(--ink); transform-origin: bottom; }
.tl-eq i:nth-child(1) { transform: scaleY(0.4); }
.tl-eq i:nth-child(2) { transform: scaleY(0.85); }
.tl-eq i:nth-child(3) { transform: scaleY(0.55); }
.tl-eq i:nth-child(4) { transform: scaleY(1); }
.tl-eq i:nth-child(5) { transform: scaleY(0.65); }
.tl-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.tl-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--ghost);
  cursor: pointer;
}
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: var(--ghost); }
.tl-row.now { background: var(--ink); color: var(--bg); }
.tl-ix { font-size: 10px; opacity: 0.55; width: 18px; flex: 0 0 auto; }
.tl-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tl-t { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-a { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-row.now .tl-a { opacity: 0.85; }
.tl-eqr { display: none; align-items: flex-end; gap: 2px; width: 15px; height: 12px; flex: 0 0 auto; }
.tl-eqr i { width: 3px; height: 100%; background: var(--bg); transform-origin: bottom; transform: scaleY(0.3); animation: eqr 0.6s ease-in-out infinite; }
.tl-eqr i:nth-child(2) { animation-duration: 0.42s; }
.tl-eqr i:nth-child(3) { animation-duration: 0.8s; }
.tl-row.now .tl-eqr { display: inline-flex; }
@keyframes eqr { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
#spotify-embed-wrap { width: 100%; flex: 0 0 auto; border-bottom: 1px solid var(--ink); overflow: hidden; background: var(--bg); }
#spotify-embed-wrap iframe { display: block; width: 100%; border: 0; }

/* ---------- vista de proyecto: PANTALLA COMPLETA ---------- */

/* selector órbita / columnas */
.mode-toggle {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: none;
  background: transparent;
  padding: 0;
}
.mode-toggle.show { display: flex; }
/* botones sol/luna (modo oscuro) como icono */
#dark-btn, #d-dark { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; }
#dark-btn svg, #d-dark svg { display: block; }
.mode-toggle .sep { font-family: var(--font-mono); font-size: 12px; opacity: 0.3; }
.mode-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.4;
  padding: 2px 0;
  transition: opacity .14s, letter-spacing .14s;
}
.mode-toggle button:hover { opacity: 0.75; letter-spacing: 0.18em; }
.mode-toggle button.active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* elementos flotantes (motivo * de delafolla) */
.float-star { position: fixed; z-index: 2; pointer-events: none; }
.float-star .ast { display: block; opacity: 0.85; animation: spinStar 14s linear infinite; }
.float-star.s1 { top: 19%; left: 13%; animation: floatA 17s ease-in-out infinite; }
.float-star.s1 .ast { width: 52px; height: 52px; }
.float-star.s2 { bottom: 24%; right: 15%; animation: floatB 21s ease-in-out infinite; }
.float-star.s2 .ast { width: 32px; height: 32px; animation-duration: 18s; }
@keyframes spinStar { to { transform: rotate(360deg); } }
@keyframes floatA { 0%,100%{transform:translate(0,0);} 33%{transform:translate(36px,28px);} 66%{transform:translate(-18px,46px);} }
@keyframes floatB { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-34px,-30px);} }
@media (prefers-reduced-motion: reduce) { .float-star, .float-star span { animation: none; } }

/* ---------- CSS3D elements ---------- */
.c3d { user-select: none; }
/* la interfaz (HUD, escena, controles) no es texto seleccionable: arrastrar/clicar en
   los huecos de Órbita/Esfera ya no pinta la selección azul. El texto de los case
   studies (#detail) sí se puede seleccionar. */
body { -webkit-user-select: none; user-select: none; }
#detail, #detail * { -webkit-user-select: text; user-select: text; }
#detail button, #detail .d-nav, #detail .d-counter, #detail .mini-player { -webkit-user-select: none; user-select: none; }

/* ---- estados de la animación de apertura (sin transiciones: cortes duros) ---- */
.c3d.sq, .c3d.bar, .c3d.frame {
  background: #141414 !important;
  border-color: #141414 !important;
  overflow: hidden;
}
.c3d.sq > *, .c3d.bar > *, .c3d.frame > * { visibility: hidden; }
.c3d.sq .h, .c3d.bar .h, .c3d.frame .h { visibility: hidden; }
.c3d.sq { width: 22px !important; height: 22px !important; padding: 0 !important; }
.c3d.bar { height: 22px !important; padding: 0 !important; }

.orb3d {
  width: max-content;
  max-width: 240px;
  border-top: 2px solid var(--ink);
  padding-top: 8px;
}
.orb3d .orb-l {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.orb3d .orb-t {
  display: block;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* HOME: pósters flotando en el espacio */
.poster3d .poster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e9e9e4;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: box-shadow .18s ease;
}
.poster3d:hover .poster {
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3), 0 0 0 2px #364be7;
}

/* logos de clientes en el anillo 3D — PNG blanco usado como máscara, coloreado por el tema */
.c3d.logo3dwrap { pointer-events: none; }
/* azul de marca: se lee bien tanto sobre el fondo claro como sobre la ropa del personaje */
.c3d.logo3dwrap .logo3d { background-color: var(--blue, #364be7); }
.logo3d {
  display: block;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* tarjetas estilo "selección": borde fino + tiradores cuadrados en las esquinas */
.card3d {
  width: 440px;
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .18s ease, background-color .18s ease;
}
.card3d:hover {
  background: transparent;
  border-color: transparent;
}
.card3d .chip {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: none;
}
.card3d:hover .chip { border-bottom: none; }
/* descripción: oculta por defecto, se despliega hacia ABAJO al hacer hover */
.card3d .body {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg);
  border: none;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 14px;
}
.card3d:hover .body { opacity: 1; transform: none; }
.card3d .h { opacity: 0; transition: opacity .18s ease; }
.card3d:hover .h { opacity: 1; }
.card3d .t {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ink);
}
.card3d .tags {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.card3d .foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 26px;
}
.card3d .cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.card3d .ix { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); }

/* tiradores de esquina: asterisco Akira en azul, centrado en la esquina */
.h {
  position: absolute;
  width: 26px;
  height: 26px;
  background: none;
  color: #364be7;
  font-family: "Akira Expanded", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.h { display: none !important; }
.h::before { content: "*"; display: block; line-height: 1; transform: translateY(0.12em); }
.h.tl { top: -13px; left: -13px; }
.h.tr { top: -13px; right: -13px; }
.h.bl { bottom: -13px; left: -13px; }
.h.br { bottom: -13px; right: -13px; }

.contact3d {
  width: 360px;
  background: var(--bg);
  color: var(--ink);
  border: none;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.contact3d .t { font-weight: 500; font-size: 44px; letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase; }
.contact3d .b { font-size: 14px; line-height: 1.5; color: var(--mid); max-width: 36ch; }
.contact3d .e {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 34px;
}
.contact3d .d {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.contact3d .d:first-of-type { margin-top: 4px; }

.giant3d {
  font-weight: 900;
  font-size: 260px;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ghost);
}
.label3d {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ---------- overlays 2D brutalistas (about / contacto) ---------- */
.ov {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: none;
}
.ov.show { display: block; }
.ov-tag {
  position: absolute;
  top: 78px;
  left: 4vw;
  color: var(--mid);
}
.ov-col {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vh, 30px);
  width: min(360px, 32vw);
}
.ov-col.left { left: 4vw; align-items: flex-start; text-align: left; }
.ov-col.right { right: 4vw; align-items: flex-end; text-align: right; }
.ov-item {
  border-top: 2px solid var(--ink);
  padding-top: 10px;
  min-width: 220px;
  max-width: 100%;
}
/* about / contacto: cajas como las filas de proyectos */
.ov-col .ov-item {
  position: relative;
  border: none;
  background: transparent;
  padding: 15px 18px 17px;
  width: 100%;
  min-width: 0;
}
.ov-col.right .ov-item { text-align: right; }
/* about: TODO en una sola caja glass a la izquierda */
.ov-about-box {
  position: absolute;
  left: clamp(20px, 4.5vw, 72px);
  top: 50%;
  transform: translateY(-50%);
  width: min(450px, 40vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  pointer-events: auto;
}
.ov-about-box .ov-item {
  border: none;
  padding: 14px 20px;
  width: 100%;
  min-width: 0;
  text-align: center;
}
#ov-about .ov-tag { display: none; }
.ov-about-box .ab-title {
  margin: 0;
  padding: 30px 0 18px;
  text-align: left;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.ov-about-box .ov-item:first-child { border-top: none; }
.ov-about-box .ab-bio {
  margin: 0;
  padding: 22px 0 24px;
  text-align: left;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.58;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  color: var(--ink);
}
.ov-about-box .ab-contact {
  border-top: none;
  padding: 22px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}
.ov-about-box .ab-clients {
  border-top: none;
  padding: 8px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ab-clients-l {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.ab-clients-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
/* logos: PNG blanco usado como máscara para que tomen el color del tema */
.ab-logos {
  display: block;
  width: 100%;
  aspect-ratio: 3112 / 178;
  background-color: var(--ink);
  -webkit-mask: url("assets/clients-logos.png") center / contain no-repeat;
  mask: url("assets/clients-logos.png") center / contain no-repeat;
}
.ab-eci {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.ab-mail {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.ab-mail:hover { opacity: 0.55; }
.ab-cv {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 9px 16px;
  transition: background-color .12s, color .12s;
}
.ab-cv:hover { background: var(--ink); color: var(--bg); }
.ab-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  line-height: 1.3;
}
.ab-socials a { color: var(--mid); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.ab-socials a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ov-item .orb-l {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.ov-item .orb-t {
  display: block;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-transform: uppercase;
}
.ov-item .orb-t.xxl {
  font-weight: 900;
  font-size: clamp(44px, 6.4vw, 110px);
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.ov-link {
  pointer-events: auto;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px !important;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.ov-link:hover { opacity: 0.5; }

/* lista de proyectos en columna — centrada, estilo rectángulos */
/* índice tipo catálogo (estilo Olive): nº · nombre · meta a la derecha */
.ov-list {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(96px, 13vh, 150px);
  bottom: 90px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: clamp(2px, 0.6vh, 8px);
  padding: 0 clamp(20px, 4vw, 72px);
  overflow-y: auto;
  /* scroll táctil: la lista debe recibir el gesto (el .ov padre tiene pointer-events:none) */
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ov-row {
  pointer-events: auto;
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  padding: clamp(10px, 1.4vh, 18px) 6px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: clamp(48px, 6vw, 88px) 1fr auto;
  align-items: baseline;
  gap: 18px;
  color: var(--ink);
  font-family: var(--font-sans);
  flex-shrink: 0;
  transition: opacity .25s ease, padding-left .25s ease;
}
.ov-list:hover .ov-row { opacity: 0.4; }
.ov-list .ov-row:hover { opacity: 1; padding-left: 18px; }
.ov-idx {
  font-size: clamp(11px, 1vw, 13px);
  color: var(--mid);
  letter-spacing: 0.04em;
}
.ov-row .orb-l { display: none; }
.ov-row .orb-t {
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: none;
}
.ov-ix {
  justify-self: end;
  align-self: center;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}
.ov-row .h { display: none; }
/* miniatura que sigue al cursor */
.ov-float {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(180px, 18vw, 280px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
/* todos los previews con el MISMO formato: llenan el marco 4/3 recortando lo que sobre */
.ov-float img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* los iframes de vídeo no respetan object-fit: se sobredimensionan y se centran para cubrir */
.ov-float iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; }
.ov-float iframe.thumb-vid { width: auto; height: 100%; aspect-ratio: 16 / 9; }
.ov-float iframe.ov-float-v { width: 100%; height: auto; aspect-ratio: 9 / 16; }
.ov-float img.show { opacity: 1; }
.ov-float.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* mini-player: solo dentro del proyecto (detalle), para no perder de vista/control
   la playlist mientras navegas un case study. Se funde con la inactividad igual que
   las flechas/contador, y solo aparece si ya sonó música alguna vez (everPlayed). */
.mini-player {
  position: fixed;
  bottom: clamp(16px, 2.4vw, 30px);
  left: 4vw;
  z-index: 43;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: min(340px, 46vw);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mini-player.show { display: flex; }
#detail .d-nav, #detail .d-counter, #detail .mini-player { transition: opacity .5s ease; }
#detail.ui-idle .mini-player { opacity: 0; pointer-events: none; }
.mp-btn {
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 14px; line-height: 1; padding: 4px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.7; transition: opacity .12s ease;
}
.mp-btn:hover { opacity: 1; }
.mp-play { position: relative; width: 22px; height: 22px; }
.mp-ic-play, .mp-ic-pause { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mp-ic-play::before { content: "▶"; font-size: 12px; }
.mp-ic-pause::before { content: "❚❚"; font-size: 11px; }
.mp-play.playing .mp-ic-play { display: none; }
.mp-play:not(.playing) .mp-ic-pause { display: none; }
.mp-track {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0.75;
}
@media (max-width: 820px) {
  .mini-player { left: 4vw; bottom: clamp(70px, 9vw, 90px); max-width: 60vw; }
}

/* ---------- vista de proyecto a PANTALLA COMPLETA ---------- */
#detail {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #ffffff;
  display: none;
  opacity: 0;
  transition: opacity .4s ease;
}
#detail.show { display: block; }
body.dark #detail { background: #111110; }
body.dark .d-window { background: #111110; }
/* controles siempre visibles dentro del proyecto: sonido + modo oscuro */
.d-tools { position: fixed; top: clamp(18px, 3vw, 34px); right: clamp(70px, 8vw, 120px); z-index: 44; display: flex; align-items: center; gap: 16px; }
.d-tool { background: none; border: none; cursor: pointer; color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; display: inline-flex; align-items: center; padding: 4px 2px; }
.d-tool:hover { opacity: 0.6; }
.d-tool-mute .mute-off { display: none; }
.d-tool-mute.muted .mute-on { display: none; }
.d-tool-mute.muted .mute-off { display: inline; }
#detail.open { opacity: 1; }
.d-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 210px;
  background: #ffffff;
  border: none;
  opacity: 0;
  transition: width .9s cubic-bezier(.22, 1, .36, 1), height .9s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
#detail.open .d-window {
  width: 100vw;
  height: 100vh;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #detail, .d-window { transition: none; }
}
.d-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: clamp(28px, 5vw, 76px) clamp(22px, 5vw, 84px);
}
.d-head {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 56px);
  margin: 0 auto clamp(60px, 8vw, 110px);
  max-width: 1180px;
}
.d-lead { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 34px); position: relative; }
/* asterisco 3D extruido (modelo glTF) flotando en el hueco del titular escalonado;
   gira siguiendo el cursor (controlado por JS en su mini-escena) */
.d-ast {
  position: absolute;
  top: clamp(-30px, -2vw, -12px);
  right: clamp(-10px, 2vw, 40px);
  z-index: 2;
  width: clamp(80px, 12vw, 170px);
  height: clamp(80px, 12vw, 170px);
  pointer-events: none;
}
@media (max-width: 820px) {
  /* el asterisco 3D baja bajo el menú y no pisa los iconos ni el título */
  .d-ast { width: clamp(64px, 16vw, 96px); height: clamp(64px, 16vw, 96px); top: 6px; right: 4vw; z-index: 1; }
  .d-eyebrow, .d-bighead { position: relative; z-index: 2; }
}
.d-eyebrow {
  color: var(--mid);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
}
.d-eyebrow #d-ixn { color: var(--blue); }
/* titular gigante escalonado en mayúsculas (estilo OBYS) —
   reserva a la derecha el hueco del asterisco: el texto salta de línea antes de pisarlo */
.d-bighead {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.9;
  padding-right: clamp(100px, 15vw, 230px);
}
.dh-line {
  display: block;
  font-size: clamp(28px, 5vw, 76px);
  padding-left: calc(var(--i) * clamp(20px, 4vw, 84px));
}
.dh-sub {
  font-weight: 600;
  color: color-mix(in oklab, var(--ink) 78%, var(--bg));
}
/* ficha técnica como lista indexada con líneas finas (estilo OBYS) */
.d-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1180px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.d-mrow {
  display: grid;
  grid-template-columns: 56px minmax(120px, 200px) 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(14px, 1.4vw, 20px) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.d-mi { font-size: 11px; color: var(--blue); letter-spacing: 0.04em; }
.d-ml {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.d-mv { font-weight: 600; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -0.01em; }
.d-clogo {
  display: none;
  height: 28px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin-left: 18px;
  vertical-align: middle;
}
.d-award { background: var(--blue); border: 1px solid var(--blue); color: #fff; padding: 3px 10px; display: inline-block; width: fit-content; justify-self: start; align-self: start; }
.d-desc {
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  max-width: 30ch;
  margin-left: auto;
  letter-spacing: -0.01em;
}
.d-gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.d-gallery img {
  width: 100%;
  display: block;
  border: none;
  cursor: zoom-in;
}
.d-ring-card img, .film-cell img, .cs-metrics img { cursor: inherit; }
.d-gallery.no-zoom .cs-fig img, .d-gallery.no-zoom .cs-stack img { cursor: default; }
/* las piezas mantienen su formato original (sin recortes) y caben en pantalla */
.cs-stack img, .cs-grid2 img, .cs-grid3 img { object-fit: contain; height: auto; width: auto; max-width: 100%; margin: 0 auto; }
.cs-stack > img { max-height: 78vh; }
/* pieza a pantalla completa (banda full-bleed dentro del case study) */
.cs-stack--full { width: 100%; }
.cs-stack--full img { width: 100%; max-width: 100%; height: auto; max-height: none; }
/* pieza hero a sangre completa: rompe el ancho del recuadro hasta los bordes del viewport */
.cs-hero { margin-inline: calc(50% - 50vw); width: auto; max-width: none; }
.cs-hero img { width: 100%; max-width: 100%; height: auto; max-height: none; display: block; margin: 0; }
/* banda hero: sin cabecera ni espaciado; imagen pegada a los bordes (sin marcos blancos) */
.cs--heroband { display: block; padding: 0; margin-block: 0; }
.cs--heroband .cs-hero { margin-block: 0; }
/* si el hero es lo primero de la galería, sube para comer el padding superior del scroll */
.d-gallery > .cs--heroband:first-child { margin-top: calc(-1 * clamp(28px, 5vw, 76px)); }
.cs-grid2 img { max-height: 72vh; }
.cs-grid3 img { max-height: 52vh; }
.d-embed { max-width: 1100px; margin: 0 auto; width: 100%; }

/* ---------- coverflow 3D (galerías con muchas imágenes) ---------- */
.cf { position: relative; margin: 26px 0 8px; user-select: none; }
.cf-stage {
  position: relative;
  height: clamp(440px, 78vh, 860px);
  perspective: 2000px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.cf-stage.grabbing { cursor: grabbing; }
.cf-track { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.cf-card {
  position: absolute;
  left: 0; top: 0;
  height: clamp(400px, 72vh, 800px);
  width: auto;
  max-width: 84vw;
  transform: translate(-50%, -50%);
  transition: opacity .35s ease;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow: none;
  cursor: pointer;
}
.cf-card img { height: 100%; width: auto; max-width: 84vw; object-fit: contain; display: block; }
.cf-ui { display: flex; align-items: center; justify-content: center; margin-top: 22px; }
.cf-count { font-size: 13px; letter-spacing: 0.2em; color: var(--ink); font-weight: 700; }

/* ---------- carrusel arrastrable moderno (sin transparencias) ---------- */
.cz { position: relative; max-width: 1180px; margin: 0 auto; user-select: none; }
.cz-stage {
  overflow: hidden;
  cursor: grab;
  padding: 4px 0;
}
.cz-stage {
  overflow: hidden;
  cursor: grab;
  padding: 4px 0;
}
.cz-stage.grabbing { cursor: grabbing; }
.cz-track {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  will-change: transform;
  touch-action: pan-y;
}
.cz-slide {
  position: relative;
  flex: 0 0 min(64%, 680px);
  margin: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.cz-slide img {
  width: 100%;
  height: auto;
  max-height: min(62vh, 580px);
  object-fit: contain;
  display: block;
  pointer-events: none;
  clip-path: none !important;
}
.cz-cap {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.cz-ui {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.cz-arrow {
  width: 52px; height: 52px;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .14s, color .14s;
}
.cz-arrow:hover { background: var(--ink); color: var(--bg); }
.cz-count { font-size: 13px; letter-spacing: 0.18em; color: var(--ink); font-weight: 700; }
.cz-bar { flex: 1; height: 2px; background: var(--ghost); position: relative; }
.cz-bar i { position: absolute; top: 0; left: 0; height: 100%; background: var(--ink); transition: width .4s ease, left .4s ease; }

/* navegación entre proyectos */
.d-nav {
  position: fixed;
  bottom: clamp(16px, 2.4vw, 30px);
  top: auto;
  transform: none;
  z-index: 43;
  width: 46px;
  height: 46px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-nav:hover { color: var(--blue); }
.d-prev { left: calc(50% - 96px); right: auto; }
.d-next { left: calc(50% + 50px); right: auto; }
.d-counter {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 43;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mid);
}
.d-close {
  position: fixed;
  top: clamp(20px, 3vw, 40px);
  right: clamp(20px, 4vw, 56px);
  z-index: 43;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 4px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.d-close:hover { opacity: 0.5; }
/* botón inicio (logo delafolla) en el detalle */
.d-home {
  top: clamp(18px, 3vw, 34px);
  left: clamp(20px, 4vw, 40px);
  right: auto;
  border-bottom: none;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
.d-home .logo-img { height: 18px; display: block; }
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 1100px;
  margin: 64px auto 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
}
.d-foot-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 0;
}
.d-foot-btn:hover { opacity: 0.5; }

/* lightbox: imagen a tamaño completo */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 18, 16, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 4vh 4vw;
}
#lightbox.show { display: flex; }
#lightbox img { max-width: 94vw; max-height: 92vh; object-fit: contain; border: 1px solid rgba(255,255,255,0.2); }
#lightbox-close {
  position: fixed;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
}
#lightbox-close:hover { opacity: 0.6; }
#lightbox .lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  padding: 18px 22px;
  opacity: 0.7;
  transition: opacity .2s ease;
  z-index: 2;
}
#lightbox.has-nav .lb-nav { display: block; }
#lightbox .lb-nav:hover { opacity: 1; }
#lightbox-prev { left: 1vw; }
#lightbox-next { right: 1vw; }
.cs { margin-bottom: clamp(120px, 18vw, 260px); display: grid; grid-template-columns: minmax(240px, 30%) 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.cs:last-child { margin-bottom: 0; }
/* ---- variantes de layout por sección: variedad editorial (estilo GKDK) ----
   A · cs--split  : texto izquierda, imágenes derecha (= base .cs)
   B · cs--splitR : texto justificado a la DERECHA, imágenes a la izquierda
   C · cs--stack  : header arriba grande, imágenes abajo a lo grande y escalonadas
   D · cs--stackR : header arriba a la derecha, imágenes abajo centradas/izquierda */
.cs-title { overflow-wrap: break-word; }
.cs--splitR { grid-template-columns: 1fr minmax(240px, 30%); }
.cs--splitR > .cs-head { order: 2; align-items: flex-end; text-align: right; }
.cs--splitR > :not(.cs-head) { order: 1; }
.cs--splitR .cs-metarow { flex-direction: row-reverse; }
.cs--splitR .cs-cap { margin-left: auto; }
.cs--stack, .cs--stackR { grid-template-columns: 1fr; gap: clamp(30px, 4.5vw, 68px); }
.cs--stack > .cs-head, .cs--stackR > .cs-head { position: static; top: auto; }
.cs--stack .cs-title, .cs--stackR .cs-title { font-size: clamp(32px, 5vw, 74px); line-height: 1.1; }
.cs--stack .cs-cap, .cs--stackR .cs-cap { max-width: 58ch; }
.cs--stack .cs-figs.cs-rows .cs-fig:nth-child(3n+1) { max-width: 100%; align-self: stretch; }
.cs--stack .cs-figs.cs-rows .cs-fig:nth-child(3n+2) { max-width: 70%; align-self: flex-end; }
.cs--stack .cs-figs.cs-rows .cs-fig:nth-child(3n+3) { max-width: 82%; align-self: flex-start; }
.cs--stackR > .cs-head { align-items: flex-end; text-align: right; }
.cs--stackR .cs-metarow { flex-direction: row-reverse; }
.cs--stackR .cs-cap { margin-left: auto; }
.cs--stackR .cs-figs.cs-rows .cs-fig:nth-child(3n+1) { max-width: 94%; align-self: center; }
.cs--stackR .cs-figs.cs-rows .cs-fig:nth-child(3n+2) { max-width: 64%; align-self: flex-start; }
.cs--stackR .cs-figs.cs-rows .cs-fig:nth-child(3n+3) { max-width: 78%; align-self: center; }
@media (max-width: 820px) {
  .cs--splitR { grid-template-columns: 1fr; }
  .cs--splitR > .cs-head, .cs--stackR > .cs-head { align-items: start; text-align: left; }
  .cs--splitR .cs-metarow, .cs--stackR .cs-metarow { flex-direction: row; }
  .cs--splitR .cs-cap, .cs--stackR .cs-cap { margin-left: 0; }
}
/* entrada editorial: las secciones aparecen deslizando al hacer scroll */
.reveal { opacity: 0; transform: translateY(64px); transition: opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1); }
.reveal.in { opacity: 1; transform: none; }
.cs img { transition: transform 1.2s cubic-bezier(.19,1,.22,1), opacity 1.1s ease; }
/* oculta cada imagen hasta que su archivo está COMPLETO (sin pintado progresivo) */
#d-gallery img:not(.ld) { opacity: 0 !important; }
.reveal img { opacity: 0; }
.reveal.in img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal img { opacity: 1; }
  .wd-i { transform: none !important; opacity: 1 !important; }
}
/* ---------- scroll-telling dentro del proyecto ---------- */
.d-progress-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  z-index: 45;
}
#d-progress {
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.wd { display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; }
.wd-i { display: inline-block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }
/* la descripción del proyecto no se desliza: arranca apagada y se pinta con el scroll (el color lo pone el JS según el tema) */
#d-desc .wd-i { transform: none; opacity: 1; color: #b9b9b4; will-change: color; }
body.dark #d-desc .wd-i { color: #4a4a47; }
.px {
  transition: clip-path .9s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform;
  backface-visibility: hidden;
}
/* entrada cappen: cabecera del proyecto entra escalonada y suave al abrir */
@media (prefers-reduced-motion: no-preference) {
  #detail .d-eyebrow, #detail .d-bighead, #detail .d-meta, #detail .d-desc {
    opacity: 0;
    transform: translateY(40px);
  }
  #detail.open .d-eyebrow, #detail.open .d-bighead, #detail.open .d-meta, #detail.open .d-desc {
    opacity: 1;
    transform: none;
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  }
  #detail.open .d-eyebrow { transition-delay: .12s; }
  #detail.open .d-bighead { transition-delay: .22s; }
  #detail.open .d-meta { transition-delay: .36s; }
  #detail.open .d-desc { transition-delay: .48s; }
}
.cs-head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
  border-top: none;
  padding-top: 0;
  margin-bottom: 0;
  position: sticky;
  top: clamp(28px, 5vw, 76px);
  z-index: 20;
}
.cs-metarow { display: flex; align-items: baseline; gap: 14px; }
.cs-n { font-family: var(--font-mono); font-size: clamp(12px, 1.1vw, 15px); color: var(--blue); letter-spacing: 0.02em; }
.cs-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.cs-title {
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 66px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: none;
  text-wrap: balance;
  margin: 2px 0 0;
  padding-bottom: 0.14em;
  overflow: visible;
}
.cs-cap {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mid);
  margin: 6px 0 0;
  max-width: 38ch;
}
.cs-stack { display: flex; flex-direction: column; gap: 14px; }
.cs-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cs-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* layout editorial limpio (sustituye al carrusel) */
.cs-figs.cs-rows { display: flex; flex-direction: column; gap: clamp(56px, 9vw, 140px); }
/* disposición editorial asimétrica tipo GKDK: las imágenes de una fila no van
   centradas a todo el ancho, sino escalonadas a distintos tamaños y lados, con aire */
.cs-figs.cs-rows .cs-fig { max-width: 82%; }
.cs-figs.cs-rows .cs-fig:nth-child(3n+1) { align-self: flex-start; max-width: 88%; }
.cs-figs.cs-rows .cs-fig:nth-child(3n+2) { align-self: flex-end; max-width: 62%; }
.cs-figs.cs-rows .cs-fig:nth-child(3n+3) { align-self: center; max-width: 72%; }
.cs-figs.cs-rows .cs-fig:only-child { max-width: 100%; align-self: stretch; }
@media (max-width: 820px) { .cs-figs.cs-rows .cs-fig { max-width: 100% !important; align-self: stretch !important; } }
.cs-content { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 60px); min-width: 0; }
/* pista de "pin": la sección se queda fija mientras el foco recorre las 3 imágenes */
.cs-trip-pinwrap { position: relative; }
.cs-trip-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.cs-trip-pin .cs-trip { width: 100%; margin-top: 0; }
/* tríptico: tres piezas en fila con sus pies (sustituye al carrusel en The Odyssey) */
.cs-trip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 60px);
  overflow: visible;
}
.cs-trip .cs-fig { position: relative; will-change: transform; transform-origin: center bottom; }
.cs-trip .cs-fig img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; margin: 0; }
@media (max-width: 820px) { .cs-trip { grid-template-columns: 1fr; } }
.cs-figs.cs-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.cs-figs.cs-cols3 { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.cs-figs.cs-cols3 .cs-fig img { max-height: 78vh; }
.cs-figs .cs-fig img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; margin: 0; }
/* zoom al pasar el cursor por encima (sustituye al escalado por scroll) */
.cs-figs .cs-fig img { transition: transform .5s cubic-bezier(.19,1,.22,1), opacity 1.1s ease; transform-origin: center center; cursor: pointer; }
.cs-figs .cs-fig img:hover { transform: scale(1.05); }
.cs-figs.cs-cols .cs-fig img { max-height: 64vh; }
.cs-fig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-fig figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}
.cs-sb figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}
.cs-sb .sbn { font-family: var(--font-mono); font-size: 10px; color: var(--mid); }
.cs-sb strong { font-size: 14px; }
.cs-sb .sbc { font-size: 12px; color: var(--mid); line-height: 1.5; }

/* fila única de imágenes (p. ej. 4 pósters en fila) */
.cs-row { display: flex; gap: clamp(12px, 1.5vw, 26px); align-items: flex-start; }
.cs-row .cs-fig { flex: 1 1 0; min-width: 0; margin: 0; }
.cs-row .cs-fig img { width: 100%; height: auto; object-fit: contain; display: block; }
@media (max-width: 720px) { .cs-row { flex-wrap: wrap; } .cs-row .cs-fig { flex: 1 1 44%; } }

/* imágenes desperdigadas (masonry) con parallax */
.cs-scatter { columns: 2; column-gap: clamp(24px, 3.5vw, 64px); }
/* variante compacta: piezas más pequeñas (banners Masters IESE) */
.cs-scatter--sm { columns: 3; column-gap: clamp(18px, 2.4vw, 40px); }
@media (max-width: 720px) { .cs-scatter--sm { columns: 2; } }
.cs-scatter .cs-scat { break-inside: avoid; margin: 0 0 clamp(26px, 4vw, 68px); will-change: transform; }
.cs-scatter .cs-scat img { width: 100%; height: auto; display: block; }
/* anchos/offsets alternos para que se vean sueltas, no en rejilla */
.cs-scatter .cs-scat.sc-0 { margin-top: 0; }
.cs-scatter .cs-scat.sc-1 { margin-top: clamp(40px, 7vw, 120px); }
.cs-scatter .cs-scat.sc-2 { margin-top: clamp(16px, 3vw, 56px); }
.cs-scatter .cs-scat.sc-3 { margin-top: clamp(60px, 9vw, 150px); }
.cs-scatter .cs-scat.sc-4 { margin-top: clamp(24px, 4vw, 80px); }
@media (max-width: 900px) { .cs-scatter { columns: 2; } }
@media (max-width: 560px) { .cs-scatter { columns: 1; } .cs-scatter .cs-scat { margin-top: 0 !important; } }

/* storyboard: rejilla ordenada de frames numerados */
.cs-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px) clamp(14px, 1.6vw, 28px); }
.cs-board .cs-frame { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-board .cs-frame img { width: 100%; height: clamp(160px, 22vh, 260px); object-fit: cover; display: block; background: color-mix(in oklab, var(--ink) 5%, transparent); }
.cs-board .cs-frame figcaption { display: flex; align-items: baseline; gap: 10px; }
.cs-board .fr-n { font-size: 11px; color: var(--blue); flex: 0 0 auto; }
.cs-board .fr-t { font-size: clamp(12px, 1vw, 14px); color: var(--ink); line-height: 1.35; text-wrap: pretty; }
@media (max-width: 900px) { .cs-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-board { grid-template-columns: 1fr; } }

/* ---------------- anillo de proyectos al final del case study ----------------
   miniaturas dispuestas en un anillo 3D que sólo gira en el eje Y (como en la home);
   arrastra horizontal para girarlo, clic en una tarjeta para abrir ese proyecto */
.d-ring-sec { margin-top: clamp(24px, 3vw, 48px); padding-top: clamp(28px, 4vw, 52px); border-top: 1px solid var(--hair, rgba(0,0,0,.12)); }
.d-ring-lead { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(24px, 4vw, 48px); }
.d-ring-lead .cs-label { font-size: clamp(12px, 1.1vw, 14px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.d-ring-lead .d-ring-cur { font-family: var(--font-mono); font-size: clamp(13px, 1.15vw, 15px); color: var(--blue); }
.d-ring-stage {
  position: relative;
  height: clamp(260px, 34vw, 420px);
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.d-ring-stage.dragging { cursor: grabbing; }
/* móvil: anillo más pequeño y el gesto vertical sigue haciendo scroll de página */
@media (max-width: 820px) {
  .d-ring-stage { height: clamp(170px, 44vw, 240px); touch-action: pan-y; }
}
.d-ring-track {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.d-ring-card {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  cursor: pointer;
  transition: opacity .3s ease;
}
.d-ring-card .rc-inner {
  position: relative;
  border: 1px solid var(--ink);
  background: #141414;
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.d-ring-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-ring-card .rc-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: #fff; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  opacity: 0; transition: opacity .3s ease;
}
.d-ring-card:hover .rc-meta { opacity: 1; }
.d-ring-card:hover .rc-inner { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.d-ring-card.is-current .rc-inner { border-color: var(--blue); }
.d-ring-card.is-current .rc-meta { opacity: 1; }
.d-ring-hint { margin-top: clamp(20px, 3vw, 36px); text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }

/* CTA final: HABLEMOS */
.d-outro-cta {
  margin-top: clamp(72px, 11vw, 160px);
  padding-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--hair, rgba(0,0,0,.12));
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 28px);
  cursor: pointer;
}
.d-outro-cta .oc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); }
.d-outro-cta .oc-big {
  font-weight: 800;
  font-size: clamp(56px, 15vw, 220px);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
  transition: transform .55s cubic-bezier(.19,1,.22,1);
}
.d-outro-cta:hover .oc-big { transform: translateX(clamp(8px, 1.6vw, 26px)); }
.d-outro-cta .oc-sub { font-family: var(--font-mono); font-size: clamp(11px, 1vw, 13px); color: var(--blue); }

/* sección de resultados/prensa — filas editoriales, acentos AZULES, hover que vacía la cifra */
.cs-metrics { color: var(--ink); }
.cs-metrics .cm-stats { display: flex; flex-direction: column; }
.cs-metrics .cm-stat { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(20px, 3vw, 48px); padding: clamp(24px, 3.6vw, 48px) 0; border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.cs-metrics .cm-v { font-weight: 400; font-size: clamp(54px, 8.5vw, 148px); line-height: 0.85; letter-spacing: -0.04em; -webkit-text-stroke: 1.5px var(--ink); transition: transform .55s cubic-bezier(.19,1,.22,1), color .35s ease; }
.cs-metrics .cm-stat:hover .cm-v { color: transparent; transform: translateX(clamp(8px, 1.4vw, 24px)); }
.cs-metrics .cm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; max-width: 38ch; }
.cs-metrics .cm-l { font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.cs-metrics .cm-note { font-size: clamp(11px, 0.95vw, 13px); line-height: 1.65; color: var(--mid); }
.cs-metrics .cm-press { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(22px, 3.5vw, 52px); padding: clamp(24px, 3.6vw, 48px) 0 0; border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.cs-metrics .cm-press-l { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); margin-right: auto; }
.cs-metrics .cm-src { color: var(--ink); text-decoration: none; font-size: clamp(12px, 1.1vw, 15px); letter-spacing: 0.09em; opacity: 0.72; transition: color .25s ease, opacity .25s ease; }
.cs-metrics .cm-src:hover { color: var(--blue); opacity: 1; }
@media (max-width: 820px) { .cs-metrics .cm-stat { flex-direction: column; align-items: flex-start; } .cs-metrics .cm-side { align-items: flex-start; text-align: left; } }

/* filmstrip → galería de paneles expansivos: la imagen bajo el cursor se abre, el resto se comprime */
.cs-film { position: relative; padding: clamp(8px, 1.6vw, 20px) 0; min-width: 0; max-width: 100%; }
.film-top { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.6vw, 22px); margin: 0 0 clamp(28px, 4vw, 60px) 0; }
.film-idx { font-size: clamp(12px, 1.1vw, 14px); color: var(--blue); }
.film-cap { font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); max-width: 34ch; line-height: 1.7; transition: opacity .4s ease; }
.film-viewport { overflow: hidden; width: 100%; max-width: 100%; min-width: 0; height: clamp(320px, 52vh, 560px); user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* tira que fluye en bucle infinito de izquierda a derecha */
.film-track { display: flex; align-items: center; gap: clamp(10px, 1vw, 18px); height: 100%; width: max-content; animation: filmMarquee 40s linear infinite; will-change: transform; }
@keyframes filmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cs-film.paused .film-track { animation-play-state: paused; }
.film-cell { position: relative; flex: 0 0 auto; width: clamp(200px, 22vw, 320px); height: 100%; overflow: hidden; margin: 0; cursor: pointer; transition: width .7s cubic-bezier(.22,1,.36,1); }
.film-cell.active { width: clamp(420px, 48vw, 760px); cursor: default; }
/* la imagen aparece por OPACIDAD al cargar (sin máscara) */
.cs-film .film-cell img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); transform: scale(1.04); }
.cs-film .film-cell img.ready { opacity: 1; }
.film-cell.active img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .film-track { animation: none; } }

/* sin scroll horizontal dentro de los proyectos */
#d-scroll { overflow-x: hidden; }

/* filmstrip: sin fila de flechas/contador (paneles expansivos por hover) */
.film-ui { display: none; }

/* UI del detalle: flechas y contador se funden con la inactividad */
#detail .d-nav, #detail .d-counter { transition: opacity .5s ease; }
#detail.ui-idle .d-nav, #detail.ui-idle .d-counter { opacity: 0; pointer-events: none; }

/* poster de las previews: se funde al arrancar el bucle */
.d-embed .embed-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 1; transition: opacity .9s ease; pointer-events: none; }
.d-embed .embed-poster.off { opacity: 0; }
.d-embed .embed-play { z-index: 2; }

/* thumbs con vídeo en bucle (tarjetas de proyectos y anillo) */
.chip-vid { position: relative; overflow: hidden; }
.chip-vid iframe { position: absolute; inset: -1%; width: 102%; height: 102%; border: 0; pointer-events: none; }
.d-ring-card .rc-vid { position: absolute; inset: 0; display: block; overflow: hidden; }
.d-ring-card .rc-vid iframe { position: absolute; inset: -1%; width: 102%; height: 102%; border: 0; pointer-events: none; }
/* vídeos VERTICALES usados como thumb: el iframe se sobredimensiona a proporción 9:16
   para llenar el ancho sin bandas negras (se recorta arriba/abajo) */
.chip-vid--v iframe, .d-ring-card .rc-vid--v iframe {
  inset: auto; left: 50%; top: 50%;
  width: 104%; height: auto;
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
}

/* previews de vídeo: edit muteado en bucle + botón para ver con sonido */
.d-embed { position: relative; }
.d-embed .embed-play {
  position: absolute; left: 50%; bottom: clamp(14px, 2vw, 26px); transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.14em;
  padding: 10px 18px; cursor: pointer;
  color: #fff; background: rgba(10,10,10,.55); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease;
}
.d-embed .embed-play:hover { background: var(--blue); border-color: var(--blue); }

/* ficha técnica (créditos) */
.cs-credits { display: flex; flex-direction: column; }
.cs-credits .cred { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 13px 0; border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }
.cs-credits .cred-l { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }
.cs-credits .cred-v { font-size: clamp(13px, 1.1vw, 15px); text-align: right; }

/* logos rigid bodies en "Hablemos" (sustituyen a la órbita) */
#logo-phys { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
#logo-phys .phys-logo { position: absolute; left: 0; top: 0; will-change: transform; }
#logo-phys .logo3d { background-color: var(--blue); }
#ov-about .ov-about-box { z-index: 2; }

/* el panel de Tweaks queda por encima del velo de brillo (#dim-layer, z 99990) */
#tweaks-root { position: relative; z-index: 99995; }

@media (max-width: 820px) {
  .cs-grid3 { grid-template-columns: 1fr 1fr; }
  .cs-figs.cs-cols { grid-template-columns: 1fr; }
  .cs { grid-template-columns: 1fr; gap: 24px; }
  .cs-head { position: relative; z-index: 20; background: transparent; }
  .d-mrow { grid-template-columns: 40px 1fr; }
  /* sin pin en móvil: nada de huecos de 100vh alrededor de las imágenes */
  .cs-trip-pinwrap { height: auto !important; }
  .cs-trip-pin { position: static; min-height: 0; display: block; }
  .cs-trip .cs-fig { transform: none !important; }
  /* dentro del proyecto: aire arriba para que el eyebrow no quede cortado bajo el menú */
  .d-scroll { padding-top: 92px; }
  /* HUD compacto */
  .hud { padding: 14px 5vw; gap: 10px; }
  .hud-links { gap: 14px; }
  .hud-links button { font-size: 10px; letter-spacing: 0.06em; }
  .hud-links button::before, .hud-links button::after { display: none; }
  /* idiomas + iconos más pequeños: que ES/EN no se salga de pantalla */
  .lang { gap: 3px; }
  .lang-btn { font-size: 9px; letter-spacing: 0.04em; padding: 2px 1px; }
  .lang-sep { font-size: 9px; }
  .dark-btn, .sound-btn { margin-right: 6px; }
  #dark-btn, #d-dark { padding: 4px 5px; }
  /* Playlist: solo el emoji 🪩, centrado sobre ÓRBITA/ESFERA/COLUMNAS */
  .playlist-btn {
    bottom: 108px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    font-size: 34px;
  }
  .playlist-btn::before, .playlist-btn::after { display: none; }   /* sin bocadillo en móvil */
  /* en modo COLUMNAS la lista scrollea: la bola disco tapaba los proyectos → se oculta */
  body:has(#ov-projects.show) .playlist-btn { display: none; }
  /* en Contacto (Hablemos) también fuera la bola disco */
  body:has(#ov-about.show) .playlist-btn { display: none; }
  /* márgenes verticales más contenidos entre secciones del case study */
  .cs { margin-bottom: clamp(70px, 14vw, 120px); }
  .cs-figs .cs-fig img, .cs-figs.cs-cols .cs-fig img, .cs-figs.cs-cols3 .cs-fig img { max-height: none; }
  .cs-trip .cs-fig img { max-height: none; }
  .d-mrow .d-mv { grid-column: 1 / -1; }
  .d-desc { max-width: none; margin-left: 0; }
}
.d-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ink);
  background: #141414;
  overflow: hidden;
}
.d-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.d-embed.d-mp4 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #141414; }
/* la preview en bucle recorta las bandas negras SOLO en vídeos marcados (letterbox horizontal); al ver con sonido, vuelve a completo */
.d-embed--crop iframe[data-pv-bg="1"] { width: 132%; height: 132%; left: -16%; top: -16%; inset: auto; }
#lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 3;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 4px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#lightbox-close:hover { opacity: 0.5; }

@media (max-width: 820px) {
  .ov-col { width: 40vw; gap: 4vh; }
  .ov-item { min-width: 0; }
  .ov-item .orb-t { font-size: 14px; }
  .ov-item .orb-t.xxl { font-size: 11vw; }
  /* "Hablemos" en móvil: caja a lo ancho, texto más pequeño y todo legible con scroll */
  .ov-about-box {
    left: 5vw;
    right: 5vw;
    width: auto;
    max-height: 74vh;
    top: 54%;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .ov-about-box .ab-title { font-size: clamp(30px, 9vw, 40px); padding: 16px 0 12px; }
  .ov-about-box .ab-bio { font-size: 13px; line-height: 1.55; padding: 14px 0 16px; }
  .ov-about-box .ab-contact { padding: 14px 0 8px; gap: 10px; }
  .ov-about-box .ab-contact a, .ov-about-box .ab-contact .ov-link { font-size: 13px; }
  .ab-socials { gap: 10px; }
  .ab-socials a { font-size: 11px; }
}