/*
  Save the date de Juliana y Juan Pablo (versión 2).
  Los colores se declaran solo en :root. El resto del archivo usa las variables; los tonos
  derivados salen de color-mix() sobre la paleta del brief. El globo (canvas) lee --papel,
  --tinta, --terracota, --oliva y --luz-globo con getComputedStyle.

  Orden: tokens, base, sobre, cabecera, barra de capítulos, capítulos (inicio, viaje, fecha),
  momento, sin JavaScript, escritorio y movimiento reducido.
*/

:root {
  /* Paleta del brief («Terracota y oliva» con «Ciruela y oliva») */
  --papel: #F2EDDF;
  --papel-2: #F0EBD8;
  --tinta: #4A1C40;
  --terracota: #C4663A;
  --oxido: #A04B2A;
  --oliva: #6B6B3A;
  --salvia: #8A9E88;
  --burdeos: #7C2036;
  --cobre: #B5703A;

  /* Derivados. Contraste medido sobre --papel: tinta 11,7:1; tinta-suave 5,8:1; oxido 5,1:1;
     oliva 4,7:1. La terracota (3,4:1) queda para texto de 24 px o más y para decoración. */
  --tinta-suave: color-mix(in srgb, var(--tinta) 75%, var(--papel));
  --tinta-velo: color-mix(in srgb, var(--tinta) 7%, transparent);
  --sombra-corta: color-mix(in srgb, var(--tinta) 18%, transparent);
  --sombra-larga: color-mix(in srgb, var(--tinta) 13%, transparent);
  --linea: color-mix(in srgb, var(--oliva) 42%, transparent);
  --linea-tenue: color-mix(in srgb, var(--oliva) 22%, transparent);
  --linea-velada: color-mix(in srgb, var(--oliva) 8%, transparent);
  --salvia-velo: color-mix(in srgb, var(--salvia) 40%, transparent);
  --papel-hondo: color-mix(in srgb, var(--papel-2) 90%, var(--tinta));
  --papel-claro: color-mix(in srgb, var(--papel) 70%, transparent);
  --papel-velo: color-mix(in srgb, var(--papel) 62%, transparent);
  --burdeos-hoja: color-mix(in srgb, var(--burdeos) 80%, var(--papel));
  --cobre-luz: color-mix(in srgb, var(--cobre) 52%, var(--papel));
  --oxido-hondo: color-mix(in srgb, var(--oxido) 66%, var(--tinta));

  /* Sobre fondos oscuros: crema y sus atenuados, y la terracota aclarada para el guion. */
  --crema: var(--papel);
  --crema-suave: color-mix(in srgb, var(--papel) 80%, transparent);
  --crema-media: color-mix(in srgb, var(--papel) 60%, transparent);
  --crema-tenue: color-mix(in srgb, var(--papel) 42%, transparent);
  --terracota-clara: color-mix(in srgb, var(--terracota) 52%, var(--papel));
  --tinta-honda: color-mix(in srgb, var(--tinta) 86%, var(--oliva));
  --inicio-tono: color-mix(in srgb, var(--tinta) 62%, var(--oliva));

  /* Brillo del globo: solo se mezcla con --papel para el lado iluminado de la esfera. */
  --luz-globo: #FFFFFF;

  /* Hojas de olivo: relleno y trazo por defecto (cada uso puede cambiarlos) */
  --hoja-relleno: var(--salvia-velo);
  --hoja-trazo: var(--oliva);
  --hoja-vena: var(--linea);
  --aceituna: var(--tinta);
  --aceituna-brillo: .22;

  /* Tipografía */
  --f-display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --f-texto: 'Lora', Georgia, serif;
  --f-guion: 'Great Vibes', 'Snell Roundhand', cursive;
  --versalita: .75rem;

  /* Movimiento: curvas y duraciones. app.js lee las de la apertura desde aquí. */
  --ease-largo: cubic-bezier(.2, .7, .1, 1);
  --ease-solapa: cubic-bezier(.5, .05, .22, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --dur-corta: 240ms;
  --dur-media: 520ms;
  --dur-panel: 760ms;
  --dur-latido: 2800ms;
  --dur-anillo: 2200ms;
  --apertura-lacre: 480ms;
  --apertura-solapa: 760ms;
  --apertura-carta: 680ms;
  --apertura-retiro: 620ms;
  --apertura-cubrir: 760ms;
  --apertura-fundido: 320ms;
  --apertura-reducida: 420ms;

  /* Medidas. --barra-alto lo actualiza app.js con la altura real de la barra. */
  --margen: 16px;
  --toque: 44px;
  --cabecera-alto: calc(64px + env(safe-area-inset-top));
  --barra-alto: calc(68px + env(safe-area-inset-bottom));
  --barra-base: var(--barra-alto);
  --textos-alto: 84px;

  /* Tono de la cabecera y la barra: tinta sobre papel, crema sobre fondos oscuros. */
  --tono: var(--tinta);
  --tono-suave: var(--tinta-suave);
  --tono-tenue: var(--linea);

  color-scheme: light;
}

/* Sombra suave para leer crema sobre una foto o un video claro. */
:root {
  --sombra-texto: 0 1px 14px color-mix(in srgb, var(--tinta) 55%, transparent), 0 0 2px color-mix(in srgb, var(--tinta) 30%, transparent);
}

:root[data-tono='oscuro'] {
  --tono: var(--crema);
  --tono-suave: var(--crema-suave);
  --tono-tenue: var(--crema-tenue);
}

/* ------------------------------------------------------------------ Base */

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

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--papel);
  color: var(--tinta);
  font: 400 1.125rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Grano de papel: ruido fractal en SVG, encima de todo y sin recibir toques. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .11 0 0 0 0 .25 0 0 0 -1.9 1.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: .2;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Piezas de los símbolos SVG */
