/* ═══════════════════════════════════════════════════════════════════════════
   Yaku Makara Club · base.css (núcleo)
   Tokens · fuentes · reset · tipografía · layout · componentes · foco · utilidades
   Las secciones USAN estas clases y variables; no las redefinen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Fuentes (autoalojadas) ─────────────────────────────────────────────── */
@font-face {
  font-family: "Makara Display";
  src: url("../fuentes/makara-display.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("../fuentes/geologica.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fuentes/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fuentes/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fuentes/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ─── Propiedades registradas: la tinta cambia de color con transición suave ── */
@property --tinta      { syntax: "<color>"; inherits: true; initial-value: #EAFBFB; }
@property --tinta-2    { syntax: "<color>"; inherits: true; initial-value: #B9DDE0; }
@property --tinta-3    { syntax: "<color>"; inherits: true; initial-value: #7FA9B0; }
@property --tinta-inv  { syntax: "<color>"; inherits: true; initial-value: #020A11; }
@property --linea      { syntax: "<color>"; inherits: true; initial-value: rgba(234, 251, 251, .16); }
@property --acento     { syntax: "<color>"; inherits: true; initial-value: #5FE0D9; }
@property --foco       { syntax: "<color>"; inherits: true; initial-value: #5FE0D9; }
@property --vidrio-fondo { syntax: "<color>"; inherits: true; initial-value: rgba(234, 251, 251, .06); }
@property --vidrio-borde { syntax: "<color>"; inherits: true; initial-value: rgba(234, 251, 251, .14); }
@property --vidrio-brillo { syntax: "<color>"; inherits: true; initial-value: rgba(234, 251, 251, .38); }
@property --sombra-texto { syntax: "<color>"; inherits: true; initial-value: rgba(2, 10, 17, .45); }

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Marca */
  --espuma: #EAFBFB;
  --espuma-2: #B9DDE0;
  --espuma-3: #7FA9B0;
  --arena: #F2E9DA;
  --turquesa: #089C9C;
  --turquesa-luz: #5FE0D9;
  --petroleo: #1E5C5B;
  --coral: #D63133;
  --naranja: #FA8117;
  --naranja-luz: #FF9F4A;
  --carbon: #353535;
  --noche: #061E2B;
  --abismo: #020A11;
  --bio: #6BFFE6;

  /* Agua: el núcleo las actualiza con la profundidad (valores iniciales = superficie) */
  --agua: #8FE9E4;       /* color del agua a la profundidad actual */
  --agua-2: #3FC4C0;     /* agua más profunda (parte baja de la pantalla) */
  --agua-sup: #B5F2EE;   /* agua más cercana a la superficie (parte alta) */
  --prof-n: 0;           /* profundidad normalizada 0–1 (0 m → 100 m) */
  --luz: 1;              /* luz solar 0–1 = e^(−prof/28) */
  --causticas: 1;        /* intensidad de cáusticas 0–1 (0–30 m) */
  --bio-n: 0;            /* intensidad de bioluminiscencia 0–1 (80–100 m) */
  --causticas-img: none; /* textura de cáusticas generada por el núcleo */

  /* Tinta (texto) — tono "agua profunda" por defecto; html.agua-clara lo invierte */
  --tinta: var(--espuma);
  --tinta-2: var(--espuma-2);
  --tinta-3: var(--espuma-3);
  --tinta-inv: var(--abismo);
  --linea: rgba(234, 251, 251, .16);
  --acento: var(--turquesa-luz);
  --foco: var(--turquesa-luz);
  --vidrio-fondo: rgba(234, 251, 251, .06);
  --vidrio-borde: rgba(234, 251, 251, .14);
  --vidrio-brillo: rgba(234, 251, 251, .38);
  --sombra-texto: rgba(2, 10, 17, .45);

  /* Tipografía */
  --f-display: "Makara Display", "Geologica", system-ui, sans-serif;
  --f-texto: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --t-mega: clamp(3.4rem, 12vw, 12.5rem);
  --t-1: clamp(2.5rem, 6.4vw, 6.8rem);
  --t-2: clamp(1.9rem, 4.2vw, 4.2rem);
  --t-3: clamp(1.3rem, 2.1vw, 2rem);
  --t-lead: clamp(1.1rem, 1.45vw, 1.45rem);
  --t-cuerpo: clamp(1rem, 1.05vw, 1.125rem);
  --t-peque: .875rem;
  --t-micro: .75rem;

  /* Espacio y layout */
  --margen: clamp(20px, 5vw, 72px);
  --ancho-max: 1320px;
  --ancho-texto: 38rem;
  --esp-1: clamp(.5rem, .8vw, .75rem);
  --esp-2: clamp(1rem, 1.6vw, 1.5rem);
  --esp-3: clamp(1.5rem, 2.8vw, 2.75rem);
  --esp-4: clamp(2.5rem, 5vw, 5rem);
  --esp-5: clamp(4rem, 9vw, 9rem);
  --esp-seccion: clamp(6rem, 14vw, 14rem);
  --nav-alto: 76px;

  /* Materia */
  --r-panel: 28px;
  --r-medio: 20px;
  --r-peque: 12px;
  --r-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(2, 10, 17, .10), 0 10px 30px -12px rgba(2, 10, 17, .38);
  --sombra-2: 0 40px 90px -30px rgba(2, 10, 17, .65);
  --sombra-brillo: 0 0 0 1px rgba(234, 251, 251, .06), 0 24px 70px -24px rgba(95, 224, 217, .28);
  --desenfoque: blur(14px) saturate(1.3);

  /* Movimiento */
  --agua-ease: cubic-bezier(.22, 1, .36, 1);
  --ease-marea: cubic-bezier(.65, 0, .35, 1);
  --dur: .9s;
  --dur-rapida: .45s;
  --dur-lenta: 1.4s;

  /* Capas (z-index) */
  --z-oceano: 0;
  --z-contenido: 1;
  --z-hud: 40;
  --z-menu: 45;
  --z-nav: 50;
  --z-cargador: 100;
  --z-grano: 105;
  --z-cursor: 120;
  --z-saltar: 130;

  color-scheme: dark;
}

/* Agua clara (0 → ~8 m): tinta oscura. La clase la pone/quita el núcleo. */
html.agua-clara,
.sobre-claro {
  --tinta: #020A11;
  --tinta-2: #082A33;
  --tinta-3: #11404A;
  --tinta-inv: #EAFBFB;
  --linea: rgba(2, 10, 17, .2);
  --acento: #04696C;
  --foco: #061E2B;
  --vidrio-fondo: rgba(255, 255, 255, .24);
  --vidrio-borde: rgba(255, 255, 255, .52);
  --vidrio-brillo: rgba(255, 255, 255, .9);
  --sombra-texto: rgba(234, 251, 251, .5);
}
/* Fuerza tinta clara dentro de un bloque oscuro propio (p. ej. un panel negro) */
.sobre-oscuro {
  --tinta: #EAFBFB;
  --tinta-2: #B9DDE0;
  --tinta-3: #7FA9B0;
  --tinta-inv: #020A11;
  --linea: rgba(234, 251, 251, .16);
  --acento: #5FE0D9;
  --foco: #5FE0D9;
  --vidrio-fondo: rgba(234, 251, 251, .06);
  --vidrio-borde: rgba(234, 251, 251, .14);
  --vidrio-brillo: rgba(234, 251, 251, .38);
  --sombra-texto: rgba(2, 10, 17, .45);
}
html {
  transition:
    --tinta 1s var(--agua-ease), --tinta-2 1s var(--agua-ease), --tinta-3 1s var(--agua-ease),
    --tinta-inv 1s var(--agua-ease), --linea 1s var(--agua-ease), --acento 1s var(--agua-ease),
    --foco 1s var(--agua-ease), --vidrio-fondo 1s var(--agua-ease), --vidrio-borde 1s var(--agua-ease),
    --vidrio-brillo 1s var(--agua-ease), --sombra-texto 1s var(--agua-ease);
}

/* ─── Reset moderno ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  hanging-punctuation: first last;
  scroll-behavior: auto;
}
html.js { scrollbar-width: none; }
html.js::-webkit-scrollbar { display: none; }
body {
  min-height: 100svh;
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta);
  /* Respaldo sin JS: todo el descenso pintado en el fondo del documento */
  background: linear-gradient(180deg,
    #8FE9E4 0%, #3FC4C0 4%, #0E8C93 12%, #0A5E6E 22%, #083F55 35%,
    #072E42 50%, #052234 65%, #041826 80%, #020A11 100%);
  background-color: var(--abismo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
html.js body { background: var(--abismo); }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
p, li, figcaption, blockquote, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: 1.1; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
:target { scroll-margin-top: var(--nav-alto); }
::selection { background: var(--turquesa-luz); color: var(--abismo); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; }

/* ─── Foco: un halo de agua, visible y hermoso ───────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--foco) 22%, transparent);
  border-radius: 6px;
}
.btn:focus-visible, .chip:focus-visible { border-radius: var(--r-pildora); }
main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* Enlace "Saltar al contenido" */
.saltar {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-saltar);
  padding: .8em 1.2em; border-radius: var(--r-pildora);
  background: var(--espuma); color: var(--abismo);
  font: 500 var(--t-peque)/1 var(--f-texto); text-decoration: none;
  transform: translateY(-160%);
  transition: transform .5s var(--agua-ease);
}
.saltar:focus-visible { transform: none; outline-color: var(--abismo); }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.contenedor--estrecho { max-width: calc(58rem + 2 * var(--margen)); }
main { position: relative; z-index: var(--z-contenido); display: block; }
.zona {
  position: relative;
  isolation: isolate;
  overflow-x: clip;          /* nunca scroll horizontal desde una sección */
}
.pila > * + * { margin-top: var(--pila, 1em); }

/* ─── Tipografía ─────────────────────────────────────────────────────────── */
.titulo {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .92;
  font-size: var(--t-2);
  color: var(--tinta);
  text-wrap: balance;
}
.titulo--mega { font-size: var(--t-mega); font-weight: 850; line-height: .86; letter-spacing: -.035em; }
.titulo--1 { font-size: var(--t-1); line-height: .9; letter-spacing: -.025em; }
.titulo--2 { font-size: var(--t-2); }
.titulo--3 { font-size: var(--t-3); font-weight: 700; line-height: .98; letter-spacing: -.01em; }
.titulo .serif, .titulo em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 1.12em;
  line-height: .8;
  padding-right: .04em;
}
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
.rotulo {
  font-family: var(--f-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .42em;
  line-height: 1.2;
  margin-right: -.42em;
}
.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--tinta);
  max-width: var(--ancho-texto);
  opacity: .92;
}
.texto { color: var(--tinta-2); max-width: var(--ancho-texto); }
.mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.peque { font-size: var(--t-peque); }
.micro { font-size: var(--t-micro); }
strong, b { font-weight: 600; }

/* Kicker: guion + punto + texto mono en mayúsculas */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--tinta-2);
}
.kicker::before {
  content: "";
  flex: none;
  width: 2.6em;
  height: 7px;
  background:
    radial-gradient(circle at calc(100% - 3.5px) 50%, var(--kicker-punto, var(--acento)) 0 3px, transparent 3.6px),
    linear-gradient(currentColor, currentColor) left 50% / calc(100% - 12px) 1px no-repeat;
  opacity: .9;
}
.kicker--centro { justify-content: center; }

/* ─── Íconos ─────────────────────────────────────────────────────────────── */
.ico {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ico-trazo, 1.6);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* ─── Botones "acuáticos" ────────────────────────────────────────────────────
   ::before = agua que sube al pasar (una ola que gira mientras sube)
   ::after  = destello que recorre el botón                                  */
@keyframes ym-ola { to { rotate: 360deg; } }
@keyframes ym-destello {
  0%, 78% { translate: -130% 0; }
  96%, 100% { translate: 130% 0; }
}
.btn {
  --btn-fondo: transparent;
  --btn-tinta: var(--tinta);
  --btn-borde: var(--linea);
  --btn-relleno: var(--tinta);
  --btn-tinta-hover: var(--tinta-inv);
  --btn-alto: 52px;
  --mueve-x: .22em;
  --mueve-y: 0em;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: var(--btn-alto);
  padding: 0 1.65em;
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-pildora);
  background: var(--btn-fondo);
  color: var(--btn-tinta);
  font: 500 .95rem/1.1 var(--f-texto);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    color .6s var(--agua-ease),
    border-color .6s var(--agua-ease),
    box-shadow .8s var(--agua-ease),
    transform .6s var(--agua-ease);
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 104%;
  width: max(230%, 14em);
  aspect-ratio: 1;
  border-radius: 38% 42% 40% 44%;
  background: var(--btn-relleno);
  translate: -50% 0;
  animation: ym-ola 5.5s linear infinite;
  animation-play-state: paused;
  transition: top .95s var(--agua-ease);
  pointer-events: none;
}
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, .12) 56%, transparent 66%);
  translate: -130% 0;
  pointer-events: none;
}
.btn > * { position: relative; }
.btn .ico { font-size: 1.15em; transition: translate .6s var(--agua-ease); }
@media (hover: hover) {
  .btn:hover { color: var(--btn-tinta-hover); border-color: transparent; }
  .btn:hover::before { top: -70%; animation-play-state: running; }
  .btn:hover::after { translate: 130% 0; transition: translate 1.1s var(--agua-ease); }
  .btn:hover .ico { translate: var(--mueve-x) var(--mueve-y); }
}
.btn:focus-visible { color: var(--btn-tinta-hover); }
.btn:focus-visible::before { top: -70%; animation-play-state: running; }
.btn:active { transform: scale(.97); transition-duration: .15s; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--primario {
  --btn-fondo: var(--naranja);
  --btn-tinta: var(--abismo);
  --btn-borde: transparent;
  --btn-relleno: var(--espuma);
  --btn-tinta-hover: var(--abismo);
  font-weight: 600;
  box-shadow: 0 12px 34px -14px rgba(250, 129, 23, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn--primario::after { animation: ym-destello 7s var(--agua-ease) 2.5s infinite; }
@media (hover: hover) {
  .btn--primario:hover { box-shadow: 0 16px 44px -12px rgba(250, 129, 23, .6), 0 0 0 6px rgba(250, 129, 23, .12); }
  .btn--primario:hover::after { animation: none; }
}

.btn--vidrio {
  --btn-fondo: var(--vidrio-fondo);
  --btn-borde: var(--vidrio-borde);
  --btn-tinta: var(--tinta);
  --btn-relleno: var(--tinta);
  --btn-tinta-hover: var(--tinta-inv);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--vidrio-borde);
}

.btn--icono {
  --btn-fondo: var(--vidrio-fondo);
  --btn-borde: var(--vidrio-borde);
  --btn-alto: 48px;
  width: var(--btn-alto);
  padding: 0;
  gap: 0;
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
.btn--icono .ico { font-size: 1.25rem; }
.btn--icono::before { width: 240%; }

.btn--grande { --btn-alto: 64px; padding: 0 2.1em; font-size: 1.05rem; }
.btn--peque { --btn-alto: 40px; padding: 0 1.2em; font-size: .85rem; }
.btn--bloque { display: flex; width: 100%; }

/* Enlace de texto con subrayado que fluye */
.enlace {
  color: var(--tinta);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: .1em;
  transition: background-size .7s var(--agua-ease);
}
@media (hover: hover) { .enlace:hover { background-size: 0% 1px; background-position: 100% 100%; } }

/* ─── Chips ──────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 40px;
  padding: 0 1.05em;
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-pildora);
  background: var(--vidrio-fondo);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--tinta);
  font: 400 var(--t-peque)/1.1 var(--f-texto);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .5s var(--agua-ease), color .5s var(--agua-ease), border-color .5s var(--agua-ease), transform .5s var(--agua-ease);
}
.chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--chip-punto, var(--acento));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--chip-punto, var(--acento)) 50%, transparent);
  transition: box-shadow .6s var(--agua-ease), transform .6s var(--agua-ease);
}
@media (hover: hover) {
  .chip:hover { border-color: color-mix(in srgb, var(--tinta) 45%, transparent); }
  .chip:hover::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--chip-punto, var(--acento)) 18%, transparent); }
}
.chip[aria-pressed="true"], .chip.es-activo {
  background: var(--tinta);
  color: var(--tinta-inv);
  border-color: transparent;
}
.chip[aria-pressed="true"]::before, .chip.es-activo::before { transform: scale(1.25); }
.chip:active { transform: scale(.96); }
.chip--quieto { cursor: default; }

/* ─── Vidrio acuático (paneles) ──────────────────────────────────────────── */
.vidrio {
  position: relative;
  border-radius: var(--r-panel);
  background: var(--vidrio-fondo);
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-1);
  isolation: isolate;
}
.vidrio::before {           /* borde degradado: brillo arriba, casi nada abajo */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(170deg, var(--vidrio-brillo), var(--vidrio-borde) 32%, transparent 70%, var(--vidrio-borde));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* ─── Medios (foto / video con tratamiento de agua) ──────────────────────── */
.medio {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-medio);
  background: var(--noche);
  transform: translateZ(0); /* recorte correcto de video con radio en Safari */
}
.medio > img, .medio > video, .medio > picture, .medio > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.medio::before {           /* virado de agua según la profundidad */
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, var(--agua-sup), var(--agua-2));
  mix-blend-mode: soft-light;
  opacity: calc(.18 + var(--prof-n) * .42);
  pointer-events: none;
}
.medio::after {            /* viñeta + filo de luz */
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  background: radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(2, 10, 17, .42) 100%);
  box-shadow: inset 0 1px 0 rgba(234, 251, 251, .14), inset 0 0 0 1px rgba(234, 251, 251, .06);
  pointer-events: none;
}
/* Capa de cáusticas (el núcleo inyecta .medio__causticas en .medio--causticas) */
.medio__causticas {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: calc(var(--causticas) * var(--causticas-fuerza, .75));
}
.medio__causticas i {
  position: absolute;
  top: -340px; left: -340px; right: 0; bottom: 0;
  background-image: var(--causticas-img);
  background-size: 340px 340px;
  animation: ym-deriva-a 26s linear infinite;
  will-change: transform;
}
.medio__causticas i + i {
  top: -460px; left: 0; right: -460px; bottom: 0;
  background-size: 460px 460px;
  opacity: .65;
  animation: ym-deriva-b 34s linear infinite;
}
@keyframes ym-deriva-a { to { transform: translate3d(340px, 340px, 0); } }
@keyframes ym-deriva-b { to { transform: translate3d(-460px, 460px, 0); } }

