/* ============================================================================
   Sistema visual — Jhon Steven Alvarez Ruiz
   Paleta Paris, Texas. Escala modular 1.333 sobre base 16.
   Regla heredada del sistema de marca: ningún texto se apoya directamente
   sobre una capa en movimiento. Todo bloque de lectura descansa sobre un
   scrim traslúcido con filete. La animación vive detrás del scrim, fuera de
   la columna de texto, o en el ornamento. Nunca bajo una palabra.
   ========================================================================= */

:root {
  /* Paleta */
  --noche:      #0A0806;
  --noche-2:    #120D0A;
  --noche-3:    #140F0C;
  --azul:       #080B11;
  --ambar:      #E8A44C;
  --ambar-alto: #FFCE8A;
  --ambar-bajo: #8A5A2B;
  --verde:      #3FBF87;
  --verde-alto: #5BF0AE;
  --rojo:       #D4402C;
  --crema:      #FCF8F0;
  --crema-2:    #F2E9D8;
  --topo:       #C9BCA6;
  --topo-2:     #8E8272;
  --topo-3:     #7D7062;

  /* Superficies */
  --scrim:      rgba(18, 13, 10, 0.86);
  --scrim-alto: rgba(26, 19, 14, 0.92);
  --filete:     rgba(201, 188, 166, 0.14);
  --filete-2:   rgba(201, 188, 166, 0.28);

  /* Familias: serif para la afirmación, sans para la información */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans:  "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  /* Escala modular 1.333, base 16, redondeada a entero */
  --display:  clamp(3rem, 9vw, 5.75rem);   /* 92 */
  --title:    clamp(1.6rem, 3.6vw, 2.125rem); /* 34 */
  --subtitle: clamp(1.35rem, 2.4vw, 1.5625rem); /* 25 */
  --lead:     1.1875rem;                    /* 19 */
  --body:     1rem;                         /* 16 */
  --caption:  0.875rem;                     /* 14 */
  --micro:    0.75rem;                      /* 12 */

  /* Ritmo */
  --columna: 68ch;
  --ancho:   min(1180px, 92vw);
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  /* Curvas */
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --suave:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------- reinicio */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--noche);
  color: var(--crema);
  font: 400 var(--body)/1.72 var(--sans);
  letter-spacing: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--ambar); text-decoration: none; }

::selection { background: var(--ambar); color: var(--noche); }

/* ------------------------------------------------- fondo animado (capa 0) */
/* Vive detrás de absolutamente todo. Nunca hay texto apoyado sobre él sin
   scrim de por medio. */

#fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Horizonte: noche arriba, brasa abajo. */
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(232, 164, 76, 0.30) 0%, rgba(212, 64, 44, 0.10) 34%, transparent 66%),
    radial-gradient(90% 60% at 82% -12%, rgba(63, 191, 135, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--azul) 0%, var(--noche-2) 46%, var(--noche) 100%);
}

#lienzo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;   /* el canvas es un elemento reemplazado: sin esto se queda en 300x150 */
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

/* Grano: quita el bandeado de los degradados y da cuerpo a la imagen. */
#grano {
  position: fixed; inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  animation: granear 700ms steps(2, end) infinite;
}
@keyframes granear {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -1.5%); }
}

/* Halo que sigue al puntero. Ornamento: se atenúa sobre los bloques de
   lectura para no competir con el texto. */
#halo {
  position: fixed;
  width: 30rem; height: 30rem;
  margin: -15rem 0 0 -15rem;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 164, 76, 0.10) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 500ms var(--suave);
  will-change: transform;
}
body.puntero-fino #halo { opacity: 1; }
body.sobre-lectura #halo { opacity: 0.28; }

/* ------------------------------------------------------- estructura básica */

.envoltura { position: relative; z-index: 10; }

main { display: block; }

.franja {
  width: var(--ancho);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 9vh, 7rem);
}

.columna { max-width: var(--columna); }

/* ----------------------------------------------------------------- scrim */
/* La plancha traslúcida sobre la que descansa toda lectura. */

