/* ==========================================================================
   ARXIA · Estilos
   Cabecera fija, titular a dos columnas y una arcada de puertas que crece.
   En el móvil la arcada se convierte en un carrusel que se desliza de lado.
   ========================================================================== */

/* ---------- Tipografías (alojadas en la propia web) ---------- */
@font-face { font-family: "Gloock"; src: url("../assets/fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../assets/fonts/schibsted-grotesk-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Colores y medidas ---------- */
:root {
  --piedra: #E9EBEE;      /* fondo: caliza fría */
  --piedra-2: #F6F7F8;    /* marcos y superficies */
  --tinta: #121519;
  --tinta-2: #4C535D;
  --veta: #C8CDD4;        /* líneas */
  --clave: #B5841A;       /* la clave del arco */
  --clave-texto: #7E5D0F;
  --ok: #2E7A4E;
  --sombra: 18 21 25;

  --f-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-text: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-hero: clamp(2.7rem, 1.4rem + 5.4vw, 5.9rem);
  --t-h2: clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);

  /* Refracta (tema Perla) */
  --rf-bg1: #FFFDF9; --rf-bg2: #F2EBF1; --rf-bg3: #DCD0E5;
  --rf-guil: rgba(42, 32, 54, .07); --rf-backcard: #2A2036; --rf-edge: rgba(42, 32, 54, .45);
  --rf-prism: #3E3152; --rf-pf: rgba(255, 255, 255, .7); --rf-beam: #FFFFFF; --rf-beam-edge: rgba(62, 49, 82, .38);
  --rf-spark: #8A76B0;
  /* Marea (tema Manta) */
  --mr-sky1: #FBF6EE; --mr-sky2: #F0DAC6; --mr-glow: rgba(255, 255, 255, .9);
  --mr-ring: #3A2A22; --mr-wave: #9E4A32; --mr-moon: #FFFFFF; --mr-moon-off: rgba(58, 42, 34, .07); --mr-stars: 0;
  --mr-w1: #B5CEC5; --mr-w2: #6C9E94; --mr-w3: #2E7A72; --mr-glint: #FFFFFF;
  /* bloop (laguna de día) */
  --bl-agua1: #E9F8F4; --bl-agua2: #A8DDD5; --bl-agua3: #4FA7A6; --bl-rayo: rgba(255, 255, 255, .75);
  --bl-lejos: #8ECDC5; --bl-alga: #3E9C6E; --bl-alga2: #5DB585; --bl-arena: #F5E4C0; --bl-arena2: #EBD3A4;
  --bl-piedra: #CDB68A; --bl-coral: #FF8A6B; --bl-burbuja: #FFFFFF; --bl-nota: #145A62;
  /* Estela (tema Día) */
  --es-bg1: #FFFDF8; --es-bg2: #E6DCCB; --es-cono: rgba(255, 255, 255, .9); --es-linea: rgba(28, 24, 20, .1);
  --es-motas: #B98A4E; --es-vidrio: rgba(255, 255, 255, .55); --es-vidrio-borde: rgba(28, 24, 20, .3);
  --es-liq1: #F6D7A6; --es-liq2: #D9954A; --es-metal1: #F3D9A6; --es-metal2: #9A6526;
  --es-peana1: #F7F2EA; --es-peana2: #DCCFBB; --es-peana-cara: #FFFCF6; --es-sombra: rgba(60, 40, 20, .2);
  --es-astro: #B97A2E; --es-halo: rgba(232, 181, 108, .55); --es-rocio: #9C86CF; --es-rotulo: #3A2A1F;
  --es-c0: #2F8796; --es-c1: #7457C2; --es-c2: #C2557A; --es-c3: #B8742A; --es-borde: rgba(29, 26, 22, .4); --es-tinta: #1C1814;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --piedra: #0E1114; --piedra-2: #161A1F; --tinta: #E6E8EB; --tinta-2: #9BA3AE;
    --veta: #2A3039; --clave: #E0B04A; --clave-texto: #E8BF62; --ok: #6CC28E; --sombra: 0 0 0;
    /* Refracta (tema Terciopelo) */
    --rf-bg1: #3A2B4E; --rf-bg2: #1E1628; --rf-bg3: #110C17;
    --rf-guil: rgba(242, 236, 223, .05); --rf-backcard: #F2ECDF; --rf-edge: rgba(21, 16, 28, .4);
    --rf-prism: #E7DFF4; --rf-pf: rgba(255, 255, 255, .1); --rf-beam: #FFFFFF; --rf-beam-edge: rgba(255, 255, 255, 0);
    --rf-spark: #D8CCF2;
    /* Marea (tema Noche) */
    --mr-sky1: #0A0F15; --mr-sky2: #1B2431; --mr-glow: rgba(244, 233, 220, .2);
    --mr-ring: #E6ECEF; --mr-wave: #E2727F; --mr-moon: #F4E9DC; --mr-moon-off: rgba(255, 255, 255, .06); --mr-stars: 1;
    --mr-w1: #1D2935; --mr-w2: #1B3C41; --mr-w3: #22605A; --mr-glint: #F2CDBE;
    /* bloop (acuario de noche) */
    --bl-agua1: #1C5F6B; --bl-agua2: #12384F; --bl-agua3: #0A1A2E; --bl-rayo: rgba(170, 235, 225, .3);
    --bl-lejos: #174456; --bl-alga: #2B7F5B; --bl-alga2: #3E9C6E; --bl-arena: #2C3F4C; --bl-arena2: #22323E;
    --bl-piedra: #3A5160; --bl-coral: #E0715A; --bl-burbuja: #BFEDE6; --bl-nota: #FFC857;
    /* Estela (tema Noche) */
    --es-bg1: #2E221A; --es-bg2: #0D0B0A; --es-cono: rgba(255, 226, 186, .13); --es-linea: rgba(243, 236, 227, .08);
    --es-motas: #F5ECDF; --es-vidrio: rgba(255, 244, 230, .09); --es-vidrio-borde: rgba(243, 236, 227, .38);
    --es-liq1: #F2C27F; --es-liq2: #A9642A; --es-metal1: #F0CF95; --es-metal2: #7A4E1C;
    --es-peana1: #2A2019; --es-peana2: #120E0B; --es-peana-cara: #3A2D23; --es-sombra: rgba(0, 0, 0, .55);
    --es-astro: #FFF4E4; --es-halo: rgba(242, 199, 154, .42); --es-rocio: #D9CCF5; --es-rotulo: #F3ECE3;
    --es-c0: #8FC7D0; --es-c1: #B9A3E3; --es-c2: #E79BB0; --es-c3: #F2C79A; --es-borde: transparent; --es-tinta: #F3ECE3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --piedra: #0E1114; --piedra-2: #161A1F; --tinta: #E6E8EB; --tinta-2: #9BA3AE;
  --veta: #2A3039; --clave: #E0B04A; --clave-texto: #E8BF62; --ok: #6CC28E; --sombra: 0 0 0;
  --rf-bg1: #3A2B4E; --rf-bg2: #1E1628; --rf-bg3: #110C17;
  --rf-guil: rgba(242, 236, 223, .05); --rf-backcard: #F2ECDF; --rf-edge: rgba(21, 16, 28, .4);
  --rf-prism: #E7DFF4; --rf-pf: rgba(255, 255, 255, .1); --rf-beam: #FFFFFF; --rf-beam-edge: rgba(255, 255, 255, 0);
  --rf-spark: #D8CCF2;
  --mr-sky1: #0A0F15; --mr-sky2: #1B2431; --mr-glow: rgba(244, 233, 220, .2);
  --mr-ring: #E6ECEF; --mr-wave: #E2727F; --mr-moon: #F4E9DC; --mr-moon-off: rgba(255, 255, 255, .06); --mr-stars: 1;
  --mr-w1: #1D2935; --mr-w2: #1B3C41; --mr-w3: #22605A; --mr-glint: #F2CDBE;
  --bl-agua1: #1C5F6B; --bl-agua2: #12384F; --bl-agua3: #0A1A2E; --bl-rayo: rgba(170, 235, 225, .3);
  --bl-lejos: #174456; --bl-alga: #2B7F5B; --bl-alga2: #3E9C6E; --bl-arena: #2C3F4C; --bl-arena2: #22323E;
  --bl-piedra: #3A5160; --bl-coral: #E0715A; --bl-burbuja: #BFEDE6; --bl-nota: #FFC857;
  --es-bg1: #2E221A; --es-bg2: #0D0B0A; --es-cono: rgba(255, 226, 186, .13); --es-linea: rgba(243, 236, 227, .08);
  --es-motas: #F5ECDF; --es-vidrio: rgba(255, 244, 230, .09); --es-vidrio-borde: rgba(243, 236, 227, .38);
  --es-liq1: #F2C27F; --es-liq2: #A9642A; --es-metal1: #F0CF95; --es-metal2: #7A4E1C;
  --es-peana1: #2A2019; --es-peana2: #120E0B; --es-peana-cara: #3A2D23; --es-sombra: rgba(0, 0, 0, .55);
  --es-astro: #FFF4E4; --es-halo: rgba(242, 199, 154, .42); --es-rocio: #D9CCF5; --es-rotulo: #F3ECE3;
    --es-c0: #8FC7D0; --es-c1: #B9A3E3; --es-c2: #E79BB0; --es-c3: #F2C79A; --es-borde: transparent; --es-tinta: #F3ECE3;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--piedra); }
html.i18n-espera body { opacity: 0; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--piedra);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: opacity .25s ease;
}
body.cambiando-idioma main, body.cambiando-idioma .top__nav, body.cambiando-idioma .foot { opacity: 0; }
main, .top__nav, .foot { transition: opacity .18s ease; }
/* Franja bajo la barra de estado del móvil */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--piedra);
}
/* Grano de piedra, solo en pantallas con ratón (en el móvil ahorra batería) */
@media (hover: hover) and (pointer: fine) {
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }
}
a { color: inherit; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--clave); outline-offset: 4px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--clave) 32%, transparent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: fixed; z-index: 120; left: calc(var(--gutter) - 4px); top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: var(--piedra); text-decoration: none;
  font-weight: 600; font-size: .9rem; transform: translateY(-180%); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s;
}
.skip:focus-visible { transform: none; opacity: 1; pointer-events: auto; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ---------- Marca ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); }
.brand__mark { width: 34px; height: 34px; flex: none; overflow: visible; }
.brand__mark .k { fill: var(--clave); }
.brand__word { height: 14px; width: auto; flex: none; fill: currentColor; margin-top: 1px; }
.top .brand__mark .k { transform-box: fill-box; transform-origin: 50% 100%; animation: caeClave .95s .2s var(--ease-spring) both; }
@keyframes caeClave {
  0% { transform: translateY(-140%); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ---------- Cabecera ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: color-mix(in srgb, var(--piedra) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--veta) 70%, transparent);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.top__side { display: flex; align-items: center; gap: 28px; }
.top__nav { display: flex; gap: 26px; font-size: .92rem; }
.top__nav a { text-decoration: none; color: var(--tinta-2); padding-block: 8px; position: relative; transition: color .2s; }
.top__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--clave);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.top__nav a:hover { color: var(--tinta); }
.top__nav a:hover::after { transform: scaleX(1); }