.hoja {
  fill: var(--hoja-relleno);
  stroke: var(--hoja-trazo);
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.vena {
  fill: none;
  stroke: var(--hoja-vena);
  stroke-width: .8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.tallo {
  fill: none;
  stroke: var(--hoja-trazo);
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.aceituna {
  fill: var(--aceituna);
}

.aceituna-luz {
  fill: var(--papel);
  opacity: var(--aceituna-brillo);
}

.forro {
  --hoja-relleno: var(--burdeos-hoja);
  --hoja-trazo: transparent;
  --hoja-vena: transparent;
}

.parada-cobre-luz { stop-color: var(--cobre-luz); }
.parada-cobre { stop-color: var(--cobre); }
.parada-terracota { stop-color: var(--terracota); }
.parada-oxido { stop-color: var(--oxido); }
.parada-papel { stop-color: var(--papel); }
.parada-papel-2 { stop-color: var(--papel-2); }
.parada-velo-0 { stop-color: var(--tinta); stop-opacity: 0; }
.parada-velo-1 { stop-color: var(--tinta); stop-opacity: .07; }

.sello__base { fill: var(--oxido-hondo); }
.sello__aro-luz { fill: none; stroke: var(--cobre-luz); stroke-width: 1.3; opacity: .75; }
.sello__aro-sombra { fill: none; stroke: var(--oxido-hondo); stroke-width: 1.3; opacity: .8; }
.sello__jotas-sombra { fill: var(--oxido-hondo); }
.sello__jotas-luz { fill: var(--cobre-luz); }
.sello__jotas { fill: var(--terracota); }

/* Versalitas: rótulos cortos en Lora 600 con interletrado amplio. */
.versalitas,
.inicio__dato,
.boton-borde,
.barra__capitulo,
.etiqueta,
.momento__dato,
.cuenta__rotulo,
.fecha__ciudad {
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: var(--versalita);
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Botón de borde fino («Explorar», «Agregar al calendario») */
.boton-borde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 168px;
  min-height: 48px;
  padding: 0 26px 0 calc(26px + .16em);
  border: 1px solid currentColor;
  border-radius: 1px;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--ease-suave), color var(--dur-corta) var(--ease-suave);
}

/* ------------------------------------------------------------------ Sobre */

.escena {
  display: none;
}

.js .escena {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--margen);
  overflow: hidden;
  background-color: var(--papel);
  touch-action: pinch-zoom;
  overscroll-behavior: contain;
}

.js .escena[hidden] {
  display: none;
}

.js[data-estado='cerrado'],
.js[data-estado='abriendo'] {
  overflow: hidden;
}

.escena__marco {
  display: grid;
  justify-items: center;
  gap: clamp(40px, 8svh, 72px);
  width: 100%;
  margin-top: -3svh;
}

.sobre {
  position: relative;
  width: min(86vw, 480px, 56svh);
  aspect-ratio: 142 / 100;
  perspective: 1100px;
  cursor: pointer;
}

.sobre > * {
  position: absolute;
}

.sobre__rama {
  z-index: 0;
  width: 74%;
  aspect-ratio: 320 / 140;
  overflow: visible;
  pointer-events: none;
}

.sobre__rama--a {
  left: -36%;
  top: -31%;
  transform: scaleX(-1) rotate(-12deg);
}

.sobre__rama--b {
  right: -35%;
  bottom: -30%;
  transform: scaleY(-1) rotate(-10deg);
}

.sobre__fondo,
.sobre__bolsillo {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sobre__fondo {
  z-index: 1;
  filter: drop-shadow(0 22px 30px var(--sombra-larga)) drop-shadow(0 3px 5px var(--sombra-corta));
}

.papel-hondo { fill: var(--papel-hondo); }
.papel-sobre { fill: var(--papel-2); }
.forro-color { fill: var(--burdeos); }
.sombra-pliegue { fill: var(--sombra-corta); }
.sombra-solapa { fill: var(--sombra-corta); }

.forro-filo {
  fill: none;
  stroke: var(--burdeos-hoja);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}

.pliegue-filo,
.solapa-filo {
  fill: none;
  stroke: var(--papel-claro);
  stroke-width: .5;
  vector-effect: non-scaling-stroke;
}

.sobre__carta {
  z-index: 2;
  left: 5.5%;
  right: 5.5%;
  top: 6%;
  height: 88%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4%;
  padding-top: 7%;
  border-radius: 2px;
  background-color: var(--papel-2);
  box-shadow: 0 0 0 1px var(--linea-tenue), 0 2px 6px var(--tinta-velo);
}

.carta__arco {
  width: 26%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border-radius: 999px 999px 2px 2px;
  background-color: var(--salvia);
}

.carta__monograma {
  width: 56%;
  fill: var(--papel);
}

/* En óxido y no en terracota: a este tamaño la terracota no llega a 4,5:1 sobre --papel-2. */
.carta__guion {
  font: 400 clamp(1rem, 5vw, 1.45rem)/1 var(--f-guion);
  color: var(--oxido);
}

.sobre__bolsillo {
  z-index: 3;
}

.sobre__solapa {
  z-index: 4;
  left: 0;
  top: 0;
  width: 100%;
  height: 64%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}

.solapa__cara {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.solapa__cara svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.solapa__cara--dentro {
  transform: rotateX(180deg);
}

/* El lacre: un botón redondo en la punta de la solapa. */
.lacre {
  z-index: 5;
  left: 50%;
  top: 59%;
  width: clamp(76px, 22vw, 96px);
  aspect-ratio: 1;
  translate: -50% -50%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  filter: drop-shadow(0 3px 3px var(--sombra-corta));
}

.lacre svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lacre__mitad {
  visibility: hidden;
}

.lacre__mitad--a {
  clip-path: polygon(0 0, 53% 0, 47.5% 19%, 55% 38%, 45.5% 57%, 53.5% 78%, 48.5% 100%, 0 100%);
}

.lacre__mitad--b {
  clip-path: polygon(53% 0, 100% 0, 100% 100%, 48.5% 100%, 53.5% 78%, 45.5% 57%, 55% 38%, 47.5% 19%);
}

.lacre.partido .lacre__entero {
  visibility: hidden;
}

.lacre.partido .lacre__mitad {
  visibility: visible;
}

/* Anillo que late alrededor del lacre mientras el sobre está cerrado. */
.lacre::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--terracota);
  opacity: 0;
  animation: latido var(--dur-latido) var(--ease-suave) 900ms infinite;
}

.lacre.partido::before {
  animation: none;
  opacity: 0;
}

.lacre:focus-visible {
  outline-offset: 10px;
  border-radius: 50%;
}

@keyframes latido {
  0% { transform: scale(.9); opacity: 0; }
  25% { opacity: .55; }
  100% { transform: scale(1.4); opacity: 0; }
}

.escena__abrir {
  padding-left: .34em;
  font: 600 .8125rem/1 var(--f-texto);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ Cabecera */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px var(--margen) 0;
  color: var(--tono);
}

.js .cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  height: var(--cabecera-alto);
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
  transition: color var(--dur-panel) var(--ease-suave), opacity var(--dur-media) var(--ease-suave);
}