.scrim {
  position: relative;
  background: var(--scrim);
  border: 1px solid var(--filete);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  transition: border-color 600ms var(--suave), transform 600ms var(--salida);
}

/* Filete superior de luz: el borde alto capta la brasa del fondo. */
.scrim::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 164, 76, 0.55), transparent);
  opacity: 0.6;
}

.scrim:hover { border-color: var(--filete-2); }

/* ------------------------------------------------------------ tipografía */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; margin: 0; }

.nombre {
  font-size: var(--display);
  line-height: 0.94;
  letter-spacing: -0.038em;
  color: var(--crema);
  margin: 0;
}

/* El nombre se compone letra a letra. El desplazamiento es del glifo, no del
   fondo: no hay movimiento por debajo de la palabra. */
.nombre .g {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(2deg);
  filter: blur(6px);
  animation: entrar-glifo 900ms var(--salida) forwards;
  animation-delay: calc(var(--g) * 32ms);
}
.nombre .palabra { display: inline-block; white-space: nowrap; }
.nombre .esp { display: inline-block; width: 0.26em; }
@keyframes entrar-glifo {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Utilidades. Existen para que el marcado no lleve estilos sueltos: con una
   CSP estricta, un atributo style es una regla que el navegador descarta. */
.titulo.grande { font-size: var(--display); line-height: 1; letter-spacing: -0.035em; margin-bottom: 1.2rem; }
.titulo.media  { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1rem; }
.sep-s { margin-top: 1.4rem; }
.sep-m { margin-top: 2rem; }
.tenue { color: var(--topo-2); }
.heredado { color: inherit; }
.scrim.ancho { max-width: none; }
.scrim.medio { max-width: 52rem; }
.medida-corta { max-width: 22ch; }

h2.titulo {
  font-size: var(--title);
  letter-spacing: -0.024em;
  line-height: 1.12;
  color: var(--crema);
}

h3.subtitulo {
  font-size: var(--subtitle);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--crema-2);
}

.lead {
  font-size: var(--lead);
  line-height: 1.62;
  color: var(--crema-2);
  max-width: var(--columna);
}

p { margin: 0 0 1.1em; max-width: var(--columna); }
p:last-child { margin-bottom: 0; }

.pie-nota, figcaption, .cita {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--caption);
  color: var(--topo-2);
}

.micro {
  font-family: var(--sans);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.5em;   /* +6px sobre 12px */
  text-transform: uppercase;
  color: var(--ambar);
  display: block;
  margin-bottom: 1.25rem;
}
.micro.verde { color: var(--verde); }
.micro.topo  { color: var(--topo-2); }

.rotulo {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 2.25rem;
  padding: 1.15rem 1.75rem 1.35rem;
  background: var(--scrim);
  border: 1px solid var(--filete);
  border-left: 2px solid var(--ambar);
  border-radius: 3px;
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  transition: border-color 600ms var(--suave);
}
.rotulo:hover { border-color: var(--filete-2); }
.rotulo .micro { margin-bottom: 0.55rem; }
.rotulo h2 { margin: 0; }

b, strong { color: var(--crema); font-weight: 600; }
code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--verde-alto);
  background: rgba(63, 191, 135, 0.09);
  padding: 0.1em 0.38em;
  border-radius: 2px;
}

/* Regla que se dibuja al entrar en cuadro. Ornamento, fuera de la palabra. */
.regla {
  height: 1px;
  border: 0;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0;
  background: linear-gradient(90deg, var(--ambar-bajo), var(--filete) 42%, transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.4s var(--salida);
}
.visible .regla, .regla.visible { transform: scaleX(1); }

/* ------------------------------------------------------------ navegación */

.barra {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.90), rgba(10, 8, 6, 0.62));
  border-bottom: 1px solid var(--filete);
  transition: background 500ms var(--suave), border-color 500ms var(--suave);
}
.barra.encogida { background: rgba(10, 8, 6, 0.95); border-bottom-color: var(--filete-2); }

.barra-caja {
  width: var(--ancho);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  min-height: 4.25rem;
  flex-wrap: wrap;
}

.marca {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  color: var(--crema);
  white-space: nowrap;
  view-transition-name: marca;
}
.marca .h { color: var(--ambar); }

