/* ==========================================================
   Kiara Enríquez Rodríguez — Portfolio fotográfico
   Dos temas en la misma hoja:
     · Claro  → blanco luminoso y cristal esmerilado (por defecto)
     · Oscuro → negro espacial, blanco "cristal" con resplandor
                y cristal ahumado  ([data-theme="dark"])
   El tema lo decide js/theme.js (preferencia del sistema o el
   botón del menú). Todo lo que cambia entre temas son
   variables de :root — los componentes no saben de temas.
   ========================================================== */

/* ----------------------------------------------------------
   TIPOGRAFÍA
   Inkwell usa FK Grotesk + FK Grotesk Mono (Florian Karsten,
   licencia comercial). Usamos Geist + Geist Mono (libres, de
   Google Fonts), que tienen el mismo carácter. Si compras la
   licencia de FK Grotesk, descomenta esto y pon los archivos
   en ./fonts/ — la pila de fuentes ya las usa primero.

@font-face { font-family: 'FK Grotesk'; src: url('../fonts/FKGrotesk-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'FK Grotesk'; src: url('../fonts/FKGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'FK Grotesk Mono'; src: url('../fonts/FKGroteskMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
   ---------------------------------------------------------- */

:root {
  /* Color */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --fg: #1e272d;
  --muted: #5f6b74;
  --dim: #9aa4ac;
  --line: rgba(30, 39, 45, 0.09);
  --line-strong: rgba(30, 39, 45, 0.2);
  /* Acento neutro: gris grafito (nada de azules ni colores vivos) */
  --accent: #6b7680;
  --vapor-color: #b4bcc3; /* color del vapor del título de Contacto */

  /* Cristal */
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(22px) saturate(160%);
  --shadow-soft: 0 1px 2px rgba(30, 39, 45, 0.04), 0 16px 40px -18px rgba(30, 39, 45, 0.18);
  --shadow-card: 0 2px 4px rgba(30, 39, 45, 0.06), 0 14px 28px -12px rgba(30, 39, 45, 0.32);

  /* Detalles que cambian con el tema */
  --glow-text: none;
  --glow-title: none;
  --ambient:
    radial-gradient(48vmax 48vmax at 12% 8%, rgba(203, 219, 255, 0.55), transparent 62%),
    radial-gradient(42vmax 42vmax at 92% 88%, rgba(255, 228, 216, 0.45), transparent 60%),
    radial-gradient(36vmax 36vmax at 78% 18%, rgba(214, 238, 242, 0.5), transparent 60%);
  --stars: 0;
  --mark-glow: none;
  --mark-dot-glow: none;
  --indicator-bg: var(--surface);
  --indicator-shadow: 0 1px 2px rgba(30, 39, 45, 0.08), 0 4px 12px -4px rgba(30, 39, 45, 0.12);
  --dimmed-opacity: 0.4;
  --dimmed-filter: grayscale(0.7);
  --ph-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35)), rgba(236, 240, 244, 0.6);
  --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(30, 39, 45, 0.04), 0 10px 24px -14px rgba(30, 39, 45, 0.22);
  --ph-inset: none;
  --disc-bg: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.3) 70%);
  --disc-shadow: var(--shadow-soft), inset 0 -10px 30px -20px rgba(30, 39, 45, 0.25);
  --lens-fill: rgba(30, 39, 45, 0.05);
  --vapor-filter: none;
  --danger: #d6453d;
  --btn-glow: none;
  --btn-hover-glow: none;
  --credits: #c3cad0;
  --backdrop: rgba(246, 248, 250, 0.78);
  --frame-shadow: 0 4px 10px rgba(30, 39, 45, 0.08), 0 40px 80px -30px rgba(30, 39, 45, 0.45);
  --dc-shadow: 0 2px 6px rgba(5, 6, 10, 0.12), 0 30px 60px -24px rgba(5, 6, 10, 0.5);
  --dot-glow: none;
  --hover-bg: var(--surface);

  /* Retroiluminación del dial (solo hover, solo en el dial).
     Capas de box-shadow concéntricas, sin desplazamiento: un aura
     uniforme, sin rayos. En claro, un blanco solo no se vería sobre
     el fondo blanco: borde blanco puro + aura gris cristal que da
     el contraste sin introducir ningún color. */
  --halo:
    0 0 3px 1px rgba(255, 255, 255, 1),
    0 0 14px 3px rgba(60, 70, 80, 0.26),
    0 0 34px 8px rgba(60, 70, 80, 0.16),
    0 0 70px 18px rgba(60, 70, 80, 0.09),
    0 0 120px 32px rgba(60, 70, 80, 0.05);

  /* Tipos */
  --font-sans: 'FK Grotesk', 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'FK Grotesk Mono', 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter: clamp(16px, 3.2vw, 44px);
  --nav-h: 72px;
  --radius: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Geometría del dial: js/dial.js → measure() los recalcula */
  --R: 300px;
  --card-w: 76px;
  --card-h: 105px;
  --ring: 800px;
  --slot: 360px;

  color-scheme: light;
}

