/* ============================================================
   NUESTRA HISTORIA — el video "¿Cómo llegamos aquí?"
   Una pantalla de celular (aunque se abra en computadora) con
   escenas apiladas; GSAP decide cuál se ve. Blanco y marfil con
   grano de cine, letras de la invitación impresa y notitas a mano.
   Los textos chicos van un poco más grandes de lo normal: el video lo
   ven también personas mayores y tiene que leerse sin esfuerzo.
   ============================================================ */

.h {
  --h-rosa: #C9827D;
  --h-dorado: #C9A956;
  --h-carbon: #23231F;

  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
  user-select: none;
}

/* Oculta (pero medible: los trazos SVG se miden al armarse) hasta que el sobre se abre. */
.h:not(.is-activo) {
  visibility: hidden;
}

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

/* --- Capas fijas: grano, progreso, saltar --- */
.h__grano {
  position: absolute;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.05;
  will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  animation: h-grano 0.9s steps(4) infinite;
}

@keyframes h-grano {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* Barra de control: pausa, -10, avance, +10 y saltar */
.h__barra {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top, 0px));
  left: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.h.is-corriendo .h__barra {
  opacity: 1;
  pointer-events: auto;
}

.h__control,
.h__saltar {
  flex: none;
  height: 30px;
  border: 1px solid rgba(43, 43, 40, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.h__control {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0 8px;
}

.h__control svg {
  width: 10px;
  height: 12px;
  fill: currentColor;
}

.h__icono-seguir,
.h.is-pausado .h__icono-pausa {
  display: none;
}

.h.is-pausado .h__icono-seguir {
  display: block;
}

.h__saltar {
  padding: 0 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Zona de toque de 30 px; la línea visible mide 2. */
.h__progreso {
  position: relative;
  flex: 1;
  height: 30px;
  touch-action: none;
  cursor: pointer;
}

.h__progreso::before,
.h__progreso span {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
}

.h__progreso::before {
  content: "";
  background: rgba(128, 128, 120, 0.35);
}

.h__progreso span {
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
}

.h.is-pausado::after {
  content: "Pausa · toca para seguir";
  position: absolute;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(35, 35, 31, 0.78);
  color: #FBFAF6;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

/* --- Escenas --- */
.h-esc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: var(--color-bg);
}

/* Piezas que aparecen con un "set" a medio video: ocultas de inicio. */
.h-moneda,
.h-corazon,
.h-cap-foto {
  visibility: hidden;
  opacity: 0;
}

.h-foto-completa {
  position: absolute;
  inset: 0;
}

.h-foto-completa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.h-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(251, 250, 246, 0.97) 0%, rgba(251, 250, 246, 0.82) 22%, rgba(251, 250, 246, 0) 48%);
}

/* Notita escrita a mano, como pegada sobre la escena */
.h-nota {
  position: absolute;
  z-index: 3;
  padding: 6px 14px 8px;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(35, 35, 31, 0.14);
  color: var(--color-ink);
  font-family: var(--font-nota);
  font-size: 27px;
  line-height: 1.1;
  text-align: center;
  max-width: calc(100% - 40px);
}

/* Notita centrada: se ajusta a su texto y, si es larga, baja de renglón. */
.h-nota--centro {
  left: 24px;
  right: 24px;
  width: fit-content;
  max-width: none;
  margin-inline: auto;
}

/* Polaroid con su cinta */
.h-polaroid {
  position: absolute;
  z-index: 2;
  padding: 8px 8px 12px;
  background: #FFFFFF;
  box-shadow: 0 22px 40px rgba(35, 35, 31, 0.2);
}

.h-polaroid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.h-polaroid__cinta {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 70px;
  height: 22px;
  margin-left: -35px;
  background: rgba(233, 228, 214, 0.92);
  rotate: -4deg;
}

.h-nota--pie {
  position: static;
  display: block;
  max-width: none;
  padding: 8px 4px 0;
  background: none;
  box-shadow: none;
  font-size: 22px;
}

.h-corazon {
  position: absolute;
  width: 34px;
  height: 34px;
  overflow: visible;
}

.h-corazon path {
  fill: var(--h-rosa);
}

/* 1. Apertura: créditos y Mazunte */
.h-creditos {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.h-creditos__basada {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.h-creditos__una {
  color: var(--color-text-muted);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.h-creditos__nombres {
  font-family: var(--font-script);
  font-size: 76px;
  line-height: 1.1;
}

.h-nota--plan {
  top: calc(28% + env(safe-area-inset-top, 0px));
  left: 9%;
}

.h-nota--short {
  top: calc(9% + env(safe-area-inset-top, 0px));
  right: 7%;
  max-width: 64%;
}

.h-rocas {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  text-align: center;
}

.h-lugar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-align: center;
}

.h-si {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  color: var(--color-primary-dark);
  font-family: var(--font-script);
  font-size: 128px;
  line-height: 1;
  text-align: center;
}

.h-pausa {
  position: absolute;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 22px;
  z-index: 3;
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.h-pausa span {
  width: 5px;
  height: 18px;
  border-radius: 2px;
  background: var(--color-ink);
}

.h-nota--congelado {
  top: 38%;
  max-width: 300px;
  font-size: 29px;
}

/* 2. Rebobinado: la cinta corre hacia atrás */
.h-esc--rebobinado {
  background: var(--h-carbon);
}

.h-cinta__foto {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 3 / 4;
  margin: -41% 0 0 -31%;
  object-fit: cover;
  border: 7px solid #FFFFFF;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.h-rebobinando {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #FBFAF6;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.h-rebobinando__icono svg {
  width: 24px;
  height: 14px;
  fill: #FBFAF6;
}

.h-lineas {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 5px);
  pointer-events: none;
}

/* 3. Locales: el dibujo mide 0.75 del ancho y las notitas van debajo */
.h-esc--locales {
  --dibujo-abajo: calc(22% + var(--pantalla-ancho) * 0.75);
}

.h-titulo--ciudad {
  position: absolute;
  top: calc(8% + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
}

.h-subtitulo {
  position: absolute;
  top: calc(8% + 48px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  color: var(--color-text-muted);
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  text-align: center;
}

.h-dibujo {
  position: absolute;
  left: 50%;
  width: 90%;
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
}

.h-locales {
  top: 22%;
}

.h-trazo {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.h-trazo--fino {
  stroke-width: 1;
  opacity: 0.55;
}

.h-letrero {
  fill: var(--color-primary);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
}

.h-letrero--chico {
  font-size: 10px;
}

.h-camino {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.4;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.h-puntito {
  fill: var(--color-primary);
}

.h-moneda circle {
  fill: #EBDDA8;
  stroke: #B49B4B;
  stroke-width: 1.2;
}

.h-moneda .h-moneda__borde {
  fill: none;
  stroke-dasharray: 2 2;
}

.h-moneda text {
  fill: #8F7A35;
  font-family: var(--font-display);
  font-size: 11px;
}

.h-nota--cambio {
  top: calc(var(--dibujo-abajo) + 14px);
  left: 7%;
}

.h-nota--pretexto {
  top: calc(var(--dibujo-abajo) + 66px);
  right: 7%;
}

.h-corazon--locales {
  top: calc(22% + var(--pantalla-ancho) * 0.33);
  left: 57%;
}

.h-polaroid--guitarra {
  right: 8%;
  bottom: calc(5% + env(safe-area-inset-bottom, 0px));
  width: 48%;
}

/* 4. La ventana: los días pasan */
.h-esc--laveia {
  --ventana-abajo: calc(22% + var(--pantalla-ancho) * 0.75);
}

.h-nota--laveia {
  top: calc(8% + env(safe-area-inset-top, 0px));
}

.h-ventana {
  top: 22%;
  width: 80%;
}

.h-ventana__cielo {
  fill: #FBFAF6;
}

.h-ventana__sol {
  fill: var(--h-dorado);
  opacity: 0;
}

.h-ventana__luna {
  fill: #B9BFCC;
  opacity: 0;
}

.h-ventana__local {
  fill: var(--color-bg);
}

.h-dia {
  position: absolute;
  top: calc(var(--ventana-abajo) + 16px);
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* Caja fija: el número crece sin empujar la palabra "Día". */
.h-dia__numero {
  display: inline-block;
  width: 3.2ch;
  color: var(--color-primary-dark);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
}

.h-nota--hablamos {
  bottom: calc(10% + env(safe-area-inset-bottom, 0px));
}

/* 4. El primer beso */
.h-dialogos {
  position: absolute;
  top: 50%;
  left: 7%;
  right: 7%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(-50%);
}

.h-dialogo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 86%;
  padding: 14px 18px;
  border: 1px solid var(--color-borde);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(35, 35, 31, 0.07);
}

.h-dialogo--ella {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}

.h-dialogo--el {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--color-marfil);
}

.h-dialogo__quien {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.h-dialogo__texto {
  font-size: 20px;
  line-height: 1.35;
}

.h-estallido {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 0;
  height: 0;
}

.h-estallido .h-corazon {
  top: -17px;
  left: -17px;
}

.h-beso {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  color: var(--color-primary-dark);
  font-family: var(--font-script);
  font-size: 104px;
  line-height: 1;
  text-align: center;
}

.h-nota--contento {
  top: 58%;
}

.h-polaroid--besame {
  top: calc(16% + env(safe-area-inset-top, 0px));
  left: 50%;
  width: 62%;
  margin-left: -31%;
}

/* 5. Acapulco y la catedral */
.h-postal {
  position: absolute;
  top: 24%;
  left: 50%;
  width: 66%;
  margin-left: -33%;
  padding: 12px 12px 14px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(35, 35, 31, 0.16);
}

.h-postal svg {
  width: 100%;
  height: auto;
  background: #EEF4F2;
}

.h-postal__sol {
  fill: var(--h-dorado);
}

.h-postal__olas {
  fill: none;
  stroke: #6FA0B8;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.h-postal__nombre {
  display: block;
  margin-top: 6px;
  font-family: var(--font-script);
  font-size: 40px;
  line-height: 1;
  text-align: center;
}

.h-postal__sello {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 34px;
  border: 1.5px dashed rgba(201, 130, 125, 0.7);
}

.h-nota--acapulco {
  top: 64%;
}

.h-nota--regreso {
  top: calc(12% + env(safe-area-inset-top, 0px));
}

.h-catedral {
  top: 34%;
  width: 82%;
}

/* Pregunta y respuesta en una columna: si la pregunta baja de renglón,
   empuja a la respuesta en vez de encimarse. */
.h-preguntas {
  position: absolute;
  top: calc(8% + env(safe-area-inset-top, 0px));
  left: 6%;
  right: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.h-pregunta {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: min(36px, calc(var(--pantalla-ancho) * 0.09));
  line-height: 1;
}

.h-respuesta {
  color: var(--color-primary-dark);
  font-family: var(--font-script);
  font-size: min(92px, calc(var(--pantalla-ancho) * 0.22));
  line-height: 1;
}

.h-estallido--catedral {
  top: 20%;
}

.h-nota--corridos {
  bottom: calc(8% + env(safe-area-inset-bottom, 0px));
}

.h-sello-fuera {
  position: absolute;
  top: 54%;
  right: 9%;
  z-index: 3;
  padding: 6px 14px;
  border: 3px double var(--color-primary-dark);
  border-radius: 6px;
  background: rgba(251, 250, 246, 0.78);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  visibility: hidden;
  opacity: 0;
}

/* 6. Te amo, bajito */
.h-nota--boda {
  top: calc(6% + env(safe-area-inset-top, 0px));
}

.h-polaroid--boda {
  top: calc(16% + env(safe-area-inset-top, 0px));
  left: 50%;
  width: 56%;
  margin-left: -28%;
  padding-bottom: 34px;
}

.h-bajito {
  position: absolute;
  top: 70%;
  left: 0;
  right: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
}

.h-que {
  position: absolute;
  top: 74%;
  left: 0;
  right: 0;
  font-family: var(--font-script);
  font-size: 64px;
  line-height: 1;
  text-align: center;
}

.h-nada {
  position: absolute;
  top: 84%;
  left: 0;
  right: 0;
  color: var(--color-text-muted);
  font-family: var(--font-nota);
  font-size: 28px;
  text-align: center;
}

.h-otro-dia {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
}

.h-otro-dia__cuando {
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.h-otro-dia__grito {
  margin-top: 6px;
  padding: 0 16px;
  color: var(--color-primary-dark);
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 46px;
  line-height: 0.95;
}

/* 7. Capítulos de fotos */
.h-cap {
  position: absolute;
  inset: 0;
}

.h-cap-titulo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.h-cap-titulo__numero {
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: 54px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.h-cap-titulo__linea {
  width: 56px;
  height: 1px;
  background: var(--color-accent);
}

.h-cap-titulo__texto {
  padding: 0 24px;
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
}

.h-cap-foto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
}

.h-nota--cap {
  position: relative;
  max-width: 84%;
  font-size: 28px;
}

.h-polaroid--cap {
  position: relative;
  width: 72%;
  padding-bottom: 30px;
}

.h-cap-foto--completa {
  padding: 0;
}

.h-cap-foto__imagen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.h-cap-foto__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.h-nota--completa {
  left: 24px;
  right: 24px;
  bottom: calc(12% + env(safe-area-inset-bottom, 0px));
  width: fit-content;
  max-width: none;
  margin-inline: auto;
  font-size: 29px;
}

.h-rafaga__marco {
  width: 80%;
  aspect-ratio: 4 / 5;
  padding: 10px;
  background: #FFFFFF;
  box-shadow: 0 26px 50px rgba(35, 35, 31, 0.22);
}

.h-rafaga__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.h-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
}

/* Hasta que llegamos al mar */
.h-almar {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.05;
  text-align: center;
}

/* 8. Mazunte, según quién */
.h-mitad {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50%;
}

.h-mitad--el {
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-borde);
}

.h-mitad--ella {
  bottom: 0;
  background: var(--color-marfil);
}

.h-mitad__quien {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.h-mitad__texto {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}

.h-reloj {
  width: 116px;
  height: 116px;
  overflow: visible;
}

.h-reloj__aro {
  fill: #FFFFFF;
  stroke: var(--color-ink);
  stroke-width: 1.4;
}

.h-reloj__marcas line {
  stroke: var(--color-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.h-reloj__minutero {
  stroke: var(--color-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.h-reloj__segundero {
  stroke: var(--h-rosa);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.h-reloj__centro {
  fill: var(--color-ink);
}

.h-cronometro {
  position: absolute;
  top: 26%;
  right: 16%;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-ink);
  color: #FBFAF6;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.08em;
}

.h-velo--anillo {
  z-index: 1;
}

/* Las dos frases en una columna anclada abajo: crecen hacia arriba sin encimarse. */
.h-dijo-grupo {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.h-dijo {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: min(42px, calc(var(--pantalla-ancho) * 0.105));
  line-height: 1;
}

.h-anillo {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: min(30px, calc(var(--pantalla-ancho) * 0.078));
  line-height: 1.05;
}

.h-nota--nervios {
  right: 10%;
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

/* Aclara que la foto de la pedida es una recreación. */
.h-nota--recreacion {
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 7%;
  max-width: 78%;
  font-size: 21px;
}

/* 9. Final */
.h-esc--final {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  background: radial-gradient(120% 80% at 50% 40%, #FFFFFF 0%, var(--color-bg) 60%, var(--color-marfil) 100%);
}

.h-llegamos {
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
}

.h-fecha {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.18em;
}

.h-fecha span {
  display: inline-block;
}

.h-apenas {
  margin-top: 6px;
  color: var(--color-primary-dark);
  font-family: var(--font-frase);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .h__grano {
    animation: none;
  }
}