nav.menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.6rem);
  position: relative;
  flex-wrap: wrap;
}

nav.menu a {
  position: relative;
  font-size: var(--caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--topo);
  padding: 0.45rem 0.15rem;
  transition: color 320ms var(--suave);
}
nav.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: var(--ambar);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--salida);
}
nav.menu a:hover, nav.menu a:focus-visible { color: var(--crema); }
nav.menu a:hover::after, nav.menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
nav.menu a.activo { color: var(--ambar); }
nav.menu a.activo::after { transform: scaleX(1); }

/* --------------------------------------------------------------- portada */

.portada {
  position: relative;
  min-height: calc(100svh - 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  width: var(--ancho);
  margin-inline: auto;
  padding-block: clamp(3rem, 10vh, 6rem);
}
@media (max-width: 60rem) {
  .portada { grid-template-columns: 1fr; }
  .retrato { justify-self: start; max-width: 14rem; order: -1; }
  .retrato figcaption { text-align: left; }
}

.portada-caja { max-width: 46rem; }

/* El retrato entra como una placa más: filete, plancha y la brasa en el borde
   alto. No lleva texto encima, así que puede respirar sobre el fondo. */
.retrato {
  margin: 0;
  justify-self: end;
  max-width: 20rem;
  width: 100%;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.98);
  animation: entrar-retrato 1.1s var(--salida) 0.55s forwards;
}
.retrato img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--filete-2);
  filter: saturate(0.88) contrast(1.04);
  transition: filter 700ms var(--suave), border-color 700ms var(--suave), transform 900ms var(--salida);
}
.retrato:hover img {
  filter: saturate(1) contrast(1);
  border-color: rgba(232, 164, 76, 0.5);
  transform: translateY(-4px);
}
.retrato figcaption {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--caption);
  color: var(--topo-2);
  text-align: right;
}
@keyframes entrar-retrato { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .retrato { opacity: 1; transform: none; } }

.titular {
  font-family: var(--serif);
  font-size: var(--subtitle);
  font-weight: 600;
  color: var(--ambar);
  letter-spacing: -0.01em;
  margin: 1.6rem 0 0.4rem;
}
.subtitular {
  font-size: var(--lead);
  color: var(--topo);
  margin: 0;
}

.lugar {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  font-size: var(--caption);
  color: var(--topo-2);
}
.lugar::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(63, 191, 135, 0.65);
  animation: latir 2.6s ease-out infinite;
}
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(63, 191, 135, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(63, 191, 135, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 191, 135, 0); }
}

/* ----------------------------------------------------------------- botón */

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema);
  background: transparent;
  border: 1px solid var(--filete-2);
  border-radius: 2px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: color 360ms var(--suave), border-color 360ms var(--suave), transform 360ms var(--salida);
}
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ambar);
  transform: translateY(101%);
  transition: transform 480ms var(--salida);
  z-index: -1;
}
.boton:hover, .boton:focus-visible {
  color: var(--noche);
  border-color: var(--ambar);
  transform: translateY(-2px);
}
.boton:hover::before, .boton:focus-visible::before { transform: translateY(0); }
.boton span { position: relative; z-index: 1; }
.boton.primario { border-color: var(--ambar); color: var(--ambar); }
.boton.primario:hover, .boton.primario:focus-visible { color: var(--noche); }

/* --------------------------------------------------------------- métricas */

.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--filete);
  border: 1px solid var(--filete);
  border-radius: 3px;
  overflow: hidden;
}
.metrica {
  background: var(--scrim);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1.75rem 1.5rem;
  transition: background 480ms var(--suave);
}
.metrica:hover { background: var(--scrim-alto); }
.metrica .cifra {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.metrica .etiqueta {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--caption);
  color: var(--crema-2);
  line-height: 1.4;
}
.metrica .nota {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--micro);
  color: var(--topo-2);
}

/* ---------------------------------------------------------------- fichas */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1.25rem;
}