/* ----------------------------------------------------------
   TEMA OSCURO · negro espacial
   ---------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #0b0d12;
  --fg: #f5f8ff;
  --muted: rgba(232, 240, 255, 0.62);
  --dim: rgba(232, 240, 255, 0.34);
  --line: rgba(220, 232, 255, 0.1);
  --line-strong: rgba(220, 232, 255, 0.24);
  --accent: #b9d0ff;
  --vapor-color: #9fb3ff;

  --glass: rgba(20, 23, 30, 0.42);
  --glass-strong: rgba(24, 27, 36, 0.7);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: blur(20px) saturate(140%);
  --shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -22px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.7), 0 18px 36px -14px rgba(0, 0, 0, 0.95);

  --glow-text: 0 0 10px rgba(200, 220, 255, 0.22), 0 0 1px rgba(255, 255, 255, 0.5);
  --glow-title: 0 0 28px rgba(190, 212, 255, 0.28), 0 0 2px rgba(255, 255, 255, 0.55);
  --ambient:
    radial-gradient(50vmax 50vmax at 10% 6%, rgba(70, 92, 160, 0.16), transparent 62%),
    radial-gradient(44vmax 44vmax at 94% 92%, rgba(120, 90, 70, 0.1), transparent 60%);
  --stars: 0.55;
  --mark-glow: 0 0 10px rgba(200, 220, 255, 0.3);
  --mark-dot-glow: 0 0 8px rgba(220, 235, 255, 0.8);
  --indicator-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  --indicator-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(190, 212, 255, 0.12);
  --dimmed-opacity: 0.3;
  --dimmed-filter: grayscale(0.8) brightness(0.6);
  --ph-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)), rgba(14, 16, 22, 0.6);
  --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px -14px rgba(0, 0, 0, 0.9);
  --ph-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --disc-bg: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 70%);
  --disc-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -20px 40px -24px rgba(170, 195, 255, 0.18), 0 0 60px -10px rgba(170, 195, 255, 0.12);
  --lens-fill: rgba(185, 208, 255, 0.08);
  --vapor-filter: drop-shadow(0 0 16px rgba(190, 212, 255, 0.28));
  --danger: #ff8a7a;
  --btn-glow: 0 0 14px rgba(190, 212, 255, 0.12), inset 0 0 10px rgba(190, 212, 255, 0.06);
  --btn-hover-glow: 0 0 28px rgba(200, 220, 255, 0.45);
  --credits: #2b2f36;
  --backdrop: rgba(0, 0, 0, 0.84);
  --frame-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 40px 80px -30px rgba(0, 0, 0, 0.95);
  --dc-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -24px rgba(0, 0, 0, 0.95);
  --dot-glow: 0 0 8px rgba(210, 225, 255, 0.7);
  --hover-bg: rgba(255, 255, 255, 0.1);

  /* Aura blanca intensa (la de la versión negra) */
  --halo:
    0 0 4px 1px rgba(240, 244, 252, 0.95),
    0 0 14px 4px rgba(240, 244, 252, 0.75),
    0 0 32px 10px rgba(240, 244, 252, 0.5),
    0 0 64px 20px rgba(240, 244, 252, 0.3),
    0 0 120px 36px rgba(240, 244, 252, 0.14);
}