/* Selector de idioma */
.lang {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px;
  border: 1px solid var(--veta); border-radius: 999px; background: color-mix(in srgb, var(--piedra-2) 70%, transparent);
}
.lang::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--tinta); transition: transform .35s var(--ease-out);
}
html[lang="en"] .lang::before { transform: translateX(100%); }
.lang button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer; min-width: 38px; min-height: 30px; padding: 0 10px;
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; color: var(--tinta-2); border-radius: 999px; transition: color .25s;
}
.lang button[aria-pressed="true"] { color: var(--piedra); }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px;
  align-items: end; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px);
}
.eyebrow {
  grid-column: 1 / -1; margin: 0;
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--clave); flex: none; }
.hero__title {
  grid-column: 1 / span 8; margin: 0;
  font: 400 var(--t-hero)/.98 var(--f-display); letter-spacing: -.02em; text-wrap: balance;
}
.hero__title span { display: block; animation: sube .9s var(--ease-out) both; }
.hero__title span + span { animation-delay: .08s; color: var(--tinta-2); }
.hero__lead {
  grid-column: 9 / -1; margin: 0; max-width: 34ch; font-size: 1.06rem; color: var(--tinta-2);
  animation: sube .9s .16s var(--ease-out) both;
}
.hero__lead strong { color: var(--tinta); font-weight: 600; }
@keyframes sube { from { transform: translateY(14px); opacity: .2; } to { transform: none; opacity: 1; } }