.cabecera__monograma {
  width: 30px;
  height: 30px;
  flex: none;
  fill: currentColor;
}

.cabecera__nombres {
  font: 500 1.0625rem/1 var(--f-display);
  letter-spacing: .01em;
  white-space: nowrap;
}

.cabecera__y {
  font-style: italic;
  font-weight: 400;
}

.cabecera__barra {
  width: 1px;
  height: 22px;
  flex: none;
  background-color: var(--tono-tenue);
}

.cabecera__guion {
  font: italic 400 .875rem/1 var(--f-texto);
  letter-spacing: .02em;
  color: var(--tono-suave);
  white-space: nowrap;
}

/* En el recorrido el globo se acerca hasta llenar la pantalla: la cabecera se retira, como en
   los momentos. */
:root[data-estado='cerrado'] .cabecera,
:root[data-estado='abriendo'] .cabecera,
:root[data-momento] .cabecera,
:root[data-recorrido] .cabecera {
  opacity: 0;
}

/* Al tocar una etiqueta, la cabecera se va cuando el globo ya viene acercándose (el primer valor es
   el del color y el segundo el de la opacidad). */
:root[data-recorrido] .cabecera {
  transition-delay: 0s, 500ms;
}

/* ------------------------------------------------------------------ Barra de capítulos */

.barra {
  display: none;
}

.js .barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  padding: 2px var(--margen) max(12px, env(safe-area-inset-bottom));
  color: var(--tono);
  transition: color var(--dur-panel) var(--ease-suave), opacity var(--dur-media) var(--ease-suave);
}

/* Sobre papel, un fundido detrás de la barra para que el globo y el texto pasen por debajo sin
   chocar con los rótulos. Sobre fondos oscuros no hace falta. */
.js .barra::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -32px;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--papel) 42%);
  transition: opacity var(--dur-panel) var(--ease-suave);
}

:root[data-tono='oscuro'] .barra::before {
  opacity: 0;
}

/* Al abrir o cerrar un momento, el fundido se va o vuelve rápido para no dejar una franja lechosa
   sobre el borde del círculo que crece. */
:root[data-momento] .barra::before {
  transition-duration: var(--dur-corta);
}

:root[data-estado='cerrado'] .barra,
:root[data-estado='abriendo'] .barra {
  opacity: 0;
}

.barra__capitulos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra__capitulos li:nth-child(2) {
  justify-self: center;
}

.barra__capitulos li:nth-child(3) {
  justify-self: end;
}

.barra__capitulo {
  display: flex;
  align-items: center;
  min-height: var(--toque);
  font-size: .75rem;
  letter-spacing: .12em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tono-suave);
  transition: color var(--dur-corta) var(--ease-suave);
}

.barra__capitulos li:first-child .barra__capitulo {
  padding-right: 8px;
}

.barra__capitulos li:last-child .barra__capitulo {
  padding-left: 8px;
}

.barra__capitulo[aria-current='step'] {
  color: var(--tono);
}

.barra__cuenta:not(:empty) {
  margin-left: .45em;
}

/* Línea de progreso con un punto bajo cada capítulo. --avance va de 0 a 1. */
.barra__linea {
  position: relative;
  height: 9px;
  margin: 0 2px;
}

.barra__linea::before,
.barra__avance {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  height: 1px;
}

.barra__linea::before {
  right: 0;
  background-color: var(--tono-tenue);
}

.barra__avance {
  width: calc(var(--avance, 0) * 100%);
  background-color: currentColor;
  transition: width var(--dur-panel) var(--ease-largo);
}

.barra__punto {
  position: absolute;
  top: 1.5px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background-color: currentColor;
  transition: background-color var(--dur-corta) var(--ease-suave), border-color var(--dur-corta) var(--ease-suave);
}

.barra__punto:nth-of-type(2) { left: 0; }
.barra__punto:nth-of-type(3) { left: 50%; }
.barra__punto:nth-of-type(4) { left: 100%; }

.barra__punto.pendiente {
  border-color: var(--tono-suave);
  background-color: var(--papel);
}

:root[data-tono='oscuro'] .barra__punto.pendiente {
  background-color: var(--tinta);
}

/* Fila de controles: sonido fuera de los momentos; en un momento, sonido, anterior, pausa,
   siguiente y «Saltar». */
.barra__controles {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
}

.barra__controles--solo {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.control {
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.control svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control--sonido {
  justify-self: end;
  margin-right: 10px;
}

.barra__controles--solo .control--sonido {
  justify-self: center;
  margin: 0;
}

.control[aria-pressed='false'] .control__ondas,
.control[aria-pressed='true'] .control__silencio {
  display: none;
}

/* Pausa dentro de un círculo fino cuyo borde avanza con el momento. */
.control--pausa {
  width: var(--toque);
  height: var(--toque);
  position: relative;
}

.control--pausa:focus-visible {
  outline-offset: 2px;
}

.control--pausa .control__anillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
}

.control__pista {
  stroke: var(--tono-tenue);
  stroke-width: .75;
}

/* Extremo recto y trazo apagado mientras el progreso es 0: así no queda un punto suelto arriba del
   anillo (el redondeo del guion deja una astilla aunque mida cero). */
.control__progreso {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: butt;
  opacity: clamp(0, var(--progreso, 0) * 1000, 1);
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--progreso, 0) * 100);
}

.control__icono {
  position: relative;
  width: 16px;
  height: 16px;
}

.control--pausa[data-pausado='true'] .control__pausar,
.control--pausa[data-pausado='false'] .control__seguir,
.control--video[aria-pressed='true'] .control__pausar,
.control--video[aria-pressed='false'] .control__seguir {
  display: none;
}

.control__seguir path {
  fill: currentColor;
  stroke: none;
}