/* Transición suave de colores al cambiar de tema con el botón
   (js/theme.js añade la clase durante ~0,6 s) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition-property: background, background-color, color, border-color, box-shadow, fill, stroke, text-shadow !important;
  transition-duration: 0.6s !important;
  transition-timing-function: ease !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  background: var(--bg);
  text-shadow: var(--glow-text);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--fg); color: var(--bg); text-shadow: none; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Superficie de cristal reutilizable */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

/* Luz ambiental detrás de todo: da algo que "refractar" al cristal.
   En oscuro, nebulosas casi invisibles + polvo de estrellas. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ambient), var(--bg);
}
.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--stars);
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1px 1px at 140px 90px, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 260px 200px, rgba(200, 220, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 330px 40px, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 90px 260px, rgba(255, 255, 255, 0.35), transparent 100%);
  background-size: 360px 300px;
  transition: opacity 0.6s ease;
}

/* ==========================================================
   NAV
   ========================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.is-loading .nav { opacity: 0; transform: translateY(-12px); }

.nav__brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.nav__mark {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  box-shadow: var(--mark-glow);
}
.nav__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: var(--mark-dot-glow);
}

.nav__menu {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
}
.nav__link {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.4s;
}
.nav__link:hover, .nav__link.is-active { color: var(--fg); }
.nav__num { color: var(--dim); }
.nav__link.is-active .nav__num { color: var(--accent); }
/* Píldora que se desliza bajo el enlace activo (js/nav.js) */
.nav__indicator {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 0;
  border-radius: 999px;
  background: var(--indicator-bg);
  box-shadow: var(--indicator-shadow);
  pointer-events: none;
}

/* Botones de la derecha: tema + sonido */
.nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botón de tema: círculo de cristal con sol/luna */
.nav__theme {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.4s;
}
.nav__theme:hover { color: var(--fg); }
.nav__theme svg {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
/* Se muestra el icono del tema AL QUE se cambia */
.nav__theme .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme="dark"] .nav__theme .icon-sun { opacity: 1; transform: none; }
[data-theme="dark"] .nav__theme .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* Botón de sonido: altavoz SVG dinámico (+ texto en escritorio).
   44 px de alto (tamaño mínimo cómodo para el dedo).
   · aria-pressed="true"  → altavoz con ondas (las ondas "laten")
   · aria-pressed="false" → altavoz tachado con una X */
.nav__sound {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.4s;
}
.nav__sound:hover, .nav__sound[aria-pressed="true"] { color: var(--fg); }
.nav__sound-icon {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav__sound-icon .wave,
.nav__sound-icon .mute { transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); transform-box: fill-box; transform-origin: left center; }
/* Silenciado: sin ondas, con X */
.nav__sound .wave { opacity: 0; transform: scale(0.6); }
.nav__sound .mute { opacity: 1; }
/* Activado: ondas visibles y latiendo, sin X */
.nav__sound[aria-pressed="true"] .wave { opacity: 1; transform: none; }
.nav__sound[aria-pressed="true"] .mute { opacity: 0; transform: scale(0.4); }
.nav__sound[aria-pressed="true"] .wave--2 { animation: wave-pulse 1.6s ease-in-out infinite; }
@keyframes wave-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 640px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__name, .nav__num, .nav__sound-label { display: none; }
  .nav__menu { justify-self: center; }
  .nav__link { padding: 8px 10px; }
  .nav__actions { gap: 6px; }
  /* En móvil, solo el icono: círculo de 44 × 44 */
  .nav__sound { width: 44px; padding: 0; justify-content: center; }
}

/* ==========================================================
   01 · HERO + DIAL
   ========================================================== */
.section-hero { position: relative; }
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.dial-stage { position: absolute; inset: 0; }

