:root {
  --bg: #ece7d9;
  --bg-soft: #f2eee3;
  --ink: #0f2a44;
  --blue: #4f9fd0;
  --yellow: #f0b400;
  --muted: rgba(15, 42, 68, 0.72);
  --outline: #fbf7ec;
  --sticker: #141009;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Fondo claro + mapa topográfico */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Capas de ambiente reutilizables (mapa + grano): la misma "receta" que usa el
   hero, para poder aplicarla también como fondo fijo en subpáginas. */
.ambient-map {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(ellipse 90% 74% at 50% 46%, rgba(236, 231, 217, 0) 0%, rgba(236, 231, 217, 0.72) 80%, var(--bg) 100%),
    image-set(url("./assets/mapa_asturias.webp") type("image/webp"), url("./assets/mapa_asturias.jpg") type("image/jpeg")) center / cover no-repeat;
  opacity: 0.4;
  filter: saturate(0.72) contrast(1.05);
  animation: mapdrift 110s ease-in-out infinite alternate;
}

.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Fondo fijo de subpágina: mismas capas, más tenues para que el contenido
   (formulario, texto legal) se lea sin esfuerzo. */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.page-bg .ambient-map { opacity: 0.15; }

/* Coordenadas y altitud, guiño al marco del logo */
.coord {
  position: absolute;
  top: 1.4rem;
  z-index: 1;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.coord--l { left: clamp(1rem, 4vw, 2rem); }
.coord--b {
  top: auto;
  left: clamp(1rem, 4vw, 2rem);
  bottom: 1.5rem;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
}

/* Velo suave solo tras el texto, para que el mapa no pelee con la lectura */
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -16% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 74% 86% at 50% 46%, rgba(236, 231, 217, 0.9), rgba(236, 231, 217, 0) 74%);
}