/* ---------- Cabecera de sección ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding-bottom: 18px; margin-bottom: 36px; border-bottom: 1px solid var(--veta);
}
.section-head h2 { margin: 0; font: 400 var(--t-h2)/1.1 var(--f-display); letter-spacing: -.01em; }
.section-head p { margin: 0; font: 400 .78rem/1.4 var(--f-mono); letter-spacing: .07em; color: var(--tinta-2); text-transform: uppercase; }

/* ---------- Arcada ---------- */
.projects { padding-bottom: clamp(64px, 9vw, 120px); scroll-margin-top: 80px; }
.arcade {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(40px, 4vw, 56px) clamp(20px, 3vw, 40px);
}
.arcade > li { min-width: 0; display: flex; animation: sube 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * .1s + .1s); }
.fallback { display: none; }
html:not(.js) .fallback, .sin-proyectos .fallback { display: block; }
.fallback ul { margin: 0; padding-left: 1.2em; }
.fallback a { font-weight: 600; }

.door { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.door__arch { container-type: inline-size; position: relative; }
.door__frame {
  position: relative; aspect-ratio: 3 / 4; padding: 10px;
  background: var(--piedra-2);
  border: 1px solid var(--veta);
  border-radius: 999px 999px 14px 14px;
  border-radius: 50cqi 50cqi 14px 14px;
  transition: border-color .35s ease, transform .55s var(--ease-out), box-shadow .55s ease;
}
.door__window {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 999px 999px 6px 6px;
  border-radius: calc(50cqi - 10px) calc(50cqi - 10px) 6px 6px;
  isolation: isolate;
  transform: translateZ(0);
}
.door__window .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.door__key {
  position: absolute; z-index: 3; top: -9px; left: 50%; width: 30px; height: 30px; margin-left: -15px;
  transition: transform .45s var(--ease-spring);
  animation: caeClave .8s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * .12s + .55s);
}
.door__key svg { width: 100%; height: 100%; display: block; overflow: visible; fill: var(--clave); stroke: var(--piedra-2); stroke-width: 1.4; paint-order: stroke; }

.door:is(:hover, :focus-visible) .door__frame,
.is-centro .door .door__frame {
  border-color: color-mix(in srgb, var(--tinta) 42%, var(--veta));
  box-shadow: 0 26px 44px -30px rgb(var(--sombra) / .6);
}
.door:is(:hover, :focus-visible) .door__frame { transform: translateY(-4px); }
.door:is(:hover, :focus-visible) .door__key { transform: translateY(-6px); }
.door:focus-visible { outline: none; }
.door:focus-visible .door__frame { outline: 2px solid var(--clave); outline-offset: 5px; }