.control--oculto {
  visibility: hidden;
}

/* «Saltar» queda bajo «LA FECHA», el capítulo al que lleva; las flechas y la pausa, solas en el
   centro. */
.control--saltar {
  justify-self: end;
  width: auto;
  min-width: var(--toque);
  margin-left: 0;
  padding: 0 0 0 6px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ Capítulos: base */

.js .panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-panel) var(--ease-suave), visibility 0s linear var(--dur-panel);
}

.js .panel.activo {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.panel__titulo {
  margin: 0;
}

.js .panel__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Capítulo 1: inicio */

.panel--inicio {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--crema);
  background-color: var(--inicio-tono);
}

.inicio__fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Foto o video de la pareja (los pone app.js desde el manifiesto de medios). */
.inicio__fondo > img,
.inicio__fondo > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* En pantallas más anchas que altas, el video vertical va entero, como una columna en el centro, y
   los lados quedan en el tono del fondo. Estirado a lo ancho se vería ampliado y borroso. */
@media (min-aspect-ratio: 1/1) {
  .inicio__fondo > video {
    object-fit: contain;
  }
}

/* El acercamiento lento dura 5 s y se queda quieto: un movimiento que arranca solo y dura más
   necesitaría un control para detenerlo (WCAG 2.2.2). */
.inicio__fondo > img {
  animation: acercamiento-lento 5s var(--ease-suave) 1 forwards;
}

/* Sin foto ni video: salvia y crema, ramas de olivo y grano, con el velo ciruela encima. */
.inicio__marcador {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(55% 34% at 24% 20%, color-mix(in srgb, var(--salvia) 45%, var(--tinta)) 0, transparent 100%),
    radial-gradient(60% 40% at 86% 70%, color-mix(in srgb, var(--salvia) 70%, transparent) 0, transparent 100%),
    linear-gradient(172deg, var(--salvia) 0, color-mix(in srgb, var(--salvia) 45%, var(--oliva)) 38%, color-mix(in srgb, var(--oliva) 55%, var(--tinta)) 74%, var(--tinta) 100%);
  animation: acercamiento-lento 5s var(--ease-suave) 1 forwards;
  --hoja-relleno: color-mix(in srgb, var(--papel) 14%, transparent);
  --hoja-trazo: color-mix(in srgb, var(--papel) 58%, transparent);
  --hoja-vena: color-mix(in srgb, var(--papel) 26%, transparent);
  --aceituna: transparent;
  --aceituna-brillo: 0;
}

.inicio__fondo:has(> img, > video) .inicio__marcador {
  display: none;
}

/* Dos ramas que enmarcan el bloque de nombres desde las esquinas, sin cruzarlo. */
.inicio__rama {
  position: absolute;
  width: min(118%, 760px);
  aspect-ratio: 320 / 140;
  overflow: visible;
  opacity: .85;
}

.inicio__rama--a {
  left: -38%;
  top: 2%;
  transform: scaleX(-1) rotate(-24deg);
}

.inicio__rama--b {
  right: -42%;
  bottom: 7%;
  transform: scaleY(-1) rotate(-20deg);
}

/* En celular, las ramas se corren hacia las esquinas para no tocar el guion ni el botón. */
@media (max-width: 899px) {
  .inicio__rama--a {
    top: -7%;
    left: -50%;
  }

  .inicio__rama--b {
    bottom: -3%;
    right: -55%;
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  .inicio__rama {
    width: 100%;
  }

  .inicio__rama--a {
    top: -12%;
  }

  .inicio__rama--b {
    bottom: -8%;
  }
}

@keyframes acercamiento-lento {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Velo ciruela, más denso arriba (cabecera) y en el centro (guion y nombres) para que el texto
   crema y la terracota clara se lean sobre el marcador: guion 3:1 o más, cabecera 4,5:1 o más. */
.inicio__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 50% at 50% 46%,
      color-mix(in srgb, var(--tinta) 72%, transparent) 0,
      color-mix(in srgb, var(--tinta) 40%, transparent) 60%,
      transparent 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--tinta) 80%, transparent) 0,
      color-mix(in srgb, var(--tinta) 30%, transparent) 16%,
      color-mix(in srgb, var(--tinta) 14%, transparent) 58%,
      color-mix(in srgb, var(--tinta) 88%, transparent) 100%);
}

/* Con foto o video de la pareja, el velo es parejo: una foto clara no debe dejar el texto sin
   contraste. El guion y el «&» pasan a crema, porque la terracota clara no llega a 3:1 sobre una
   foto blanca. Hay que repetir la medición con las fotos reales cuando lleguen. */
.inicio__fondo:has(> img, > video) + .inicio__velo {
  background:
    radial-gradient(90% 50% at 50% 46%, color-mix(in srgb, var(--tinta) 60%, transparent) 0, transparent 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--tinta) 82%, transparent) 0,
      color-mix(in srgb, var(--tinta) 58%, transparent) 16%,
      color-mix(in srgb, var(--tinta) 58%, transparent) 70%,
      color-mix(in srgb, var(--tinta) 92%, transparent) 100%);
}

.panel--inicio:has(.inicio__fondo > img, .inicio__fondo > video) :is(.titulo__guion, .titulo__y) {
  color: var(--crema);
}

/* Sobre una foto clara, el «Save the Date» pequeño de la cabecera no llega a 4,5:1 en crema
   atenuada: va en crema plena. */
:root[data-tono='oscuro']:has(.inicio__fondo > img, .inicio__fondo > video) .cabecera__guion {
  color: var(--crema);
}

.inicio__contenido {
  position: relative;
  z-index: 1;
  text-shadow: var(--sombra-texto);
  min-height: inherit;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: calc(var(--cabecera-alto) + 8px) var(--margen) calc(var(--barra-alto) + 16px);
  text-align: center;
}

.js .inicio__contenido {
  height: 100%;
}

.titulo {
  display: grid;
  justify-items: center;
  margin: 0;
  font-weight: 400;
}

.titulo:focus {
  outline: none;
}

/* Los tamaños dependen también del alto: con el teléfono en horizontal o con la página ampliada,
   el bloque cabe entre la cabecera y la barra. */