.ficha {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--scrim);
  border: 1px solid var(--filete);
  border-radius: 3px;
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  transition: transform 620ms var(--salida), border-color 480ms var(--suave), box-shadow 620ms var(--salida);
}
a.ficha { color: inherit; }
.ficha:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 164, 76, 0.42);
  box-shadow: 0 22px 60px -28px rgba(232, 164, 76, 0.42);
}
.ficha h3 { font-size: var(--subtitle); font-weight: 600; letter-spacing: -0.012em; color: var(--crema); }
.ficha p { font-size: var(--body); color: var(--topo); margin: 0; }
.cifras-sueltas {
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--verde);
  margin-top: 1rem;
}

.ficha .cifras {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.02em;
  color: var(--verde);
  margin-top: auto;
  padding-top: 0.4rem;
}

.rejilla.duo { grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.etiquetas span {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--topo-2);
  border: 1px solid var(--filete);
  border-radius: 2px;
  padding: 0.22rem 0.55rem;
}

/* La flecha del enlace avanza al pasar el puntero. */
.mas {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ambar);
}
.mas i { display: inline-block; font-style: normal; transition: transform 420ms var(--salida); }
.ficha:hover .mas i, .mas:hover i { transform: translateX(6px); }

/* -------------------------------------------------------- línea temporal */

.linea { position: relative; padding-left: 2.25rem; }
.linea::before {
  content: "";
  position: absolute;
  left: 0.45rem; top: 0.6rem; bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--ambar), var(--filete) 40%, transparent);
}

.hito { position: relative; padding-bottom: 2.5rem; }
.hito:last-child { padding-bottom: 0; }
.hito::before {
  content: "";
  position: absolute;
  left: -2.25rem; top: 0.62rem;
  width: 9px; height: 9px;
  margin-left: 0.05rem;
  border-radius: 50%;
  background: var(--noche);
  border: 1px solid var(--ambar);
  transition: background 420ms var(--suave), box-shadow 420ms var(--suave);
}
.hito:hover::before { background: var(--ambar); box-shadow: 0 0 0 5px rgba(232, 164, 76, 0.16); }

.hito .fecha {
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.08em;
  color: var(--verde);
  text-transform: uppercase;
}
.hito h3 { margin: 0.4rem 0 0.15rem; font-size: var(--subtitle); font-weight: 600; color: var(--crema); }
.hito .donde { font-size: var(--body); color: var(--ambar); }
.hito ul { margin: 0.85rem 0 0; padding-left: 1.1rem; }
.hito li { margin-bottom: 0.5rem; color: var(--topo); max-width: var(--columna); }
.hito .donde, .hito > p { max-width: var(--columna); }
.hito .nota-hito { margin-top: 0.7rem; color: var(--topo); }
.hito li::marker { color: var(--ambar-bajo); }

/* ------------------------------------------------------------ listas 2col */

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li {
  display: flex;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--filete);
  transition: padding-left 420ms var(--salida), border-color 420ms var(--suave);
}
.lista-limpia li:hover { padding-left: 0.6rem; border-color: var(--filete-2); }
.lista-limpia li:last-child { border-bottom: 0; }
.lista-limpia .qual { flex: 1; color: var(--crema-2); }
.lista-limpia .emisor { color: var(--topo-2); font-size: var(--caption); }
.lista-limpia .cuando {
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--verde);
  white-space: nowrap;
  padding-top: 0.2rem;
}

/* ------------------------------------------------------------- epígrafe */

.epigrafe { text-align: center; padding-block: clamp(3rem, 8vh, 5rem); }
.epigrafe .plancha {
  display: inline-block;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  background: var(--scrim);
  border: 1px solid var(--filete);
  border-radius: 3px;
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}
.epigrafe q {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--subtitle);
  line-height: 1.45;
  color: var(--crema-2);
  max-width: 34ch;
  margin-inline: auto;
  quotes: "«" "»";
}
.epigrafe .fuente {
  display: block;
  margin-top: 1.1rem;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--topo-2);
}

/* ------------------------------------------------------------------- pie */