/* ─── Motivo espiral (svg decorativo) ────────────────────────────────────── */
.espiral {
  display: block;
  width: var(--espiral-tam, 120px);
  height: auto;
  aspect-ratio: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--espiral-trazo, 1.2);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--acento);
  overflow: visible;
  pointer-events: none;
}
/* data-dibujar: el núcleo anima --dibujo de 1 a 0 con el scroll */
[data-dibujar] { --dibujo: 0; }
html.js:not(.es-reducido) [data-dibujar] { --dibujo: 1; }
[data-dibujar] path, [data-dibujar] circle, [data-dibujar] line, [data-dibujar] polyline, [data-dibujar] ellipse, [data-dibujar] use {
  stroke-dasharray: 1 1;
  stroke-dashoffset: var(--dibujo);
}

/* ─── Revelados (estado inicial antes de que el núcleo los anime) ────────── */
@keyframes ym-seguro { to { opacity: 1; visibility: visible; } }
html.js:not(.es-reducido) [data-revelar]:not([data-revelar="lineas"]),
html.js:not(.es-reducido) [data-escalonar] > * { opacity: 0; }
html.js:not(.es-reducido) [data-revelar="lineas"] { visibility: hidden; }
/* Red de seguridad: si el núcleo no arranca, todo aparece a los 4 s */
html.js:not(.ym-activo) [data-revelar],
html.js:not(.ym-activo) [data-escalonar] > * { animation: ym-seguro .01s linear 4s forwards; }
/* máscaras de líneas de SplitText: holgura para tildes y cursivas */
.ym-linea-mask { padding: .16em .08em .1em; margin: -.16em -.08em -.1em; }
.ym-linea { will-change: transform; }