.door__meta { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; flex: 1; }
.door__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.door__num { font: 400 1.15rem/1 var(--f-display); color: var(--clave-texto); letter-spacing: .06em; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status--live { color: var(--ok); }
.status--live::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); animation: latido 2.8s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 8%, transparent); } }
.status--soon::before { background: transparent; border: 1px dashed currentColor; }
.door__name { margin: 0; min-height: 36px; display: flex; align-items: flex-end; font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.15rem)/1.05 var(--f-display); letter-spacing: -.01em; }
.wordmark { display: block; height: calc(30px * var(--wm-h, 1)); width: auto; fill: var(--tinta); }
.wordmark .wm-burbujas { fill: #E2F7F3; stroke: #1F7A84; stroke-width: 15; }
.wordmark .wm-burbuja { fill: none; }
.wordmark .wm-brillo { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.door__desc { margin: 0; color: var(--tinta-2); max-width: 40ch; font-size: .98rem; }
.door__tags { margin: 0 0 8px; font: 400 .74rem/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }
.door__tags span { white-space: nowrap; }
.door__url {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--veta);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 500 .86rem/1.3 var(--f-mono); color: var(--tinta); overflow-wrap: anywhere;
}
.door__url svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease-spring); }
.door__url path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.door:hover .door__url svg { transform: translate(3px, -3px); }
.door:hover .door__url span { text-decoration: underline; text-decoration-color: var(--clave); text-underline-offset: 4px; }