.kicker {
  margin: 0 0 1rem;
  font-size: clamp(0.78rem, 1.7vw, 1.1rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Título calcado al logo: condensada pesada, contorno azul marino,
   perfil crema, sombra desplazada y cada letra colocada a mano. */
.title {
  margin: 0;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.005em;
  font-size: clamp(2.4rem, 11vw, 8.5rem);
}

.title .ltr {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--c, var(--ink));
  -webkit-text-stroke: 0.02em var(--ink);
  paint-order: stroke fill;
  filter: drop-shadow(0.035em 0.04em 0 var(--sticker));
  animation: sway var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

/* El perfil crema va detrás, así queda por fuera del contorno marino */
.title .ltr::before {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  z-index: -1;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 0.075em var(--outline);
  paint-order: stroke fill;
}

.title .c-blue { --c: var(--blue); color: var(--blue); }
.title .c-ink { --c: var(--ink); color: var(--ink); }
.title .c-yellow { --c: var(--yellow); color: var(--yellow); }

/* Viento: vaivén horizontal + un punto de giro, desfase por letra */
@keyframes sway {
  0%, 100% {
    transform: translateY(var(--y, 0em)) translateX(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(calc(var(--y, 0em) - 0.035em)) translateX(0.06em) rotate(calc(var(--r, 0deg) + 1.4deg));
  }
}

@keyframes mapdrift {
  from { transform: translate3d(-1.2%, -0.8%, 0) scale(1.03); }
  to { transform: translate3d(1.2%, 0.8%, 0) scale(1.06); }
}

.subtitle {
  margin: 1.5rem auto 0.75rem;
  max-width: 46ch;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  font-weight: 500;
  text-wrap: balance;
}

/* Texto solo para lectores de pantalla (el subtítulo animado esconde las
   palabras visibles, así que el texto completo se ofrece aquí). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Subtítulo "tecleado": el texto se reserva en su sitio (visibility, sin
   reflow) y cada letra se revela en orden, como si se escribiera a mano. El
   cursor es la barra parpadeante de un editor de código. El efecto se monta
   siempre que haya JS (es un revelado de contenido, no un desplazamiento); con
   prefers-reduced-motion se apagan el fundido de cada letra y el parpadeo del
   cursor. Sin JS queda el texto plano de siempre. */
.typed-word {
  white-space: nowrap;
}

.typed-char {
  visibility: hidden;
}

.typed-char.is-typed {
  visibility: visible;
  animation: typein 0.12s ease-out;
}

@keyframes typein {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.type-caret {
  display: inline-block;
  width: 0.5ch;
  height: 1.05em;
  margin: 0 -0.6ch 0 0.1ch;
  vertical-align: -0.12em;
  background: var(--blue);
  animation: caret-blink 1.05s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.meta {
  margin: 0 auto;
  font-size: clamp(0.82rem, 1.7vw, 1.05rem);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* CTA centrado bajo subtítulo */
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

/* Sello institucional, discreto y fuera del eje del texto */
.hero-brand {
  position: absolute;
  right: clamp(1rem, 4vw, 2rem);
  bottom: 1.5rem;
  z-index: 1;
}

.uniovi-logo {
  display: block;
  height: clamp(34px, 4.4vw, 54px);
  width: auto;
  opacity: 0.9;
}

.hero-brand--text {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.cta {
  display: inline-block;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: clamp(0.7rem, 1.6vw, 0.8rem) clamp(1.6rem, 5vw, 2.2rem);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.cta:hover, button.cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

a.cta:active, button.cta:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

button.cta:disabled { opacity: 0.6; cursor: wait; }

/* Cabecera fina de subpágina: solo wordmark de vuelta a portada. Un poco más
   alta que antes para dar aire al logo por letras (26-28px). */
.site-header {
  padding: 1.15rem clamp(1rem, 4vw, 2rem);
  border-bottom: 2px solid var(--ink);
  background: var(--bg);
}

.site-header__brand {
  display: inline-block;
  text-decoration: none;
}

.site-header__brand:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Wordmark de cabecera: mismo componente de letras del hero (.title/.ltr),
   en variante compacta y sin animar (aquí es un logo, no el hero). */
.title--brand {
  display: inline-block;
  font-size: clamp(26px, 6vw, 28px);
  line-height: 1;
}

.title--brand .ltr { animation: none; }

/* Fallback en marino plano: solo para móviles muy estrechos, si ni el tamaño
   mínimo legible del logo por letras (26px) cabe cómodo en la franja. */
.site-header__brand-fallback { display: none; }

@media (max-width: 360px) {
  .title--brand { display: none; }
  .site-header__brand-fallback {
    display: inline-block;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
  }
}

/* Señal discreta de scroll al final del hero */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  transform: translateX(-50%);
  text-decoration: none;
}

.scroll-cue__arrow {
  width: 0.85rem;
  height: 0.85rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  animation: scrollcue 1.8s ease-in-out infinite;
}

.scroll-cue:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

@keyframes scrollcue {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(0.25rem, 0.25rem); }
}

/* Banda de sección: patrón reutilizable para FAQ y, más adelante,
   Sponsors/Ponentes (antetítulo + titular; cada banda añade lo suyo debajo) */
.band {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) 1.25rem;
}

.band-head { margin-bottom: 2rem; text-align: center; }

.band-kicker {
  margin: 0 0 0.6rem;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.band-title {
  margin: 0;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.05;
}

.band-text {
  margin: 0 auto 1.75rem;
  max-width: 46ch;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.band-cta { display: flex; justify-content: center; }

.faq-list { display: block; }

.faq { border-top: 1px solid rgba(15, 42, 68, 0.16); }
.faq:last-child { border-bottom: 1px solid rgba(15, 42, 68, 0.16); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

.faq[open] summary::after { content: "–"; }

.faq p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.faq a { color: var(--ink); font-weight: 600; }

/* /signup necesita más ancho que .legal para dejar sitio a las ilustraciones
   que flanquean la tarjeta; el título y la intro se quedan en ancho de lectura. */
main.signup { max-width: 1100px; }

.signup-intro { max-width: 720px; margin: 0 auto; }

/* Contenedor de referencia para las dos ilustraciones: la tarjeta define su
   altura (único hijo en flujo) y las ilustraciones se posicionan en % de esa
   altura, para no descolocarse cuando la tarjeta cambia de alto. */
.signup-flanked {
  position: relative;
}

/* Decorativas (Cruz de la Victoria / escanciador de sidra): cerca de su
   resolución nativa, nunca escaladas por encima. Escalonadas para que no se
   solapen: la cruz arranca a la altura del primer campo, el escanciador hacia
   la mitad-baja del formulario, aproximadamente donde termina la cruz. Sin
   sitio de sobra por debajo de 1100px, así que no compiten con el formulario
   en móvil/tablet. */
.signup-illustration {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
}

.signup-illustration--cruz {
  top: 2%;
  left: 4%;
  width: 160px;
}

.signup-illustration--escanciador {
  top: 42%;
  right: 4%;
  width: 110px;
}

@media (max-width: 1099px) {
  .signup-illustration { display: none; }
}

/* Móvil: no hay sitio para flanquear la tarjeta, así que las ilustraciones
   pasan a una fila decorativa justo encima, una en cada esquina superior, y la
   tarjeta ocupa el ancho completo debajo. */
@media (max-width: 740px) {
  .signup-flanked {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
  }

  .signup-illustration {
    position: static;
    display: block;
  }

  .signup-illustration--cruz { order: 1; width: 56px; }
  .signup-illustration--escanciador { order: 2; width: 42px; }

  .signup-card { order: 3; flex: 1 0 100%; }
}

/* Tarjeta del formulario de pre-inscripción (web/signup.html) */
.signup-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg-soft);
  border: 2px solid var(--ink);
  border-radius: 1rem;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: 6px 6px 0 rgba(15, 42, 68, 0.9);
  text-align: left;
}

.signup-card .cta { width: 100%; }

/* Honeypot: campo trampa para bots, invisible para personas */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Pie en una sola línea: créditos a la izquierda, contacto/legal a la derecha.
   Un borde superior fino lo separa del contenido sin competir con él. */
.footer {
  border-top: 1px solid rgba(15, 42, 68, 0.16);
  background: var(--bg);
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.footer p { margin: 0; }

.footer a { color: var(--ink); font-weight: 600; text-decoration: none; }

.footer a:hover,
.footer a:focus-visible { text-decoration: underline; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.footer-sep { color: var(--muted); }

@media (max-width: 560px) {
  .footer-inner { justify-content: center; text-align: center; }
}

/* Página legal (privacidad): mismo lenguaje visual, en formato de lectura */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.25rem clamp(3rem, 6vw, 4rem);
}

/* Título de subpágina: mismo tratamiento "pegatina" que el wordmark del hero
   (contorno marino + perfil crema + sombra desplazada), pero sin jitter ni
   flotación (es un título, no el logo) y en un solo color con acento amarillo. */
.page-title {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5rem;
  font-family: "Anton", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  color: var(--ink);
  -webkit-text-stroke: 0.02em var(--ink);
  paint-order: stroke fill;
  filter: drop-shadow(0.035em 0.04em 0 var(--sticker));
}

.page-title::before {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 0.075em var(--outline);
  paint-order: stroke fill;
}

.page-title::after {
  content: "";
  position: absolute;
  left: 0.02em;
  top: 100%;
  margin-top: 0.15em;
  width: 2.6em;
  height: 0.2em;
  background: var(--yellow);
}

.legal .legal-updated {
  margin: 0 0 2.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.legal h2 {
  margin: 2rem 0 0.75rem;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
}

.legal p, .legal li { line-height: 1.6; color: var(--muted); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal strong { color: var(--ink); }
.legal a { color: var(--ink); font-weight: 600; }

.form-desc { margin: 0 0 1.5rem; color: var(--muted); }

.field { display: block; margin-bottom: 1rem; }
.field > span:first-of-type { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; }
fieldset.field { border: none; padding: 0; }
fieldset.field legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.35rem; }

/* Asterisco de obligatoriedad: chip amarillo con texto marino (no gris).
   Texto en amarillo puro no da AA a este tamaño, así que el amarillo va de
   fondo y el marino de texto, como en el CTA. */
.req {
  display: inline-block;
  color: var(--ink);
  background: var(--yellow);
  font-weight: 700;
  font-size: 0.75em;
  line-height: 1;
  padding: 0.05em 0.35em;
  border-radius: 999px;
  vertical-align: middle;
}

.radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.radio-group.stacked { flex-direction: column; align-items: stretch; }
.radio-group label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: #fffdf6;
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.radio-group label:has(input:checked) { background: var(--yellow); }
.radio-group input[type="radio"] { accent-color: var(--ink); width: 1.05rem; height: 1.05rem; padding: 0; border: none; background: none; flex-shrink: 0; margin-top: 0.2rem; }
.opt-text { display: block; line-height: 1.4; }
.opt-text small { display: block; color: var(--muted); font-weight: 400; }

/* Combo con buscador (desplegable de carrera) */
.combo { position: relative; }
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #fffdf6;
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 4px 4px 0 rgba(15, 42, 68, 0.9);
}
.combo-list[hidden] { display: none; }
.combo-option {
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.combo-option:hover, .combo-option.active { background: var(--yellow); }
.combo-option[aria-selected="true"] { font-weight: 700; }
.combo-empty { padding: 0.5rem 0.65rem; color: var(--muted); font-size: 0.95rem; }
@media (prefers-reduced-motion: no-preference) {
  .combo-list { animation: comboIn 0.12s ease-out; }
  @keyframes comboIn { from { opacity: 0; transform: translateY(-4px); } }
}
.field input, .field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  background: #fffdf6;
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}

.field input:focus, .field select:focus {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1rem 0 1.25rem;
  font-size: 0.95rem;
}

.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); margin-top: 0.15rem; }

/* Bloque de consentimientos de /signup: tres casillas agrupadas (una
   obligatoria y dos opcionales) con un solo margen para el conjunto. */
.consents {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 1.25rem;
}

.consents .check { margin: 0; }

.consents .check small { color: var(--muted); font-weight: 400; }

.form-status { min-height: 1.4em; font-weight: 600; margin: 0.9rem 0 0.4rem; }
.form-status.ok { color: #0c6b3c; }
.form-status.err { color: #a31621; }

.form-alt { font-size: 0.9rem; color: var(--muted); margin: 0.4rem 0 0; }
.form-alt a { color: var(--ink); }

.hint { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--muted); font-weight: 400; }

/* Teléfono con prefijo */
.phone-row { display: flex; gap: 0.5rem; align-items: stretch; }
.phone-prefix {
  display: grid;
  place-items: center;
  padding: 0 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  background: var(--bg);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.phone-row input { min-width: 0; }

.form-success { text-align: center; padding: 1rem 0; }
.form-success h3 {
  margin: 0 0 0.75rem;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
}
.form-success p { color: var(--muted); margin: 0 0 1.5rem; line-height: 1.5; }
.form-success[hidden] { display: none; }

@media (max-width: 520px) {
  .coord { font-size: 0.64rem; letter-spacing: 0.22em; }
}

@media (max-width: 380px) {
  .kicker { font-size: 0.78rem; letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .title .ltr { animation: none; }
  .ambient-map { animation: none; }
  .scroll-cue__arrow { animation: none; }
  .typed-char.is-typed { animation: none; }
  .type-caret { animation: none; }
}

/* Pestaña en segundo plano: congelamos las animaciones infinitas.
   No cambia nada visible; ahorra CPU/GPU y batería. */
html.is-idle .title .ltr,
html.is-idle .type-caret,
html.is-idle .ambient-map { animation-play-state: paused; }