/* ─── Utilidades mínimas ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.centro { text-align: center; }
.flotar { animation: ym-flotar var(--flotar-dur, 6s) ease-in-out infinite; }
@keyframes ym-flotar {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--flotar-y, -10px); }
}
html.sin-js .sin-js-oculto { display: none !important; }

.aviso-sin-js {
  position: fixed; left: 50%; bottom: 16px; z-index: var(--z-saltar);
  translate: -50% 0;
  max-width: calc(100% - 32px);
  padding: .8em 1.2em;
  border-radius: var(--r-pildora);
  background: rgba(2, 10, 17, .82);
  color: var(--espuma);
  font: 400 var(--t-peque)/1.35 var(--f-texto);
  text-align: center;
}
html.sin-js #superficie {
  --tinta: #020A11; --tinta-2: #082A33; --tinta-3: #11404A; --tinta-inv: #EAFBFB;
  --linea: rgba(2, 10, 17, .18); --acento: #04696C; --foco: #061E2B;
  --vidrio-fondo: rgba(255, 255, 255, .24); --vidrio-borde: rgba(255, 255, 255, .52);
}

/* ─── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --nav-alto: 64px; }
  .btn { --btn-alto: 50px; }
  .btn--grande { --btn-alto: 58px; }
}

/* ─── Movimiento reducido: todo se ve, nada se mueve de más ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn::before { animation: none; }
  .btn::after, .btn--primario::after { animation: none; }
  .flotar { animation: none; }
  .medio__causticas i { animation: none; }
}