.titulo__guion {
  font: 400 clamp(1.8rem, min(12vw, 8svh), 4.4rem)/1.1 var(--f-guion);
  color: var(--terracota-clara);
}

/* Los nombres se escalonan como en el referente: «Juliana» se corre a la izquierda, el «&» queda
   colgado a la derecha y «Juan Pablo» cierra el bloque. */
.titulo__nombres {
  display: grid;
  justify-items: center;
  margin-top: .06em;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, min(18vw, 13svh), 7.6rem);
  line-height: .86;
  letter-spacing: -.012em;
  color: var(--crema);
}

.titulo__nombre--a {
  translate: -.3em 0;
}

.titulo__y {
  justify-self: center;
  margin: -.12em 0 -.16em;
  translate: .7em 0;
  font-style: italic;
  font-weight: 400;
  font-size: .62em;
  line-height: 1;
  color: var(--terracota-clara);
}

.titulo__nombre--b {
  translate: .12em 0;
}

.inicio__dato {
  margin-top: clamp(22px, 3.6svh, 34px);
  font-size: clamp(.75rem, 3.4vw, .8125rem);
  letter-spacing: .2em;
  color: var(--crema);
  white-space: nowrap;
}

.inicio__explorar {
  margin-top: clamp(30px, 6svh, 56px);
  color: var(--crema);
}

.inicio__explorar:hover {
  background-color: var(--crema);
  color: var(--tinta);
}

/* El anillo de foco va por fuera del botón, sobre el velo oscuro: siempre crema. */
.inicio__explorar:focus-visible {
  outline-color: var(--crema);
}

/* ------------------------------------------------------------------ Capítulo 2: nuestro viaje */

.panel--viaje {
  --filas: 7;
  position: relative;
  background-color: var(--papel);
}

.globo,
.conector,
.puntos {
  display: none;
}

.js .globo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Un dedo gira el globo; dos dedos siguen ampliando la página. */
  touch-action: pinch-zoom;
  cursor: grab;
  opacity: 0;
  transition: opacity 1s var(--ease-suave) .1s;
}

/* El lienzo no se escala con CSS: el globo mide su caja y una escala lo dejaría borroso. */
.js .globo.listo {
  opacity: 1;
}

.globo:active {
  cursor: grabbing;
}

.js .conector,
.js .puntos {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Los lugares van sobre las etiquetas (el escenario está en el nivel 3): una caja puede montarse
   sobre la esfera, como en el referente, pero no tapa ningún punto. Aparecen con el globo. */
.js .puntos {
  z-index: 4;
  opacity: 0;
  transition: opacity 1s var(--ease-suave) .1s;
}

.js .puntos.listo {
  opacity: 1;
}

.punto {
  fill: var(--tinta);
  stroke: var(--papel);
  stroke-width: 1.4;
}

.puntos__activo .punto {
  fill: var(--terracota);
}

/* El anillo crece de 6 a 19 px y se apaga en cada latido. */
.puntos__anillo {
  fill: none;
  stroke: var(--terracota);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    anillo-crece var(--dur-anillo) cubic-bezier(.65, 0, .35, 1) infinite,
    anillo-apaga var(--dur-anillo) linear infinite;
}

@keyframes anillo-crece {
  from { transform: scale(.32); }
  to { transform: scale(1); }
}

@keyframes anillo-apaga {
  from { opacity: .75; }
  to { opacity: 0; }
}

.conector line {
  stroke: var(--tinta);
  stroke-width: 1;
}

.conector circle {
  fill: var(--tinta);
}

.conector:not(.visible) {
  opacity: 0;
}

.js .viaje__escenario {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cabecera-alto);
  bottom: calc(var(--barra-base) + var(--textos-alto));
  z-index: 3;
  container-type: size;
  pointer-events: none;
  /* Diámetro del globo; las unidades cq se resuelven contra este escenario. */
  --diametro: min(100cqw - 4px, 100cqh - 56px, 620px);
}

.globo__marco {
  display: none;
}

.js .globo__marco {
  position: absolute;
  left: 50%;
  top: 54%;
  display: block;
  width: var(--diametro);
  height: var(--diametro);
  translate: -50% -50%;
}

/* Etiquetas: la mitad a cada lado del globo, en dos columnas fijas. app.js marca cada li con
   .lado-izq o .lado-der y pone en el panel --filas (lugares a cada lado), así que agregar un
   lugar en contenido.js no obliga a tocar este archivo. */
.etiquetas {
  margin: 0 auto;
  padding: 0 var(--margen) 0 2.4em;
  max-width: 28rem;
  font: 500 1.75rem/1.25 var(--f-display);
}

.etiquetas li {
  padding: 4px 0;
}

.js .etiquetas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw - 2 * var(--margen), var(--diametro) + 400px);
  height: min(100cqh, var(--diametro) * 1.3);
  max-width: none;
  translate: -50% -50%;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-template-rows: repeat(var(--filas), 1fr);
  grid-auto-flow: row dense;
  align-items: center;
  padding: 0;
  list-style: none;
  font: inherit;
}

.js .etiquetas li {
  padding: 0;
}

.js .etiquetas li.lado-izq {
  grid-column: 1;
  justify-self: start;
}

.js .etiquetas li.lado-der {
  grid-column: 3;
  justify-self: end;
}

.etiqueta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  pointer-events: auto;
  translate: calc(var(--desfase, 0) * 1px) 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-media) var(--ease-suave) calc(var(--i, 0) * 45ms + 240ms),
    transform var(--dur-media) var(--ease-largo) calc(var(--i, 0) * 45ms + 240ms),
    color var(--dur-corta) var(--ease-suave);
}

.panel--viaje.activo .etiqueta {
  opacity: 1;
  transform: none;
}

.etiquetas li.lado-der .etiqueta {
  flex-direction: row-reverse;
}

.etiqueta__caja {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 10px 0 calc(10px + .13em);
  font-size: .75rem;
  letter-spacing: .13em;
  white-space: nowrap;
  border: 1px solid var(--linea-tenue);
  background-color: var(--papel-velo);
  transition: background-color var(--dur-corta) var(--ease-suave), color var(--dur-corta) var(--ease-suave), border-color var(--dur-corta) var(--ease-suave);
}