.dial {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.dial.is-dragging { cursor: grabbing; }

/* Anillo de marcas, casi imperceptible */
.dial__ring-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ring);
  height: var(--ring);
  margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);
  pointer-events: none;
}
.is-loading .dial__ring-wrap { opacity: 0; }
.dial__ring { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.dial__ring .tick { stroke: var(--fg); stroke-opacity: 0.1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial__ring .tick--major { stroke-opacity: 0.28; }
.dial__ring .orbit { fill: none; stroke: var(--fg); stroke-opacity: 0.06; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial__ring .orbit--dash { stroke-dasharray: 2 6; stroke-opacity: 0.14; }
.dial__ring text {
  fill: var(--dim);
  font-family: var(--font-mono);
  font-size: 2.1px;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Cada hueco del dial */
.dial__items { position: absolute; inset: 0; }
.dial__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  opacity: 0;
  will-change: transform, opacity;
}
.dial__item:not(.dial__item--empty) { cursor: pointer; }
.dial__item--empty { cursor: inherit; }

.dial__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: opacity 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
.dial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(1.08);
  transition: transform 0.9s var(--ease-out);
}
.dial__item.is-hover .dial__media img { transform: scale(1); }
.dial.has-hover .dial__item:not(.is-hover) .dial__media { opacity: var(--dimmed-opacity); filter: var(--dimmed-filter); }
.dial__item.is-source .dial__media { visibility: hidden; }
.dial__item.is-hover { z-index: 5; }

/* ----------------------------------------------------------
   RETROILUMINACIÓN (solo hover en el dial)
   Aura uniforme detrás de la foto (--halo, distinta en cada
   tema). Va en una capa propia, por detrás de .dial__media, y
   GSAP la enciende/apaga (js/dial.js → stageLight). No se
   aplica en el carrusel ni en la foto que vuela hacia él.
   ---------------------------------------------------------- */
.dial__glow {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--halo);
  will-change: opacity;
}

/* Número del hueco, hacia fuera del dial */
.dial__tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
  transition: color 0.4s;
}
.dial__item.is-hover .dial__tag { color: var(--fg); }

/* Placeholder (hueco vacío): lámina de cristal esmerilado */
.dial__item--empty .dial__media {
  background: var(--ph-bg);
  box-shadow: var(--ph-shadow);
}
.dial__item--empty .dial__media::before,
.dial__item--empty .dial__media::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--line-strong);
  transform: translate(-50%, -50%);
}
.dial__item--empty .dial__media::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Hueco central para la cámara: disco de cristal */
.camera-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--slot);
  height: var(--slot);
  margin: calc(var(--slot) / -2) 0 0 calc(var(--slot) / -2);
  display: grid;
  place-items: center;
  perspective: 700px;
  pointer-events: none;
  transition: opacity 1.4s var(--ease-out);
}
.is-loading .camera-slot { opacity: 0; }
.camera-slot::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: var(--disc-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--disc-shadow);
}