footer.pie {
  border-top: 1px solid var(--filete);
  background: rgba(8, 6, 5, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  margin-top: clamp(3rem, 8vh, 6rem);
}
.pie-caja {
  width: var(--ancho);
  margin-inline: auto;
  padding-block: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
}
.pie h4 {
  font-family: var(--sans);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--topo-2);
  margin-bottom: 0.9rem;
}
.pie a { display: block; color: var(--topo); font-size: var(--caption); padding: 0.28rem 0; transition: color 300ms var(--suave), transform 300ms var(--salida); }
.pie a:hover { color: var(--ambar); transform: translateX(4px); }
.pie .firma {
  width: var(--ancho);
  margin-inline: auto;
  padding-bottom: 2.5rem;
  font-size: var(--micro);
  color: var(--topo-3);
  border-top: 1px solid var(--filete);
  padding-top: 1.5rem;
}

/* ------------------------------------------------------ puerta de entrada */
/* El navegador exige un gesto antes de sonar. La puerta convierte esa
   exigencia técnica en el primer momento de la pieza. */

#puerta {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 112%, rgba(232, 164, 76, 0.20), transparent 60%), var(--noche);
  transition: opacity 1100ms var(--suave), visibility 1100ms;
}
#puerta.abierta { opacity: 0; visibility: hidden; pointer-events: none; }

.puerta-caja { text-align: center; padding: 2rem; max-width: 40rem; }
.puerta-caja .nombre { font-size: clamp(2.4rem, 7.5vw, 4.5rem); }
.puerta-caja .pie-nota { margin-top: 1.6rem; }

.puerta-acciones {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
  margin-top: 2.5rem;
  opacity: 0;
  animation: subir 900ms var(--salida) 1.15s forwards;
}
@keyframes subir { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- mando de audio */

#mando {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.95rem;
  background: var(--scrim-alto);
  border: 1px solid var(--filete);
  border-radius: 999px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: pointer;
  color: var(--topo);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 400ms var(--suave), color 400ms var(--suave), transform 500ms var(--salida);
}
#mando:hover { border-color: var(--ambar); color: var(--crema); transform: translateY(-2px); }

.onda { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.onda i {
  display: block;
  width: 2px;
  height: 3px;
  background: var(--topo-3);
  transition: background 400ms var(--suave);
}
#mando.sonando .onda i {
  background: var(--ambar);
  animation: oscilar 900ms ease-in-out infinite alternate;
}
#mando.sonando .onda i:nth-child(2) { animation-delay: 130ms; }
#mando.sonando .onda i:nth-child(3) { animation-delay: 260ms; }
#mando.sonando .onda i:nth-child(4) { animation-delay: 390ms; }
@keyframes oscilar { from { height: 3px; } to { height: 14px; } }

#mando .obra { white-space: nowrap; }
@media (max-width: 34rem) { #mando .obra { display: none; } }

/* ------------------------------------------------- revelado al desplazar */
/* El bloque entra una vez y se queda. El desplazamiento ocurre antes de que
   el texto sea legible, no mientras se lee. */

.revelar {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 900ms var(--salida) calc(var(--i, 0) * 90ms),
    transform 900ms var(--salida) calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; }

/* ------------------------------------------------ transiciones de página */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: desvanecer-fuera 320ms var(--suave) both; }
::view-transition-new(root) { animation: desvanecer-dentro 480ms var(--salida) both; }
@keyframes desvanecer-fuera { to { opacity: 0; transform: translateY(-0.75rem); } }
@keyframes desvanecer-dentro { from { opacity: 0; transform: translateY(1.25rem); } }

/* ------------------------------------------------------ barra de avance */

#avance {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--ambar), var(--verde));
  pointer-events: none;
}

/* ------------------------------------------------------------ accesible */

.saltar {
  position: absolute;
  left: -9999px;
  z-index: 300;
  background: var(--ambar);
  color: var(--noche);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
}
.saltar:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* ------------------------------------------------- movimiento reducido */
/* Quien pide menos movimiento recibe la página entera, quieta. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
  .nombre .g { opacity: 1; transform: none; filter: none; }
  .regla { transform: scaleX(1); }
  #lienzo, #grano, #halo { display: none; }
  .puerta-acciones { opacity: 1; }
}