/* Durante el recorrido el globo se acerca y solo cuenta la etiqueta activa: las demás quedan sin
   fondo, con el borde y la marca casi apagados, como en el referente. El texto conserva
   --tinta-suave (5,8:1): siguen siendo botones y el brief pide 4,5:1 en las versalitas. */
:root[data-recorrido] .etiqueta:not([aria-current='true']) .etiqueta__caja {
  border-color: var(--linea-velada);
  background-color: transparent;
  transition-duration: var(--dur-media);
}

:root[data-recorrido] .etiqueta:not([aria-current='true']) .etiqueta__marca {
  opacity: .15;
  transition-duration: var(--dur-media);
}

:root[data-recorrido] .etiqueta:not([aria-current='true']):is(:hover, :focus-visible) .etiqueta__caja {
  border-color: var(--tinta-suave);
}

:root[data-recorrido] .etiqueta:not([aria-current='true']):is(:hover, :focus-visible) .etiqueta__marca {
  opacity: .8;
}

/* La marca vertical es un trazo aparte, del alto de la caja, del lado del globo. */
.etiqueta__marca {
  width: 2px;
  height: 28px;
  flex: none;
  background-color: var(--tinta-suave);
  opacity: .45;
  transition: background-color var(--dur-corta) var(--ease-suave), opacity var(--dur-corta) var(--ease-suave);
}

.etiquetas li.lado-izq .etiqueta__marca {
  margin-left: 4px;
}

.etiquetas li.lado-der .etiqueta__marca {
  margin-right: 4px;
}

.etiqueta:hover .etiqueta__caja {
  border-color: var(--tinta-suave);
}

.etiqueta:hover .etiqueta__marca {
  opacity: .8;
}

.etiqueta[aria-current='true'] {
  color: var(--papel);
}

.etiqueta[aria-current='true'] .etiqueta__caja {
  border-color: var(--tinta);
  background-color: var(--tinta);
}

.etiqueta[aria-current='true'] .etiqueta__marca {
  background-color: var(--terracota);
  opacity: 1;
}

.etiqueta--ejemplo .etiqueta__caja {
  border-style: dashed;
}

.etiqueta:focus-visible {
  outline: none;
}

.etiqueta:focus-visible .etiqueta__caja {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.viaje__textos {
  display: none;
}

.js .viaje__textos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--barra-base);
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 6px;
  height: var(--textos-alto);
  padding: 0 var(--margen) 18px;
  text-align: center;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-suave);
}

/* Durante el recorrido, los controles del reproductor ocupan este lugar. */
:root[data-recorrido] .viaje__textos {
  opacity: 0;
}

.viaje__ayuda {
  font: italic 400 .9375rem/1.35 var(--f-texto);
  color: var(--tinta-suave);
  text-wrap: balance;
}

.viaje__invitacion {
  font: 500 1.5rem/1.1 var(--f-display);
  letter-spacing: .005em;
  color: var(--tinta);
}

/* ------------------------------------------------------------------ Capítulo 3: la fecha */

.panel--fecha {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--papel);
}

.js .panel--fecha {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--barra-alto);
  /* Lo que recibe el foco con el teclado no queda debajo de la barra fija. */
  scroll-padding-bottom: calc(var(--barra-alto) + 8px);
}

.fecha__cuerpo {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: calc(var(--cabecera-alto) + clamp(8px, 3svh, 32px)) var(--margen) 8px;
  text-align: center;
}

.fecha__dia {
  margin: 0;
  padding-left: .2em;
  font: 500 clamp(1.1875rem, 5.4vw, 1.625rem)/1.2 var(--f-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

.fecha__dia:focus {
  outline: none;
}

.cuenta {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1.6vw, 14px);
  margin-top: clamp(14px, 2.6svh, 26px);
}

.cuenta__grupo {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 1.15em;
  font-size: clamp(2.5rem, 12.2vw, 4.6rem);
}

.cuenta__numero {
  font: 400 1em/1 var(--f-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
}

.cuenta__rotulo {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--tinta-suave);
}

.cuenta__separador {
  font: 400 clamp(2rem, 9vw, 3.4rem)/1.1 var(--f-display);
  color: var(--tinta-suave);
}

.cuenta__mensaje {
  margin-top: clamp(14px, 2.6svh, 26px);
  font: 500 clamp(2.4rem, 11vw, 4rem)/1.05 var(--f-display);
}

.fecha__guion {
  margin-top: clamp(22px, 4.4svh, 44px);
  font: 400 clamp(2.5rem, 11.5vw, 4rem)/1.1 var(--f-guion);
  color: var(--terracota);
}

.fecha__ciudad {
  margin-top: 6px;
  padding-left: .24em;
  letter-spacing: .24em;
  color: var(--tinta-suave);
}

/* El botón mide lo que su texto, como «Explorar»; el menú desplegado toma el mismo ancho. */
.agenda {
  margin-top: clamp(24px, 4.6svh, 44px);
  width: auto;
  min-width: 248px;
  max-width: 300px;
}

.agenda__boton {
  width: 100%;
  padding: 0 22px 0 calc(22px + .16em);
  list-style: none;
  user-select: none;
}

.agenda__boton:hover,
.agenda[open] .agenda__boton {
  background-color: var(--tinta);
  color: var(--papel);
}

/* El anillo de foco va por fuera, sobre papel: en tinta aunque el botón esté relleno. */
.agenda__boton:focus-visible {
  outline-color: var(--tinta);
}

.agenda__boton::-webkit-details-marker {
  display: none;
}

.agenda__boton::marker {
  content: '';
}

.agenda__chevron {
  width: 12px;
  height: 8px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-corta) var(--ease-suave);
}

.agenda[open] .agenda__chevron {
  transform: rotate(180deg);
}

.agenda__opciones {
  margin: 0;
  padding: 0 14px;
  list-style: none;
  border: 1px solid var(--linea);
  border-top: 0;
  background-color: var(--papel-2);
}

.agenda__opciones li + li {
  border-top: 1px solid var(--linea-tenue);
}

.agenda__opciones a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 8px;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}

.agenda__opciones a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fecha__cierre {
  margin-top: clamp(22px, 4svh, 40px);
  font: italic 400 clamp(1.5rem, 6.4vw, 2rem)/1.2 var(--f-display);
}