/* Canvas de Three.js con la cámara 3D (js/camera-3d.js) */
.camera-3d {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

.reticle { position: relative; width: 36%; aspect-ratio: 1; will-change: transform; }
.reticle svg { width: 100%; height: 100%; overflow: visible; }
.reticle__ring { fill: none; stroke: var(--fg); stroke-opacity: 0.16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.reticle__ring--dash { stroke-dasharray: 3 5; stroke-opacity: 0.25; }
.reticle__bracket, .reticle__cross { fill: none; stroke: var(--fg); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.reticle__lens { fill: var(--lens-fill); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.reticle__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
}

/* Contador de carga */
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}

/* HUD */
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud__inner { position: absolute; inset: 0; transition: opacity 1.2s var(--ease-out) 0.15s; }
.is-loading .hud__inner { opacity: 0; }

.hud__side {
  position: absolute;
  top: 50%;
  color: var(--dim);
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.hud__side--left { left: var(--gutter); transform: translateY(-50%) rotate(180deg); }

.hud__bl, .hud__br { position: absolute; bottom: clamp(20px, 4vh, 40px); }
.hud__bl { left: var(--gutter); max-width: 36ch; }
.hud__eyebrow { color: var(--dim); margin-bottom: 8px; }
.hud__caption { min-height: 1.5em; font-size: 15px; font-weight: 300; }
.hud__caption .mono { margin-right: 10px; color: var(--accent); }
.hud__caption .is-muted { color: var(--muted); }

.hud__br { right: var(--gutter); }

/* Selector de idioma ES / EN: píldora de cristal con dos opciones.
   La activa en el color del texto; la otra, apagada. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  pointer-events: auto; /* el HUD no recibe clics; el botón sí */
}
.lang-switch__btn {
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--dim);
  transition: color 0.4s, background 0.4s, box-shadow 0.4s;
}
.lang-switch__btn:hover { color: var(--fg); }
.lang-switch__btn[aria-pressed="true"] {
  color: var(--fg);
  background: var(--indicator-bg);
  box-shadow: var(--indicator-shadow);
}
.lang-switch__sep { color: var(--dim); opacity: 0.6; }

@media (max-width: 760px) {
  .hud__side, .hud__eyebrow { display: none; }
}

/* ==========================================================
   SECCIONES GENERALES
   ========================================================== */
.section {
  position: relative;
  padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(80px, 12vh, 140px);
}
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 16px;
  margin-bottom: clamp(48px, 9vh, 110px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.section__num { color: var(--accent); margin-right: 8px; }

/* ==========================================================
   02 · SOBRE MÍ
   ========================================================== */
.about { min-height: 100vh; }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: end;
}

.about__photo { position: relative; }
.about__photo-frame {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.about__photo img,
.about__photo-ph {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__photo-ph {
  display: none;
  place-items: center;
  color: var(--dim);
  background: var(--ph-bg);
  box-shadow: var(--ph-inset);
}
.about__photo.is-empty img { display: none; }
.about__photo.is-empty .about__photo-ph { display: grid; }

.about__name {
  font-size: clamp(44px, 7.4vw, 124px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-shadow: var(--glow-title);
}
.about__name .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.about__name .line > span { display: block; }

.about__bio {
  max-width: 30ch;
  margin-top: clamp(28px, 5vh, 56px);
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.025em;
}
.about__bio .word { opacity: 0.16; }

.about__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 7vh, 72px);
  border-radius: var(--radius);
  overflow: hidden;
}
.about__meta div { padding: 18px 20px; }
.about__meta div + div { border-left: 1px solid var(--line); }
.about__meta dt { color: var(--dim); margin-bottom: 6px; }
.about__meta dd { font-size: 14px; }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 420px; }
  .about__meta { grid-template-columns: 1fr; }
  .about__meta div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ==========================================================
   03 · CONTACTO
   ========================================================== */
.contact__title {
  margin-bottom: clamp(48px, 9vh, 110px);
  font-size: clamp(64px, 14vw, 240px);
  font-weight: 200;
  line-height: 0.88;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.contact__dot { color: var(--accent); }

/* Vapor Type: el canvas se sale de la caja del título para que
   el vapor pueda subir y dispersarse sin cortarse */
.vapor { position: relative; }
.vapor__text { display: inline-block; }
.vapor.is-live .vapor__text { visibility: hidden; }
.vapor__canvas {
  position: absolute;
  pointer-events: none;
  filter: var(--vapor-filter); /* el canvas no hereda text-shadow */
}
.contact__title { text-shadow: var(--glow-title); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.panel { padding: clamp(24px, 3vw, 40px); border-radius: calc(var(--radius) + 6px); }
.contact__eyebrow { color: var(--dim); margin-bottom: 14px; }

.form { display: grid; gap: 32px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.field { position: relative; }
.field label { display: block; margin-bottom: 10px; color: var(--muted); }
.field input,
.field textarea {
  width: 100%;
  padding: 4px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 300;
  outline: none;
  resize: vertical;
}
.field textarea { min-height: 110px; }
.field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.field:focus-within::after { transform: scaleX(1); }
.field.is-invalid label { color: var(--danger); }
.field input:-webkit-autofill,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  transition: background-color 9999s;
}

.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.form__status { color: var(--muted); }

/* Botón píldora de línea fina, como en Inkwell */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-size: 15px;
  box-shadow: var(--btn-glow);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.btn:hover { background: var(--fg); color: var(--bg); text-shadow: none; box-shadow: var(--btn-hover-glow); }
.btn__arrow { transition: transform 0.4s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.socials { list-style: none; }
.socials li + li { border-top: 1px solid var(--line); }
.socials a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  transition: padding 0.5s var(--ease-out), color 0.4s;
}
.socials a:hover { padding-left: 10px; color: var(--accent); }
.socials .mono { color: var(--dim); }

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(80px, 14vh, 160px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--dim);
}
.footer a:hover { color: var(--fg); }
/* "Volver arriba": zona de toque de 44 px sin mover el texto de sitio */
.footer__top {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -14px -12px;
  padding: 0 12px;
}

/* Créditos del modelo 3D: casi fundidos con el fondo */
.credits {
  margin-top: 14px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--credits);
  text-shadow: none;
}
.credits a { color: inherit; transition: color 0.3s; }
.credits a:hover { color: var(--muted); }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   MÓVIL (< 768 px, mismo límite que js/main.js): flujo compacto
   · Hero: en vertical el dial solo necesita ~1,1 × el ancho de la
     pantalla (+ menú arriba y rótulo/idioma abajo). Con 100svh
     quedaba una franja negra de ~200 px bajo el dial. min() deja
     las pantallas apaisadas/bajas como estaban.
   · Secciones: el relleno de 18vh y el min-height: 100vh de
     "Sobre mí" creaban huecos vacíos. El relleno superior deja
     sitio justo al menú fijo (para que, al llegar desde el menú,
     el título de la sección no quede tapado).
   El escritorio no cambia.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .hero { height: min(100vh, calc(var(--nav-h) + 112vw + 96px)); height: min(100svh, calc(var(--nav-h) + 112vw + 96px)); }
  .section { padding: calc(var(--nav-h) + 16px) var(--gutter) 48px; }
  .section__head { margin-bottom: 32px; }
  .about { min-height: 0; }
  .about__meta { margin-top: 32px; }
  .contact__title { margin-bottom: 36px; }
  .footer { margin-top: 64px; }
}