/* Puerta en obras: marco punteado y sin clave */
.door--soon { cursor: default; }
.door--soon .door__frame { background: transparent; border-style: dashed; }
.door--soon .door__window {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--veta) 75%, transparent) 13px 14px);
}
.door--soon .door__key svg { fill: var(--piedra); stroke: var(--tinta-2); stroke-width: .8; stroke-dasharray: 1.6 1.4; opacity: .8; }
.door--soon .door__key { animation: none; }
.soon__plate { display: grid; gap: 8px; padding: 18px 24px; background: var(--piedra); border: 1px solid var(--veta); border-radius: 6px; }
.soon__plate b { font: 400 2.6rem/1 var(--f-display); color: var(--tinta-2); }
.soon__plate span { font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.door--soon .door__name { color: var(--tinta-2); }
.door--soon .door__url { color: var(--tinta-2); }

/* Pausa las animaciones de las puertas que no se ven */
.arcade > li.fuera * { animation-play-state: paused !important; }

/* ---------- Interior · Refracta ---------- */
.rf-bg-1 { stop-color: var(--rf-bg1); } .rf-bg-2 { stop-color: var(--rf-bg2); } .rf-bg-3 { stop-color: var(--rf-bg3); }
.rf-guil { fill: none; stroke: var(--rf-guil); stroke-width: 1; }
.rf-pf { stop-color: var(--rf-pf); }
.rf-rings { transform-box: view-box; transform-origin: 164px 172px; animation: gira 60s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.rf-spark { fill: var(--rf-spark); animation: titila 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rf-spark:nth-child(2) { animation-delay: -1.2s; } .rf-spark:nth-child(3) { animation-delay: -2.6s; }
.rf-spark:nth-child(4) { animation-delay: -3.4s; } .rf-spark:nth-child(5) { animation-delay: -.6s; }
@keyframes titila { 0%, 100% { opacity: .2; scale: .6; } 50% { opacity: .95; scale: 1; } }
.rf-beam-glow { stroke: var(--rf-beam); stroke-width: 14; stroke-linecap: round; opacity: .32; }
.rf-beam-edge { stroke: var(--rf-beam-edge); stroke-width: 4.6; stroke-linecap: round; }
.rf-beam-core { stroke: var(--rf-beam); stroke-width: 2.6; stroke-linecap: round; }
.rf-inner { fill: var(--rf-beam); opacity: .55; }
.rf-prism { stroke: var(--rf-prism); stroke-width: 1.6; stroke-linejoin: round; }
.rf-fan { transform-box: view-box; transform-origin: 96px 294px; transition: transform .8s var(--ease-out), opacity .6s; animation: respira 7s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: .84; } 50% { opacity: 1; } }

/* Símbolo de Refracta encima de la escena: se inclina con el puntero */
.rf-mark { position: absolute; left: 29.667%; top: 24.25%; width: 50%; height: 37.5%; z-index: 1; animation: flota 6s ease-in-out infinite; }
.rf-mark__tilt {
  width: 100%; height: 100%;
  transform: perspective(520px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform .6s var(--ease-out);
  filter: drop-shadow(0 14px 18px rgb(10 6 16 / .35));
}
.rf-mark__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: hue-rotate(var(--hue, 0deg)); transition: filter .4s; }
.rf-back { fill: none; stroke: var(--rf-backcard); stroke-width: 3; }
.rf-front-edge { fill: none; stroke: var(--rf-edge); stroke-width: .9; }
.rf-glint { animation: barre 5.5s ease-in-out infinite; }
@keyframes barre { 0%, 55% { transform: translateX(0); } 85%, 100% { transform: translateX(70px); } }
@keyframes flota { 50% { transform: translateY(-4px); } }
.door:is(:hover, :focus-visible) .rf-fan, .is-centro .rf-fan { transform: scale(1.04); opacity: 1; }
.door.sigue .rf-mark__tilt { transition-duration: .12s; }
.door.sigue .rf-glint { animation: none; transform: translateX(var(--gx, 0px)); transition: transform .15s; }

/* ---------- Interior · Marea ---------- */
.mr-sky-1 { stop-color: var(--mr-sky1); } .mr-sky-2 { stop-color: var(--mr-sky2); }
.mr-glow-1 { stop-color: var(--mr-glow); } .mr-glow-2 { stop-color: var(--mr-glow); stop-opacity: 0; }
.mr-stars { opacity: var(--mr-stars); fill: var(--mr-moon); }
.mr-stars circle { animation: titila 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mr-stars circle:nth-child(odd) { animation-delay: -2.3s; }
.mr-ring { fill: none; stroke: var(--mr-ring); stroke-width: 3; }
.mr-moon-off { fill: var(--mr-moon-off); }
.mr-moon-lit { fill: var(--mr-moon); opacity: .92; }
.mr-logo-wave { fill: var(--mr-wave); animation: olaLogo 6s linear infinite; }
@keyframes olaLogo { to { transform: translateX(24px); } }
.mr-glints rect { fill: var(--mr-glint); animation: brillo 3.8s ease-in-out infinite; }
.mr-glints rect:nth-child(2n) { animation-delay: -1.4s; } .mr-glints rect:nth-child(3n) { animation-delay: -2.5s; }
@keyframes brillo { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
.mr-tide { transition: transform 1.4s var(--ease-out); }
.door:is(:hover, :focus-visible) .mr-tide, .is-centro .mr-tide { transform: translateY(-12px); }
.mr-wave { animation: deriva linear infinite; }
.mr-wave--1 { fill: var(--mr-w1); animation-duration: 21s; }
.mr-wave--2 { fill: var(--mr-w2); animation-duration: 14s; animation-direction: reverse; }
.mr-wave--3 { fill: var(--mr-w3); animation-duration: 9s; }
@keyframes deriva { to { transform: translateX(-150px); } }

/* ---------- Interior · bloop ---------- */
.bl-agua-1 { stop-color: var(--bl-agua1); } .bl-agua-2 { stop-color: var(--bl-agua2); } .bl-agua-3 { stop-color: var(--bl-agua3); }
.bl-rayo-1 { stop-color: var(--bl-rayo); } .bl-rayo-2 { stop-color: var(--bl-rayo); stop-opacity: 0; }
.bl-rayos polygon { opacity: .5; animation: rayo 7s ease-in-out infinite; }
.bl-rayos polygon:nth-child(2) { animation-delay: -2.4s; } .bl-rayos polygon:nth-child(3) { animation-delay: -4.1s; } .bl-rayos polygon:nth-child(4) { animation-delay: -5.6s; }
@keyframes rayo { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
.bl-alga { transform-box: fill-box; transform-origin: 50% 100%; animation: mece 5.5s ease-in-out infinite alternate; }
.bl-lejos .bl-alga { fill: var(--bl-lejos); animation-duration: 8s; }
.bl-lejos .bl-alga:nth-child(2) { animation-delay: -3s; } .bl-lejos .bl-alga:nth-child(3) { animation-delay: -5s; }
.bl-algas .bl-alga { fill: var(--bl-alga); }
.bl-algas .bl-alga:nth-child(2) { fill: var(--bl-alga2); animation-delay: -2s; } .bl-algas .bl-alga:nth-child(3) { animation-delay: -3.6s; }
@keyframes mece { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.bl-arena { fill: var(--bl-arena); } .bl-arena-2 { fill: var(--bl-arena2); } .bl-piedras { fill: var(--bl-piedra); }
.bl-coral { fill: none; stroke: var(--bl-coral); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.bl-burbujas circle { fill: var(--bl-burbuja); fill-opacity: .18; stroke: var(--bl-burbuja); stroke-width: 1.3; opacity: 0; animation: burbujea 7s linear infinite; }
.bl-burbujas circle:nth-child(2) { animation-duration: 9s; animation-delay: -3s; } .bl-burbujas circle:nth-child(3) { animation-duration: 8s; animation-delay: -5s; }
.bl-burbujas circle:nth-child(4) { animation-duration: 6s; animation-delay: -1.5s; } .bl-burbujas circle:nth-child(5) { animation-duration: 10s; animation-delay: -6.5s; }
.bl-burbujas circle:nth-child(6) { animation-duration: 7.5s; animation-delay: -4s; }
@keyframes burbujea { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translateY(-330px); opacity: 0; } }
/* El pez: flota, aletea, parpadea y se hincha al pasar por encima */
.bl-pez { transform-box: fill-box; transform-origin: center; animation: flotaPez 5s ease-in-out infinite; }
@keyframes flotaPez { 50% { transform: translateY(-5px) rotate(-2deg); } }
.bl-puas { fill: none; stroke: #F2A93B; stroke-width: 4.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-spring); }
.bl-aleta { fill: #FFB347; transform-box: fill-box; animation: aletea 1.6s ease-in-out infinite alternate; }
.bl-aleta--i { transform-origin: 100% 50%; } .bl-aleta--d { transform-origin: 0% 50%; animation-delay: -.8s; }
@keyframes aletea { from { transform: scaleX(.75); } to { transform: scaleX(1.05); } }
.bl-cuerpo { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-spring); }
.bl-brillo { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; opacity: .6; }
.bl-boca { fill: none; stroke: #12324A; stroke-width: 2.2; stroke-linecap: round; }
.bl-ojo { transform-box: fill-box; transform-origin: center; animation: parpadea 6s infinite; }
@keyframes parpadea { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bl-pupila { transform: translate(var(--ox, 0px), var(--oy, 0px)); transition: transform .25s var(--ease-out); }
.door:is(:hover, :focus-visible) .bl-cuerpo, .is-centro .bl-cuerpo { transform: scale(1.07); }
.door:is(:hover, :focus-visible) .bl-puas, .is-centro .bl-puas { transform: scale(1.16); }
.bl-nota { opacity: 0; animation: nota 6s ease-in-out infinite; }
.bl-nota ellipse { fill: var(--bl-nota); }
.bl-nota path { fill: none; stroke: var(--bl-nota); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bl-notas > g:nth-child(2) .bl-nota { animation-delay: -2s; } .bl-notas > g:nth-child(3) .bl-nota { animation-delay: -4s; }
@keyframes nota { 0% { transform: translate(0, 6px) rotate(-8deg); opacity: 0; } 20% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translate(8px, -34px) rotate(10deg); opacity: 0; } }

/* ---------- Interior · Estela ---------- */
.es-bg-1 { stop-color: var(--es-bg1); } .es-bg-2 { stop-color: var(--es-bg2); }
.es-cono-1 { stop-color: var(--es-cono); } .es-cono-2 { stop-color: var(--es-cono); stop-opacity: 0; }
.es-arcos path { stroke: var(--es-linea); stroke-width: 1.2; }
.es-cono { animation: respira 8s ease-in-out infinite; }
.es-motas circle { fill: var(--es-motas); animation: titila 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.es-motas circle:nth-child(odd) { animation-delay: -2.8s; } .es-motas circle:nth-child(3n) { animation-delay: -4.4s; }
.es-peana-1 { stop-color: var(--es-peana1); } .es-peana-2 { stop-color: var(--es-peana2); }
.es-peana-cara { fill: var(--es-peana-cara); } .es-sombra { fill: var(--es-sombra); }
.es-vidrio { fill: var(--es-vidrio); stroke: var(--es-vidrio-borde); stroke-width: 1.4; }
.es-liq-1 { stop-color: var(--es-liq1); } .es-liq-2 { stop-color: var(--es-liq2); }
.es-nivel { stroke: #fff; stroke-opacity: .55; stroke-width: 1.2; }
.es-reflejo { fill: #fff; opacity: .55; }
.es-etiqueta { fill: var(--es-peana-cara); opacity: .92; } .es-etiqueta-linea { stroke: var(--es-metal2); stroke-width: 1; }
.es-metal-1 { stop-color: var(--es-metal1); } .es-metal-2 { stop-color: var(--es-metal2); }
.es-boquilla { fill: var(--es-metal2); }
/* El logotipo: degradado de tinta en claro y pastel en oscuro, como en la propia Estela */
.es-t0 { stop-color: var(--es-c0); } .es-t1 { stop-color: var(--es-c1); } .es-t2 { stop-color: var(--es-c2); } .es-t3 { stop-color: var(--es-c3); }
.es-logo-rastro { stroke: var(--es-borde); stroke-width: .8; vector-effect: non-scaling-stroke; }
.es-logo-brillo { opacity: .5; animation: aura 6s ease-in-out infinite; }
@keyframes aura { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
.es-astro { fill: var(--es-tinta); transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-spring); }
.es-astro-luz { fill: #fff; opacity: .35; }
.es-halo-1 { stop-color: var(--es-halo); } .es-halo-2 { stop-color: var(--es-halo); stop-opacity: 0; }
.es-halo { transform-box: fill-box; transform-origin: center; animation: respira 5s ease-in-out infinite; }
.es-bruma circle { opacity: 0; animation: esparce 5.2s ease-out infinite; }
.es-bruma .es-t0 { fill: var(--es-c0); } .es-bruma .es-t1 { fill: var(--es-c1); } .es-bruma .es-t2 { fill: var(--es-c2); } .es-bruma .es-t3 { fill: var(--es-c3); }
.es-bruma circle:nth-child(2) { animation-delay: -.65s; } .es-bruma circle:nth-child(3) { animation-delay: -1.3s; } .es-bruma circle:nth-child(4) { animation-delay: -1.95s; }
.es-bruma circle:nth-child(5) { animation-delay: -2.6s; } .es-bruma circle:nth-child(6) { animation-delay: -3.25s; } .es-bruma circle:nth-child(7) { animation-delay: -3.9s; } .es-bruma circle:nth-child(8) { animation-delay: -4.55s; }
@keyframes esparce { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .8; } 100% { transform: translate(10px, -30px); opacity: 0; } }
/* Al pasar por encima: se pulsa el frasco y la estela se vuelve a dibujar hasta encender el astro */
.es-rocio { fill: var(--es-rocio); opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; }
.es-pulsador { transform-box: fill-box; }
.door:is(:hover, :focus-visible) .es-pulsador, .is-centro .es-pulsador { animation: pulsa .5s ease-out; }
.door:is(:hover, :focus-visible) .es-rocio, .is-centro .es-rocio { animation: rocia 1.1s ease-out; }
.door:is(:hover, :focus-visible) .es-revela, .is-centro .es-revela { animation: revela 1.15s .12s cubic-bezier(.3, .6, .2, 1) both; }
.door:is(:hover, :focus-visible) .es-astro, .is-centro .es-astro { animation: enciende .7s 1s var(--ease-spring) both; }
.door:is(:hover, :focus-visible) .es-halo, .is-centro .es-halo { animation: destella 1.4s 1s ease-out both; }
@keyframes rocia { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes pulsa { 0%, 100% { transform: none; } 30% { transform: translateY(2.5px); } }
@keyframes revela { from { transform: translateX(-52px); } to { transform: none; } }
@keyframes enciende { 0% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1.08); opacity: 1; } }
@keyframes destella { 0% { opacity: .6; transform: scale(.7); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: .9; transform: scale(1); } }
.es-chispa { fill: var(--es-astro); animation: titila 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.es-chispa:nth-child(2) { animation-delay: -1.6s; } .es-chispa:nth-child(3) { animation-delay: -3.1s; }
.door[data-escena="estela"] .door__caption { color: var(--es-rotulo); text-shadow: none; }

/* Rótulo que aparece al pasar por encima (fase de la luna) */
.door__caption {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; text-align: center; padding-inline: 12px;
  font: 500 .66rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s;
  text-shadow: 0 1px 6px rgb(0 0 0 / .25);
}
.door:is(:hover, :focus-visible) .door__caption, .is-centro .door__caption { opacity: .95; transform: none; }

/* ---------- Interior · Logo (apps nuevas) ---------- */
.lg-bg-1 { stop-color: var(--lg-l1, #F4F1EC); } .lg-bg-2 { stop-color: var(--lg-l2, #D9D4CC); }
.lg-rings circle { stroke: var(--lg-ink-l, #1E1E1E); stroke-opacity: .12; stroke-width: 1.2; }
.lg-img { position: absolute; left: 50%; top: 40%; width: 42%; height: auto; transform: translate(-50%, -50%); z-index: 1; transition: transform .6s var(--ease-out); filter: drop-shadow(0 12px 20px rgb(0 0 0 / .18)); }
.door:hover .lg-img, .is-centro .lg-img { transform: translate(-50%, -54%) scale(1.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lg-bg-1 { stop-color: var(--lg-d1, #121418); }
  :root:not([data-theme="light"]) .lg-bg-2 { stop-color: var(--lg-d2, #2A2E36); }
  :root:not([data-theme="light"]) .lg-rings circle { stroke: var(--lg-ink-d, #ECECEC); }
}
:root[data-theme="dark"] .lg-bg-1 { stop-color: var(--lg-d1, #121418); }
:root[data-theme="dark"] .lg-bg-2 { stop-color: var(--lg-d2, #2A2E36); }
:root[data-theme="dark"] .lg-rings circle { stroke: var(--lg-ink-d, #ECECEC); }

/* ---------- Paginador del carrusel (solo móvil) ---------- */
.pager { display: none; }

/* ---------- Principios ---------- */
.principles { padding-bottom: clamp(72px, 10vw, 128px); scroll-margin-top: 80px; }
.principles__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 36px 32px;
}
.principles__grid li { display: grid; gap: 10px; align-content: start; min-width: 0; }
.principles__grid svg { width: 22px; height: 22px; fill: var(--clave); }
.principles__grid h3 { margin: 0; font: 600 1.06rem/1.3 var(--f-text); letter-spacing: -.005em; }
.principles__grid p { margin: 0; color: var(--tinta-2); font-size: .96rem; max-width: 38ch; }

/* ---------- Pie ---------- */
.foot { border-top: 1px solid var(--veta); background: var(--piedra-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
.foot__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-block: 56px 44px; }
.foot__brand p { margin: 16px 0 0; color: var(--tinta-2); max-width: 30ch; }
.foot h3 { margin: 0 0 14px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot li a { text-decoration: none; font-weight: 500; }
.foot li span { display: block; font: 400 .78rem/1.4 var(--f-mono); color: var(--tinta-2); }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--clave); text-underline-offset: 4px; }
.foot__about p { margin: 0; color: var(--tinta-2); max-width: 30ch; }
.gh { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta); font-weight: 600; text-decoration: none; white-space: nowrap; }
.gh svg { width: 16px; height: 16px; fill: currentColor; position: relative; top: 2px; }
.foot__base {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px 32px;
  padding-block: 18px 30px; border-top: 1px solid var(--veta);
  font: 400 .74rem/1.5 var(--f-mono); letter-spacing: .04em; color: var(--tinta-2);
}
.foot__base .legal { max-width: 70ch; text-transform: none; letter-spacing: 0; font-family: var(--f-text); font-size: .78rem; }
.foot__base .copy { text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }

/* ---------- Transición al cruzar una puerta ---------- */
.portal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 22px; pointer-events: none;
}
.portal__mark { width: clamp(84px, 16vw, 128px); height: auto; aspect-ratio: 1; display: block; opacity: 0; animation: portalSimbolo .55s .3s var(--ease-out) both; }
.portal__mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.portal__mark--marea .mr-ring { stroke: currentColor; }
.portal__mark--marea .mr-logo-wave { fill: var(--portal-wave, #E2727F); }
.portal__mark--marea .mr-moon-off { fill: none; }
.portal__mark--marea .mr-moon-lit { display: none; }
.portal__mark--refracta .rf-back { stroke: currentColor; }
.portal__mark--estela .es-marca-astro { fill: currentColor; }
.portal__mark--estela .es-logo-rastro { stroke-width: .6; }
.portal .wordmark { height: calc(clamp(26px, 5vw, 40px) * var(--wm-h, 1)); fill: currentColor; opacity: 0; animation: portalSimbolo .55s .42s var(--ease-out) both; }
.portal__name { font: 400 clamp(2rem, 6vw, 3.6rem)/1 var(--f-display); opacity: 0; animation: portalSimbolo .55s .42s var(--ease-out) both; }
@keyframes portalSimbolo { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Página 404 ---------- */
.e404 { min-height: calc(100vh - 69px); display: grid; align-content: center; padding-block: 64px; }
.e404__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.e404__arch { width: min(100%, 320px); justify-self: center; }
.e404__arch .door__frame { border-style: dashed; background: transparent; }
.e404__arch .door__window { display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--veta) 75%, transparent) 13px 14px); }
.e404__num { font: 400 clamp(3rem, 2rem + 4vw, 5rem)/1 var(--f-display); color: var(--tinta-2); letter-spacing: .04em; }
.e404 h1 { margin: 0 0 16px; font: 400 clamp(2.2rem, 1.4rem + 3.4vw, 4rem)/1.02 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.e404 p { margin: 0 0 28px; color: var(--tinta-2); max-width: 44ch; font-size: 1.05rem; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  background: var(--tinta); color: var(--piedra); text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgb(var(--sombra) / .7); }
.btn svg { width: 18px; height: 18px; }
.btn path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tableta ---------- */
@media (max-width: 1000px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__lead { grid-column: 1 / -1; max-width: 46ch; }
  .foot__in { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

/* ---------- Móvil: la arcada se desliza de lado ---------- */
@media (max-width: 699px) {
  .arcade-shell { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); }
  .arcade {
    --item: min(76vw, 330px);
    display: flex; gap: 18px; overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-block: 14px 8px;
  }
  .arcade::-webkit-scrollbar { display: none; }
  .arcade::before, .arcade::after { content: ""; flex: 0 0 calc(50% - var(--item) / 2 - 18px); }
  .arcade > li {
    flex: 0 0 var(--item); scroll-snap-align: center; scroll-snap-stop: always;
    transform: scale(calc(.92 + .08 * var(--foco, 1)));
    opacity: calc(.5 + .5 * var(--foco, 1));
    transition: none;
    animation: none;
  }
  .door:is(:hover, :focus-visible) .door__frame { transform: none; }
  .pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
  .pager button {
    border: 0; background: none; cursor: pointer; padding: 8px 10px; min-width: 44px; min-height: 40px;
    font: 400 1rem/1 var(--f-display); color: var(--tinta-2); position: relative; letter-spacing: .04em;
    transition: color .3s;
  }
  .pager button::after {
    content: ""; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px;
    background: var(--clave); transform: scaleX(0); transition: transform .35s var(--ease-out);
  }
  .pager button[aria-current="true"] { color: var(--clave-texto); }
  .pager button[aria-current="true"]::after { transform: scaleX(1); }
}
@media (max-width: 899px) {
  .e404__in { grid-template-columns: 1fr; text-align: center; }
  .e404 p { margin-inline: auto; }
  .e404__arch { width: min(70%, 260px); }
}
@media (min-width: 700px) {
  .arcade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .top__nav { display: none; }
  .brand__word { height: 13px; }
  .foot__in { grid-template-columns: 1fr; gap: 34px; }
  .section-head { margin-bottom: 18px; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .arcade { scroll-behavior: auto; }
  .rf-rings, .rf-spark, .rf-fan, .rf-glint, .rf-mark, .mr-stars circle, .mr-glints rect, .mr-wave, .mr-logo-wave, .status--live::before { animation: none !important; }
  .hero__title span, .hero__lead, .arcade > li, .door__key, .top .brand__mark .k { animation-duration: .01s !important; animation-delay: 0s !important; }
  .rf-mark__tilt { transform: none !important; }
  .bl-rayos polygon, .bl-alga, .bl-burbujas circle, .bl-pez, .bl-aleta, .bl-ojo, .bl-nota,
  .es-cono, .es-motas circle, .es-logo-brillo, .es-bruma circle, .es-rocio, .es-pulsador, .es-revela, .es-astro, .es-halo, .es-chispa { animation: none !important; }
  .bl-burbujas circle, .bl-nota { opacity: .75; }
  .es-bruma circle { opacity: .6; }
}
.e404 .eyebrow { font-size: .74rem; margin: 0 0 18px; color: var(--tinta-2); }
@media (max-width: 899px) { .e404 .eyebrow { justify-content: center; } }