.fecha__otra-vez {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  margin-top: 4px;
  padding: 0 8px;
  font-style: italic;
  font-size: .9375rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 5px;
}

.pie {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px var(--margen) 22px;
}

.pie__monograma {
  width: 34px;
  height: 34px;
  fill: var(--tinta);
}

.pie__dominio {
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ Momento */

.momento {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  color: var(--crema);
  background-color: var(--tinta-honda);
  /* Tocar y deslizar con un dedo los maneja app.js; con dos dedos se puede ampliar. */
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.momento__medio {
  position: absolute;
  inset: 0;
}

/* Cada foto, video o marcador va en una lámina; al cambiar de lugar se funden. */
.lamina {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--tinta-honda);
}

.lamina__fondo,
.lamina__cuadro {
  position: absolute;
  inset: 0;
}

.lamina__fondo {
  display: none;
}

.lamina img,
.lamina video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lamina__cuadro > * {
  transform-origin: 50% 45%;
}

/* Marcador de posición: degradado de la paleta, grano, rama de olivo, el número grande y el aviso.
   El nombre del lugar no se repite: ya está arriba, en la cabecera del momento. */
.marcador {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  padding: 0 var(--margen);
  text-align: center;
  background:
    radial-gradient(70% 45% at var(--luz-x, 64%) var(--luz-y, 34%), var(--marcador-luz) 0, transparent 100%),
    linear-gradient(var(--marcador-angulo, 165deg), var(--marcador-a) 0, var(--marcador-b) 100%);
  --hoja-relleno: color-mix(in srgb, var(--papel) 9%, transparent);
  --hoja-trazo: color-mix(in srgb, var(--papel) 34%, transparent);
  --hoja-vena: color-mix(in srgb, var(--papel) 18%, transparent);
  --aceituna: transparent;
  --aceituna-brillo: 0;
}

.marcador[data-variante='0'] {
  --marcador-a: var(--tinta);
  --marcador-b: color-mix(in srgb, var(--burdeos) 80%, var(--tinta));
  --marcador-luz: color-mix(in srgb, var(--terracota) 50%, transparent);
}

.marcador[data-variante='1'] {
  --marcador-a: color-mix(in srgb, var(--oliva) 72%, var(--tinta));
  --marcador-b: var(--tinta);
  --marcador-luz: color-mix(in srgb, var(--salvia) 50%, transparent);
  --luz-x: 30%;
  --luz-y: 22%;
  --marcador-angulo: 180deg;
}

.marcador[data-variante='2'] {
  --marcador-a: color-mix(in srgb, var(--burdeos) 70%, var(--tinta));
  --marcador-b: color-mix(in srgb, var(--tinta) 80%, var(--oliva));
  --marcador-luz: color-mix(in srgb, var(--cobre) 55%, transparent);
  --luz-y: 68%;
}

.marcador[data-variante='3'] {
  --marcador-a: var(--tinta);
  --marcador-b: color-mix(in srgb, var(--oliva) 55%, var(--tinta));
  --marcador-luz: color-mix(in srgb, var(--terracota) 40%, transparent);
  --luz-x: 38%;
  --luz-y: 60%;
  --marcador-angulo: 140deg;
}

.marcador__rama {
  position: absolute;
  left: -34%;
  top: 56%;
  width: 150%;
  aspect-ratio: 320 / 140;
  overflow: visible;
  transform: rotate(-16deg);
}

.marcador[data-variante='1'] .marcador__rama,
.marcador[data-variante='3'] .marcador__rama {
  left: auto;
  right: -40%;
  top: 14%;
  transform: scaleX(-1) rotate(-20deg);
}

/* El número es la pieza gráfica del marcador. Al 60 % de crema queda por encima de 3:1 (texto
   grande) sobre las cuatro variantes. */
.marcador__numero {
  position: relative;
  font: italic 400 clamp(5rem, 28vw, 9rem)/1 var(--f-display);
  font-variant-numeric: lining-nums;
  letter-spacing: -.02em;
  color: var(--crema-media);
}

.marcador__numero--sello {
  line-height: 0;
}

.marcador__numero--sello svg {
  display: block;
  width: 54px;
  height: 54px;
  overflow: visible;
  filter: drop-shadow(0 2px 3px var(--sombra-corta));
}

.marcador__aviso {
  position: relative;
  padding: 9px 18px 10px;
  border: 1px dashed var(--crema-suave);
  border-radius: 999px;
  font: italic 400 .9375rem/1.2 var(--f-texto);
  color: var(--crema);
}

/* Velo de los momentos: oscuro arriba (cabecera) y abajo (barra), para que el texto crema se lea
   también sobre una foto clara (nieve, cielo). Las paradas intermedias suavizan el paso para que
   no quede una franja clara marcada en el centro. */
.momento__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--tinta) 86%, transparent) 0,
    color-mix(in srgb, var(--tinta) 80%, transparent) 18%,
    color-mix(in srgb, var(--tinta) 52%, transparent) 24%,
    color-mix(in srgb, var(--tinta) 22%, transparent) 30%,
    color-mix(in srgb, var(--tinta) 6%, transparent) 35%,
    transparent 40%,
    transparent 50%,
    color-mix(in srgb, var(--tinta) 10%, transparent) 56%,
    color-mix(in srgb, var(--tinta) 40%, transparent) 64%,
    color-mix(in srgb, var(--tinta) 75%, transparent) 71%,
    color-mix(in srgb, var(--tinta) 92%, transparent) 78%);
}

.momento__cabecera {
  text-shadow: var(--sombra-texto);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: max(26px, calc(env(safe-area-inset-top) + 14px)) var(--margen) 0;
  text-align: center;
  pointer-events: none;
}

.momento__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

.momento__ciudad {
  flex: none;
  font: 500 clamp(1.75rem, 8.2vw, 2.6rem)/1 var(--f-display);
  white-space: nowrap;
  letter-spacing: -.005em;
}

.momento__barra {
  width: 1px;
  height: 2.1em;
  flex: none;
  background-color: var(--crema-tenue);
}

.momento__dato {
  max-width: 16em;
  font-size: .75rem;
  line-height: 1.55;
  letter-spacing: .15em;
  text-align: left;
  color: var(--crema);
}