/* ==========================================================
   LIGHTBOX — fondo de cristal esmerilado
   ========================================================== */
.lightbox { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
.lightbox.is-open { visibility: visible; pointer-events: auto; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  opacity: 0;
}
/* Tarjeta voladora (transición dial ⇄ carrusel) */
.lightbox__frame {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--frame-shadow); /* sin retroiluminación: la foto llega "normal" al carrusel */
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.lightbox__img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* ---------- Depth Carousel ----------
   Las tarjetas se colocan con transform desde js/lightbox.js.
   --dc-w / --dc-h: tamaño base de tarjeta; --dc-radius y la
   perspectiva salen de CAROUSEL en ese mismo archivo. */
.dc {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--nav-h);
  bottom: 128px;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.dc.is-dragging { cursor: grabbing; }
.dc__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dc-w, 420px);
  height: var(--dc-h, 280px);
  overflow: hidden;
  border-radius: var(--dc-radius, 8px);
  background: #0d0f14;
  box-shadow: var(--dc-shadow); /* sombra normal, sin halo */
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}
.dc__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.dc__card.is-focus { cursor: default; }
.dc__card:not(.is-focus) { cursor: pointer; }
.dc__tint {
  position: absolute;
  inset: 0;
  background: var(--dc-tint, #05060a);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}

.lightbox__caption { min-width: 0; }
.dc__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  pointer-events: auto;
}
.dc__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 0.5s var(--ease-out), background 0.3s;
}
.dc__dot:hover { background: var(--muted); }
.dc__dot[aria-current="true"] { width: 22px; background: var(--fg); box-shadow: var(--dot-glow); }

@media (max-width: 640px) {
  .dc { bottom: 150px; }
  .lightbox__bottom { flex-wrap: wrap; }
  .dc__dots { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
}

.lightbox__ui { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.lightbox__ui button { pointer-events: auto; }
.lightbox__top {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--muted);
}
.lightbox__count { padding: 10px 16px; border-radius: 999px; }
.lb-close { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; color: var(--fg); transition: background 0.3s; }
.lb-close:hover { background: var(--hover-bg); }
.lightbox__bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.lightbox__title { font-size: 16px; font-weight: 300; }
.lightbox__title .mono { margin-right: 10px; color: var(--accent); }
.lightbox__meta { margin-top: 4px; color: var(--dim); }
.lightbox__nav { display: flex; gap: 8px; }
.lb-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transition: background 0.3s, color 0.3s;
}
.lb-btn:hover { background: var(--fg); color: var(--bg); box-shadow: var(--btn-hover-glow); }
.lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lb-btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__sound-icon .wave--2 { animation: none !important; }
}