.momento__pieza {
  white-space: nowrap;
}

/* País y año largos («COLOMBIA», «22 DE MAYO DE 2027»): uno debajo del otro, sin punto. */
.momento__dato--dos .momento__pieza {
  display: block;
}

.momento__subtitulo {
  font: italic 400 1.0625rem/1.35 var(--f-texto);
}

.momento__texto {
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--crema);
}

/* ------------------------------------------------------------------ Sin JavaScript */

/* Sin la clase .js, todo se lee de corrido: inicio, la lista de lugares y la fecha. */
html:not(.js) .panel--viaje {
  padding: 72px 0 24px;
}

html:not(.js) .panel__titulo {
  padding: 0 var(--margen) 20px;
  font: 500 clamp(2.4rem, 11vw, 3.6rem)/1 var(--f-display);
  text-align: center;
}

html:not(.js) .fecha__cuerpo {
  padding-top: 64px;
}

/* ------------------------------------------------------------------ Escritorio */

@media (min-width: 900px) {
  :root {
    --margen: 32px;
    --cabecera-alto: 84px;
    --textos-alto: 96px;
    --versalita: .8125rem;
  }

  .escena__marco {
    margin-top: 8svh;
  }

  .cabecera__monograma {
    width: 36px;
    height: 36px;
  }

  .inicio__rama {
    width: 52vw;
  }

  .inicio__rama--a {
    left: -14vw;
    top: -2%;
  }

  .inicio__rama--b {
    right: -14vw;
    bottom: 4%;
  }

  .cabecera__nombres {
    font-size: 1.25rem;
  }

  .barra__capitulo {
    font-size: .8125rem;
    letter-spacing: .2em;
  }

  .js .barra {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  /* Las dos columnas se alinean por el borde que da al globo y siguen la curva de la esfera
     (--desfase-arco lo calcula app.js). */
  .js .etiquetas {
    width: min(100cqw - 2 * var(--margen), var(--diametro) + 560px);
    grid-template-columns: 1fr var(--diametro) 1fr;
    column-gap: 40px;
  }

  .js .etiquetas li.lado-izq {
    justify-self: end;
  }

  .js .etiquetas li.lado-der {
    justify-self: start;
  }

  .etiqueta {
    translate: calc(var(--desfase-arco, 0) * 1px) 0;
  }

  .etiqueta__caja {
    height: 32px;
    font-size: .8125rem;
    padding: 0 14px 0 calc(14px + .13em);
  }

  .etiqueta__marca {
    height: 32px;
  }

  .viaje__invitacion {
    font-size: 2rem;
  }

  .lamina__fondo {
    display: block;
    filter: blur(40px) saturate(.8);
    opacity: .5;
    transform: scale(1.15);
  }

  .lamina__cuadro {
    left: 50%;
    right: auto;
    width: min(100%, 62svh);
    translate: -50% 0;
  }

  .lamina--marcador .lamina__cuadro {
    left: 0;
    width: 100%;
    translate: none;
  }

  .marcador__rama {
    left: 4%;
    top: 52%;
    width: min(92%, 980px);
  }
}

/* ------------------------------------------------------------------ Pantallas bajas */

/* Teléfono en horizontal o página ampliada al 200 % o más: el inicio y el viaje se desplazan
   cuando no caben, en vez de cortar el contenido o dejarlo debajo de la barra. */
@media (max-height: 520px) {
  :root {
    --textos-alto: 44px;
  }

  .js .panel--inicio {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .js .inicio__contenido {
    height: auto;
  }

  .inicio__dato {
    margin-top: 14px;
  }

  .inicio__explorar {
    margin-top: 20px;
  }

  /* El fondo y el velo se quedan quietos mientras el texto se desplaza. */
  .js .inicio__fondo,
  .js .inicio__velo {
    position: fixed;
  }

  .viaje__ayuda {
    display: none;
  }

  /* El escenario mide al menos lo que piden las etiquetas de una columna, de 44 px cada una; si no cabe, se desplaza. Con
     el teclado, la etiqueta enfocada no queda debajo de la cabecera ni de la barra. */
  .js .panel--viaje {
    --escenario-alto: max(100svh - var(--cabecera-alto) - var(--barra-base) - var(--textos-alto), var(--filas) * var(--toque) + 24px);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-padding: var(--cabecera-alto) 0 calc(var(--barra-base) + 8px);
  }

  .js .panel--viaje .globo,
  .js .panel--viaje .conector,
  .js .panel--viaje .puntos {
    bottom: auto;
    height: calc(var(--cabecera-alto) + var(--escenario-alto));
  }

  .js .viaje__escenario {
    bottom: auto;
    height: var(--escenario-alto);
  }

  .js .etiquetas {
    grid-template-rows: repeat(var(--filas), minmax(var(--toque), 1fr));
  }

  .js .viaje__textos {
    top: calc(var(--cabecera-alto) + var(--escenario-alto));
    bottom: auto;
    height: auto;
    padding-bottom: var(--barra-base);
  }
}

/* Teléfono en horizontal: hay ancho de sobra y poco alto, así que los nombres van en un renglón y
   el bloque cabe entre la cabecera y la barra sin desplazarse. */
@media (max-height: 520px) and (min-width: 560px) {
  .titulo__nombres {
    display: flex;
    align-items: baseline;
    gap: .22em;
  }

  .titulo__nombre--a,
  .titulo__y,
  .titulo__nombre--b {
    margin: 0;
    translate: none;
  }
}

/* ------------------------------------------------------------------ Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .lacre::before {
    display: none;
  }

  .inicio__fondo > img,
  .inicio__marcador {
    animation: none;
  }

  .etiqueta {
    transform: none;
    transition-property: opacity, color;
    transition-delay: 0s;
  }

  .barra__avance {
    transition: none;
  }

  /* El anillo queda quieto a medio latido. */
  .puntos__anillo {
    animation: none;
    transform: scale(.56);
    opacity: .41;
  }

  /* La visibilidad cambia de una vez: si también tuviera 200 ms, el foco no podría entrar al
     capítulo nuevo en el instante en que app.js lo mueve. */
  .js .panel {
    transition-duration: 200ms, 0s;
  }

  .js .panel:not(.activo) {
    transition-delay: 0s, 200ms;
  }
}