/* ═══════════════════════════════════════════════════════════════════════
   Estephany y Jorge · versión «Clásica» · «Papelería sobre la mesa»
   (8 de octubre de 2026)

   Se carga DESPUÉS de css/componentes.css (la mecánica compartida, que no se
   edita): aquí sólo se viste. Scroll normal, en la ventana.

   LA IDEA EN UNA LÍNEA: un solo mantel de satén de arriba abajo (cambia de
   tono, nunca de franja) y, encima, cada capítulo es una pieza de papelería
   distinta que llega ENCIMA de la anterior. Por qué partir de la A y no de
   otra cosa: es la que mejor sobrevive al scroll libre (el papel se lee igual
   a cualquier altura) y la que más se separa de Katia (allá eran franjas y
   costuras; aquí no hay franjas: hay objetos sobre una mesa) y de Historias
   (allá luz y pantallas que se acomodan; aquí papel y bajada libre).

   ÍNDICE
     1. Bases (mantel, papel, letras, botones)
     2. Lo fijo: barra de capítulos, botón de confirmar, música, sorpresa
     3. El sobre (portada)
     4. Cada pieza, en el orden de la invitación
     5. Piezas del motor (galería, visor, cartas, estados)
     6. Pantallas bajitas y menos movimiento

   CONTRASTE (medido sobre papel #FBF7F3): tinta #4A3830 11.2:1 · tinta suave
   #6E564B 6.6:1 · oro texto #7A5A2A 6.1:1 · champaña #F1DDB3 sobre moka
   profundo #5E4A40 6.4:1. Nada de texto suelto sobre el mantel: todo va en
   papel (las flores y el mantel son sólo decorado).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --barra: 2.9rem;                                   /* alto de la barra de capítulos */
  --ancho: min(22.5rem, calc(100vw - 2.2rem));       /* ancho de las piezas */
  --sombra:   /* (10 oct) 2 capas en vez de 4: mismo aspecto, ~30 % menos raster */
    0 1px 2px rgba(74, 56, 48, .12),
    0 14px 26px -8px rgba(74, 56, 48, .34);
  --sombra-filtro: drop-shadow(0 1px 1px rgba(74, 56, 48, .14)) drop-shadow(0 8px 12px rgba(74, 56, 48, .18)) drop-shadow(0 22px 22px rgba(74, 56, 48, .14));
  /* grano de papel (ruido muy tenue, se pinta una sola vez) */
  --grano: url("../assets/texturas/grano.webp");   /* (9 oct) antes era un SVG con feTurbulence: caro de rasterizar en celular; ahora una imagen de 170 px */
  /* trama fina del satén del mantel */
  --trama: url("../assets/texturas/trama.webp");   /* ídem: vetas del satén como imagen de 200 px */
  /* el satén de su paleta, de arriba abajo */
  --saten: linear-gradient(180deg,
    #CBAE9B 0%, #D5BAA9 7%, #DDC6B8 15%, #E4CAC1 25%, #E8C9C4 34%,
    #ECD3C3 44%, #F1DDB3 54%, #EDD6C0 64%, #E8C9C4 74%, #E2C8BC 84%,
    #DDC6B8 92%, #D3B8A7 100%);
  /* los pliegues del satén: bandas de luz diagonales muy suaves */
  --pliegues: repeating-linear-gradient(118deg,
    rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 120px,
    rgba(255, 255, 255, .17) 190px, rgba(255, 255, 255, 0) 270px,
    rgba(94, 74, 64, .045) 330px, rgba(255, 255, 255, 0) 420px);
}

/* ═══════════ 1. BASES ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: #CBAE9B;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--serif);
  color: var(--tinta);
  background: var(--trama), var(--pliegues), var(--saten);
  background-size: 200px 200px, 100% 100%, 100% 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, figure, ol, fieldset { margin: 0; padding: 0; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.dibujos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Las letras de la casa */
.etiqueta {
  font-family: var(--sans); font-weight: 500;
  font-size: .62rem; line-height: 1.3;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-texto);
}
.texto { font-family: var(--serif); font-size: 1.06rem; line-height: 1.45; color: var(--tinta); text-wrap: pretty; }
.texto b { font-weight: 600; }
.texto--suave { color: var(--tinta-suave); font-style: italic; }
.amp { font-family: var(--serif); font-style: italic; font-weight: 400; }
.pendiente { font-style: italic; color: var(--tinta-suave); }

/* Papel: grano + luz que entra por la izquierda + su color */
.papel {
  background:
    var(--grano),
    radial-gradient(130% 80% at 18% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%),
    var(--fondo, var(--papel));
  background-size: 170px 170px, 100% 100%, 100% 100%;
}

/* Botones: cinta de raso moka (principal) y papel con filete (secundario) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1.25rem;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, opacity .2s ease;
}
.btn:active { transform: scale(.96); }
.btn--principal {
  color: var(--champana);
  background: linear-gradient(180deg, #6A544A, var(--moka-profundo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 1px rgba(74, 56, 48, .3), 0 6px 12px -5px rgba(74, 56, 48, .6);
}
.btn--secundario {
  color: var(--tinta);
  background: rgba(255, 253, 251, .9);
  box-shadow: inset 0 0 0 1px rgba(166, 138, 123, .75), 0 3px 8px -5px rgba(74, 56, 48, .5);
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--esperando { opacity: .75; pointer-events: none; }
.btn--palpita { animation: cl-palpita 2.6s ease-in-out infinite; }
.btn--palpita:active { animation: none; }
@keyframes cl-palpita {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(166, 138, 123, .75), 0 0 0 0 rgba(194, 160, 106, .45); }
  60% { box-shadow: inset 0 0 0 1px rgba(166, 138, 123, .75), 0 0 0 9px rgba(194, 160, 106, 0); }
}
.botones { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }

/* ═══════════ LA MESA ═══════════
   El mantel vive en el <body> (un solo degradado, de arriba abajo). Las
   secciones son transparentes: nunca hay orilla recta entre dos colores. */
/* Mientras el sobre está cerrado, la mesa existe (para que el frasco, la firma
   y el en vivo se puedan medir) pero no se ve ni se baja. */
.contenido { position: relative; padding: calc(var(--barra) + .9rem) 0 3rem; visibility: hidden; height: 0; overflow: hidden; }
.contenido--visible { visibility: visible; height: auto; overflow: visible; overflow-x: hidden; animation: cl-aparece .9s ease backwards; }   /* (10 oct) backwards, no both: con «both» Chrome dejaba #contenido como capa propia de 6400 px PARA SIEMPRE */
/* las ramitas salen por los lados a propósito: se recortan AQUÍ (no en <html>,
   que en el teléfono deja crecer la página a lo ancho y la aleja) */
@supports (overflow: clip) { .contenido--visible { overflow-x: clip; } }
@keyframes cl-aparece { from { opacity: 0; } to { opacity: 1; } }

/* El brillo del satén: una luz que se desliza despacio al bajar (js/clasica.js
   sólo le cambia transform). Va encima del mantel y debajo del papel. */
.brillo { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.brillo i {
  position: absolute; left: -70%; right: -70%; top: -40%; height: 180%;
  background: linear-gradient(116deg,
    transparent 36%, rgba(255, 255, 255, .10) 44%, rgba(255, 255, 255, .24) 49%,
    rgba(255, 255, 255, .08) 53%, transparent 60%,
    transparent 70%, rgba(255, 255, 255, .11) 76%, transparent 82%);
  will-change: transform;
}

/* Cada sección: su pieza al centro y lugar para las flores. z-index 0 en
   todas: la de abajo pinta ENCIMA de la de arriba (la pieza nueva llega
   sobre la anterior, y sus flores brotan sobre la orilla de la otra). */
.seccion, .footer {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.4rem 0 1.2rem;
  text-align: center;
}
.seccion + .seccion, .seccion + .footer { margin-top: -1.5rem; }
.pieza {
  position: relative; z-index: 2;
  width: var(--ancho);
  transform-origin: 50% 80%;
  transform: rotate(var(--giro, 0deg));
}
.pieza + .pieza { margin-top: -1.1rem; }
.sombra-papel { filter: var(--sombra-filtro); }

/* Las flores que brotan (js/fx-brotes.js) salen DE ABAJO de la pieza: quedan
   detrás del papel y encima de la pieza anterior. */
.brote { z-index: 1; width: clamp(4rem, 19vw, 5.4rem); height: clamp(4rem, 19vw, 5.4rem); }
.brote--tl { top: -.3rem; left: max(.1rem, calc(50% - var(--ancho) / 2 - 1.4rem)); }
.brote--tr { top: -.3rem; right: max(.1rem, calc(50% - var(--ancho) / 2 - 1.4rem)); }
.brote--bl { bottom: .2rem; left: max(.1rem, calc(50% - var(--ancho) / 2 - 1.4rem)); }
.brote--br { bottom: .2rem; right: max(.1rem, calc(50% - var(--ancho) / 2 - 1.4rem)); }

/* Las ramitas prensadas: sueltas sobre el mantel, entre una pieza y otra.
   Se mecen al tocarlas. (Hasta el 8 oct hacían parallax; se quitó porque
   trababa el scroll: ver la sección 9.) */
.ramita {
  position: absolute; z-index: 1; display: block;
}
.ramita svg {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(74, 56, 48, .2)) drop-shadow(0 4px 6px rgba(74, 56, 48, .1));
  transform-origin: 12% 88%;
}
.ramita svg.mece { animation: cl-mece 1.4s cubic-bezier(.3, .6, .3, 1); }
@keyframes cl-mece { 0% { transform: rotate(0); } 22% { transform: rotate(-4deg); } 48% { transform: rotate(2.6deg); } 72% { transform: rotate(-1.2deg); } 100% { transform: rotate(0); } }
.ramita--espejo svg { transform: scaleX(-1); }

/* «Sigue: …» al pie de cada pieza (lo agrega js/clasica.js): una etiqueta de
   papel con su ojillo, como la que se amarra a un regalo. */
.sigue {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: max-content; max-width: 100%;
  margin: .85rem auto 0; padding: .42rem .85rem .42rem 1.15rem;
  position: relative;
  text-decoration: none; color: var(--tinta);
  background: var(--grano), linear-gradient(180deg, #fff, var(--papel));
  background-size: 170px 170px, 100% 100%;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  filter: drop-shadow(0 2px 3px rgba(74, 56, 48, .25));
  cursor: pointer;
}
.sigue::before {
  content: ''; position: absolute; left: 9px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--nude); box-shadow: inset 0 1px 1px rgba(74, 56, 48, .4);
}
.sigue b { font-family: var(--sans); font-weight: 600; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-texto); }
.sigue em { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sigue svg { flex: none; width: 12px; height: 12px; animation: cl-asoma 2.2s ease-in-out infinite; }
@keyframes cl-asoma { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

/* ═══════════ 2. LO FIJO ═══════════ */

/* La barra de capítulos (tipo historias), con la cinta de un marcapáginas. */
.capitulos {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  padding: calc(.5rem + env(safe-area-inset-top)) 1rem .45rem;
  background: rgba(251, 247, 243, .86);
  -webkit-backdrop-filter: blur(9px) saturate(1.05); backdrop-filter: blur(9px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(194, 160, 106, .45), 0 8px 20px -14px rgba(74, 56, 48, .6);
  transform: translateY(-110%);
  transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}
.capitulos--ver { transform: none; }
.capitulos__segs { display: flex; gap: 3px; max-width: 30rem; margin: 0 auto; }
.capitulos__seg { flex: 1; height: 3px; border-radius: 3px; background: rgba(166, 138, 123, .32); overflow: hidden; }
.capitulos__seg i { display: block; height: 100%; border-radius: 3px; background: var(--moka-profundo); transform: scaleX(0); transform-origin: left center; }
.capitulos__txt {
  display: flex; align-items: baseline; justify-content: center; gap: .45rem;
  max-width: 30rem; margin: .4rem auto 0;
  font-family: var(--sans); font-weight: 500; font-size: .6rem; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta);
  white-space: nowrap; overflow: hidden;
  transition: opacity .2s ease;
}
.capitulos__txt b { font-weight: 600; color: var(--oro-texto); }
.capitulos__txt.cambia { opacity: 0; }
/* el letrero de vista previa, debajo de la barra (no encima) */
.vista-previa { top: calc(var(--barra) + .5rem); }

/* El botón fijo de «Confirmar»: aparece tras ver la fecha y el lugar. */
.confirmar-fijo {
  position: fixed; z-index: 92;
  right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1rem .5rem .85rem;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--champana);
  background: linear-gradient(180deg, #6A544A, var(--moka-profundo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -8px rgba(74, 56, 48, .75);
  opacity: .96;
  transform: translateY(170%);
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
.confirmar-fijo svg { width: 16px; height: 16px; flex: none; }
.confirmar-fijo--ver { transform: none; }

/* La música: un botoncito de cera, abajo a la izquierda. */
.btn-musica {
  position: fixed; z-index: 93;
  left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  color: var(--champana); font-size: 1.15rem;
  background: radial-gradient(circle at 35% 30%, #8A7662, #5E4A40 62%, #3E302A);
  box-shadow: 0 6px 14px -4px rgba(74, 56, 48, .6);
}
.btn-musica--pausada { opacity: .6; }

/* La lluvia de pétalos de la sorpresa final (js/clasica.js). */
.lluvia-petalos { position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
.lluvia-petalos span {
  position: absolute; top: -40px; left: var(--x);
  width: var(--t); height: calc(var(--t) * 1.15);
  animation: cl-cae var(--d) cubic-bezier(.35, .1, .6, 1) var(--del) both;
}
.lluvia-petalos span::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 .5px rgba(166, 138, 123, .35);
  animation: cl-gira calc(var(--d) / 3) ease-in-out infinite alternate;
}
@keyframes cl-cae {
  0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--r)); opacity: .9; }
}
@keyframes cl-gira { from { transform: rotateY(0) rotateX(10deg); } to { transform: rotateY(160deg) rotateX(50deg); } }

/* ═══════════ 3. EL SOBRE (portada) ═══════════
   El mismo mantel de toda la invitación; el sobre de cera posado encima, con
   dos ramitas prensadas y unos pétalos sueltos. */
.portada {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem 1rem;
  background:
    radial-gradient(70% 45% at 50% 52%, rgba(255, 250, 244, .55), rgba(255, 250, 244, 0) 70%),
    var(--trama), var(--pliegues),
    linear-gradient(170deg, #D5BAA9 0%, #DDC6B8 35%, #E8C9C4 70%, #E4CAC1 100%);
  background-size: 100% 100%, 200px 200px, 100% 100%, 100% 100%;
  overflow: hidden;
  transition: opacity 1s ease, visibility 1s;
}
.portada--abierta { opacity: 0; visibility: hidden; pointer-events: none; }
.portada__flor, .portada__petalo { position: absolute; pointer-events: none; }
.portada__flor svg, .portada__petalo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 3px rgba(74, 56, 48, .2)); }
.portada__flor--a { width: min(72vw, 300px); top: 3%; left: -14%; transform: rotate(-6deg); }
.portada__flor--b { width: min(60vw, 250px); bottom: 2%; right: -12%; transform: scaleX(-1) rotate(-12deg); }
.portada__petalo { width: 18px; }
.portada__petalo--a { top: 22%; right: 16%; transform: rotate(40deg); }
.portada__petalo--b { bottom: 24%; left: 14%; transform: rotate(-70deg); width: 14px; }
.portada__instruccion {
  position: relative; z-index: 2;
  padding: .45rem 1rem;
  font-family: var(--sans); font-weight: 500; font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta);
  background: rgba(251, 247, 243, .72); border-radius: 999px;
  animation: cl-invita 2.4s ease-in-out infinite;
}
@keyframes cl-invita { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
/* sin la base, una invitación ajena no se enseña (main.js) */
body.evento-no-disponible .portada,
body.evento-no-disponible .contenido,
body.evento-no-disponible .btn-musica,
body.evento-no-disponible .capitulos,
body.evento-no-disponible .confirmar-fijo { display: none; }
.no-disponible {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  padding: 2rem; text-align: center;
}
.no-disponible__titulo { font-family: var(--serif); font-size: 1.7rem; color: var(--tinta); }
.no-disponible__texto { max-width: 34ch; font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; color: var(--tinta-suave); }

/* ═══════════ 4. LAS PIEZAS ═══════════ */

/* Títulos: cada pieza los acomoda a su modo (nada de "título centrado en
   cursiva con divisor"). La base: Cormorant derecha, con aire. */
.titulo { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; line-height: 1.05; color: var(--tinta); letter-spacing: -.005em; }

/* ── 2 · Portada: tarjeta en arco con ventana troquelada ── */
.hero { padding-top: .6rem; }
.pieza--arco {
  --r: calc(var(--ancho) / 2);
  padding: 14px 14px 18px;
  border-radius: var(--r) var(--r) 14px 14px;
  box-shadow: var(--sombra);
}
.pieza--arco::before {                                  /* filete de oro que sigue el arco */
  content: ''; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(194, 160, 106, .65);
  border-radius: calc(var(--r) - 7px) calc(var(--r) - 7px) 9px 9px;
}
.hero__foto {
  position: relative;
  height: clamp(160px, 31svh, 290px);
  border-radius: calc(var(--r) - 14px) calc(var(--r) - 14px) 4px 4px;
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 42%, #FBF7F3 0%, #F6E9E5 42%, #E8C9C4 100%);
  box-shadow: inset 0 3px 7px rgba(74, 56, 48, .28), inset 0 0 0 1px rgba(122, 90, 42, .18);
}
.hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__foto::after {                                    /* sombra interior del troquel, encima de la foto */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 3px 8px rgba(74, 56, 48, .3), inset 0 0 0 1px rgba(122, 90, 42, .2);
}
.foto-pendiente__aviso {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  padding: .25rem .7rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: .55rem;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--tinta); background: rgba(251, 247, 243, .85);
}
.hero__mini { margin-top: .85rem; }
.hero__mini, .hero .hero__mini {
  font-family: var(--sans); font-weight: 500; font-size: .64rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--oro-texto);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
/* sin el dibujo de la firma (aniversario, o mientras carga), el nombre en letra */
.hero__nombres {
  margin: .1rem 0 0;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(2.7rem, 13vw, 3.4rem); line-height: 1.1;
  color: var(--moka-profundo);
}
.hero__nombres .amp { font-size: .6em; color: var(--oro-texto); }
.hero .firma { width: 90%; margin-top: -.5rem; margin-bottom: -.2rem; }
.hero__fecha {
  white-space: pre-line;
  font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.35;
  color: var(--tinta);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
/* el listón con la promesa de la sorpresa: cruza la tarjeta y sale por los lados */
.liston {
  position: relative;
  margin: .85rem -1.65rem 0;
  padding: .5rem 1.6rem;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.05rem;
  color: var(--tinta);
  background: linear-gradient(180deg, #F6E6C7, #F1DDB3 55%, #E9D2A3);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  filter: drop-shadow(0 2px 2px rgba(74, 56, 48, .2));
}
.liston span::before, .liston span::after { content: '✦'; margin: 0 .5rem; font-size: .7em; color: var(--oro-texto); font-style: normal; }
html:not([data-modo="antes"]) .liston { display: none; }
/* la tarjetita de lugar con el nombre de la familia (main.js la llena) */
.hero__invitado {
  position: absolute; z-index: 3;
  right: -.6rem; top: calc(14px + clamp(160px, 31svh, 290px) - 3.4rem);
  max-width: 62%;
  padding: .7rem .9rem .6rem;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.05rem; line-height: 1.15;
  color: var(--tinta); text-align: center;
  background: var(--grano), linear-gradient(180deg, #fff, #F6E9E5);
  background-size: 170px 170px, 100% 100%;
  box-shadow: 0 1px 1px rgba(74, 56, 48, .14), 0 8px 14px -4px rgba(74, 56, 48, .32);
  border-radius: 3px;
  transform: rotate(4deg);
}
.hero__invitado::before {
  content: 'Con cariño para'; display: block; margin-bottom: .25rem;
  font-family: var(--sans); font-style: normal; font-weight: 500; font-size: .5rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro-texto);
}
.hero__invitado::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(194, 160, 106, .6); pointer-events: none; }
.hero__invitado small {
  display: block; margin-top: .3rem;
  font-family: var(--sans); font-style: normal; font-weight: 500; font-size: .52rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
}
.hero__invitado:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__invitado:not(:empty) { animation: cl-tarjetita .9s cubic-bezier(.25, 1.4, .45, 1) 1s backwards; }
}
@keyframes cl-tarjetita { from { opacity: 0; transform: translateY(-16px) rotate(-10deg) scale(1.15); } }
.ramita--hero-a { width: 230px; left: -60px; top: -.6rem; transform: rotate(-10deg); }
.ramita--hero-b { width: 120px; right: -20px; bottom: 2.4rem; }
/* después de la boda: la página de gracias (js/fx-gracias.js) dentro del arco */
.hero--gracias .pieza--arco { padding-top: 2.4rem; }
.gracias__mos { max-width: 100%; }

/* ── Hoy es el día: programa de mano ── */
.seccion--envivo { background: none; }
.pieza--programa { padding: 1.4rem 1.1rem 1.2rem; border-radius: 4px; box-shadow: var(--sombra); --fondo: #FFFDFB; }
.pieza--programa::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(194, 160, 106, .55); pointer-events: none; }
.pieza--programa .titulo { margin: .3rem 0 1.2rem; font-size: 2.1rem; }
.pieza--programa .vivo__sub { margin: -1rem 0 1rem; }

/* ── 3 · La fecha: hoja de calendario de escritorio + boleto ── */
.pieza--bloc { --giro: -1.2deg; padding-top: 14px; }
.pieza--bloc::before {                                   /* el lomo del bloc, con sus argollas */
  content: ''; position: absolute; z-index: 3; left: 12%; right: 12%; top: 0; height: 26px;
  background:
    radial-gradient(circle at 50% 70%, #FBF7F3 0 3.2px, rgba(0, 0, 0, 0) 3.6px) 0 0 / 28px 26px repeat-x,
    linear-gradient(180deg, #8A7266, var(--moka-profundo));
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 2px 4px rgba(74, 56, 48, .35);
}
.pieza--bloc::after {                                    /* una hoja de abajo asomándose */
  content: ''; position: absolute; z-index: -1; left: 4px; right: -4px; top: 18px; bottom: -5px;
  background: #F4ECE5; border-radius: 4px; transform: rotate(1.6deg);
  box-shadow: 0 6px 14px -6px rgba(74, 56, 48, .4);
}
.pieza--bloc .calendario {
  width: 100%;
  padding: 1.6rem 1rem 1.1rem;
  background: var(--grano), linear-gradient(180deg, #FFFDFB, #FBF5EF);
  background-size: 170px 170px, 100% 100%;
  box-shadow: var(--sombra);
}
.calendario__mes {
  font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1;
  color: var(--tinta); margin-bottom: .7rem;
}
.calendario__semana, .calendario__dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendario__semana span {
  padding-bottom: .35rem;
  font-family: var(--sans); font-weight: 600; font-size: .58rem; letter-spacing: .12em; color: var(--tinta-suave);
}
.calendario__semana { border-bottom: 1px solid rgba(194, 160, 106, .45); margin-bottom: .2rem; }
.calendario__dias span {
  height: 2rem; line-height: 2rem;
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--tinta);
  font-variant-numeric: lining-nums;
}
.calendario__hoy { font-weight: 700 !important; }
.calendario__pie { margin-top: .5rem; }
.ramita--fecha { width: 200px; right: -64px; top: -1.4rem; transform: scaleX(-1) rotate(-14deg); }

.pieza--boleto { --giro: 1.4deg; margin-top: -.2rem !important; }
/* la sombra va aparte (un papel borroso detrás): el boleto lleva máscara y la
   cuenta se mueve cada segundo, así no se recalcula un filtro a cada rato */
.pieza--boleto::before, .pieza--carta::before {
  content: ''; position: absolute; z-index: -1; left: 3%; right: 3%; top: 8px; bottom: -10px;
  background: rgba(74, 56, 48, .32); border-radius: 10px; filter: blur(12px);
}
.boleto {
  position: relative;
  padding: 1rem 1rem 1rem;
  background: var(--grano), linear-gradient(180deg, #F7E9CC, #F1DDB3);
  background-size: 170px 170px, 100% 100%;
  /* las muescas del boleto, a los lados */
  -webkit-mask: radial-gradient(circle at 0 var(--corte, 52%), transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% var(--corte, 52%), transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 var(--corte, 52%), transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% var(--corte, 52%), transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
  border-radius: 6px;
}
.boleto::before {                                        /* la línea perforada */
  content: ''; position: absolute; left: 16px; right: 16px; top: var(--corte, 52%);
  border-top: 1.5px dashed rgba(122, 90, 42, .35);
}
.boleto__talon {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--sans); font-weight: 500; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-texto);
}
.boleto__talon b { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; color: var(--tinta); }
.pieza--boleto .titulo {
  margin: -.15rem 0 .45rem;
  font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--tinta);
}
.flip {
  --dw: clamp(1.7rem, 7.8vw, 2.3rem);
  grid-template-columns: repeat(4, auto);
  gap: .45rem .5rem;
  margin: 0 auto .7rem;
}
.flip__lab { margin-top: .35rem; font-size: .52rem; color: var(--tinta); }
.flip__llego { font-size: 2.6rem; margin-bottom: .4rem; }
.pieza--boleto .texto { position: relative; margin: 1.1rem auto .75rem; max-width: 18rem; font-style: italic; font-size: 1.05rem; line-height: 1.3; }

/* ── 4 · Nuestra historia: carta de algodón con orilla rasgada ── */
.seccion--historia-texto { background: none; }           /* componentes.css le ponía fondo propio: aquí manda el mantel */
.pieza--carta { --giro: .8deg; }
.carta-algodon {
  --fondo: #FFFDFA;
  padding: 1.5rem 1.35rem 1.2rem;
  text-align: left;
  /* renglones muy tenues, como papel de carta */
  background:
    var(--grano),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 1.62rem, rgba(194, 160, 106, .16) 1.62rem calc(1.62rem + 1px)),
    radial-gradient(130% 80% at 18% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%),
    var(--fondo);
  background-size: 170px 170px, 100% 100%, 100% 100%, 100% 100%;
}
.carta-algodon .titulo { margin: .2rem 0 .6rem; font-size: 2rem; }
.carta-algodon .titulo::first-letter { font-family: var(--script); font-size: 1.5em; color: var(--oro-texto); }
.historia__texto {
  max-width: none; margin: 0 0 1rem;
  font-size: 1.12rem; line-height: 1.45;
}
.juntos { max-width: none; text-align: center; padding-top: .7rem; border-top: 1px solid rgba(194, 160, 106, .4); }
.juntos__cab { font-size: 1.9rem; margin-bottom: .55rem; }
.juntos__grid { gap: .4rem; }
.juntos__tarjeta { padding: .5rem .2rem .45rem; border-radius: 8px; background: rgba(255, 255, 255, .8); }
.juntos__ico { width: 1.75rem; height: 1.75rem; }
.juntos__n { margin-top: .25rem; font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
.juntos__tarjeta--ancha { flex-direction: row; justify-content: center; gap: .55rem; padding: .45rem .6rem; }
.juntos__tarjeta--ancha .juntos__n { margin-top: 0; font-size: clamp(1.45rem, 6.6vw, 1.9rem); }
.juntos__tarjeta--ancha .juntos__l { margin-top: 0; }
.juntos__l { font-size: .52rem; color: var(--tinta-suave); }
.juntos__pie { margin-top: .5rem; font-size: 1rem; }
.juntos__muestra { margin-top: .35rem; }
.ramita--historia { width: 130px; left: -26px; bottom: 1.4rem; transform: rotate(-18deg); }

/* ── 5 · Con su bendición: esquinas cortadas, doble filete y medallón ── */
.pieza--corte { --giro: -.7deg; padding-top: 1.5rem; }
.corte {
  --c: 18px;
  position: relative;
  padding: 2.4rem 1.2rem 1.3rem;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: var(--grano), radial-gradient(120% 70% at 50% 0%, #fff, rgba(255, 255, 255, 0) 60%), #FBF4EF;
  background-size: 170px 170px, 100% 100%, 100% 100%;
}
.corte::before, .corte::after {                           /* el filete de oro, con las mismas esquinas */
  content: ''; position: absolute; pointer-events: none;
  clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k));
}
.corte::before { --k: 12px; inset: 8px; background: rgba(194, 160, 106, .7); }
.corte::after { --k: 11.6px; inset: 9px; background: var(--grano), #FBF4EF; background-size: 170px 170px, 100% 100%; }
.corte > * { position: relative; z-index: 1; }
.medallon {
  position: absolute !important; z-index: 3 !important;
  left: 50%; top: 0; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  font-family: var(--script); font-size: 1.45rem; color: var(--moka-profundo);
  background: radial-gradient(circle at 35% 30%, #FFF8E8, #F1DDB3 60%, #E3CD9F);
  box-shadow: 0 0 0 3px #FBF4EF, 0 0 0 4px rgba(194, 160, 106, .8), 0 6px 12px -4px rgba(74, 56, 48, .45);
}
.pieza--corte > .medallon { top: 1.5rem; }
.medallon i { font-family: var(--serif); font-size: .7em; margin: 0 .05em; color: var(--oro-texto); }
.seccion--familias .titulo { font-size: 1.55rem; line-height: 1.15; max-width: 16rem; margin: 0 auto 1.1rem; }
.seccion--familias .titulo { font-style: italic; font-weight: 400; }
.familias { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.familia { padding-top: .2rem; }
.familia + .familia { border-left: 1px solid rgba(194, 160, 106, .45); padding-left: .8rem; }
.familia:first-child { padding-right: .1rem; }
.familia__de { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--tinta-suave); margin-bottom: .55rem; }
.padres + .padres { margin-top: .7rem; }
.padres__rol { font-family: var(--sans); font-weight: 600; font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-texto); margin-bottom: .3rem; }
.padres__nombre { font-family: var(--serif); font-weight: 500; font-size: 1.06rem; line-height: 1.3; color: var(--tinta); }
.ramita--familias { width: 210px; left: -70px; top: .2rem; transform: rotate(8deg); }

/* ── 6 · Dónde: dos postales ── */
.pieza--postales { --giro: 0deg; }
.pieza--postales > .titulo {
  display: inline-block; margin-bottom: .55rem; padding: .45rem 1.1rem .5rem;
  font-size: 1.55rem; font-style: italic;
  background: var(--grano), var(--papel); background-size: 170px 170px, 100% 100%;
  border-radius: 2px; transform: rotate(-1.5deg);
  box-shadow: 0 1px 1px rgba(74, 56, 48, .12), 0 6px 12px -6px rgba(74, 56, 48, .4);
}
.lugar { position: relative; }
.postal {
  position: relative; text-align: left;
  padding: .75rem .75rem .75rem;
  border-radius: 3px;
  box-shadow: var(--sombra);
}
.postal::before { content: ''; position: absolute; inset: 5px; border: 1px dashed rgba(194, 160, 106, .45); pointer-events: none; border-radius: 2px; }
.postal--misa { --fondo: #FBF7F3; transform: rotate(-1deg); z-index: 1; }
.postal--recepcion {
  --fondo: #F8EEE9;
  z-index: 2;
  margin-top: -.1rem; margin-left: 4%;
  display: grid; grid-template-columns: 40% 1fr; gap: .75rem; align-items: center;
}
.lugar__rotulo { font-family: var(--sans); font-weight: 600; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-texto); }
.lugar__nombre { margin-top: .15rem; font-family: var(--serif); font-weight: 600; font-size: 1.28rem; line-height: 1.05; color: var(--tinta); }
.lugar__direccion { margin-top: .1rem; font-family: var(--sans); font-size: .7rem; color: var(--tinta-suave); }
.postal--misa .lugar__direccion { margin-bottom: .55rem; }
/* la foto pegada con esquineros dorados */
.lugar__foto { position: relative; margin: 0; border: 4px solid #fff; box-shadow: 0 1px 3px rgba(74, 56, 48, .3); background: var(--arena); }
.lugar__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.esquinero { position: absolute; width: 16px; height: 16px; background: linear-gradient(135deg, #E3CD9F, #C2A06A 60%, #E3CD9F); filter: drop-shadow(0 1px 1px rgba(74, 56, 48, .3)); }
.esquinero--tl { left: -6px; top: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.esquinero--br { right: -6px; bottom: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* misa: foto y mapa lado a lado, y abajo los dos botones con el pin */
.postal__vistas { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto auto; gap: .55rem .55rem; }
.postal--misa .lugar__foto { height: clamp(118px, 18svh, 158px); }
.postal--misa .lugar__foto img { object-position: 50% 55%; }   /* la foto de Pedro: el arco y la pirámide */
.postal__vistas .mapa { display: contents; }
.mapa__lienzo { position: relative; overflow: hidden; border-radius: 3px; background: var(--marfil); box-shadow: inset 0 0 0 1px rgba(166, 138, 123, .4); }
.postal__vistas .mapa__lienzo { height: clamp(118px, 18svh, 158px); }
.mapa__marco { display: block; width: 100%; height: 100%; border: 0; }
.mapa__botones { display: flex; gap: .45rem; }
.postal__vistas .mapa__botones { grid-column: 1 / -1; }
.mapa__botones .btn { flex: 1 1 0; min-height: 40px; padding: .45rem .5rem; font-size: .6rem; }
/* recepción: foto a la izquierda, datos y «Ver ubicación» a la derecha */
.postal--recepcion .lugar__foto { height: clamp(112px, 16svh, 140px); transform: rotate(-2deg); }
.postal--recepcion .lugar__foto img { object-position: 50% 46%; }   /* la carpa iluminada al fondo del andador */
.postal__texto { min-width: 0; }
.postal__texto .lugar__nombre { font-size: 1.2rem; }
.mapa__boton {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
  min-height: 40px; padding: .45rem 1rem;
  border-radius: 999px; list-style: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--champana);
  background: linear-gradient(180deg, #6A544A, var(--moka-profundo));
  box-shadow: 0 5px 10px -4px rgba(74, 56, 48, .55);
}
.mapa__boton::-webkit-details-marker { display: none; }
.mapa__boton::after { content: '↗'; font-size: .85rem; letter-spacing: 0; }
/* el mapa de la recepción se despliega hacia ARRIBA, encima de las dos
   postales (js/clasica.js le da el alto de las dos) */
details.mapa[open] .mapa__caja {
  position: absolute; z-index: 6; left: -.3rem; right: -.3rem; bottom: -.3rem; height: var(--alto-mapa, 24rem);
  display: flex; flex-direction: column; gap: .55rem;
  padding: .8rem .8rem .8rem;
  background: var(--grano), #FBF7F3; background-size: 170px 170px, 100% 100%;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(74, 56, 48, .2), 0 22px 40px -14px rgba(74, 56, 48, .6);
  animation: cl-despliega .45s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes cl-despliega { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
details.mapa[open] .mapa__lienzo { flex: 1; min-height: 150px; }
.mapa__titulo { padding-right: 2.6rem; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; line-height: 1.1; color: var(--tinta); }
.mapa__titulo small { display: block; margin-top: .15rem; font-family: var(--sans); font-weight: 500; font-size: .62rem; color: var(--tinta-suave); }
.mapa__cerrar {
  position: absolute; right: .55rem; top: .55rem;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; color: var(--tinta);
  background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(166, 138, 123, .6);
}
.ramita--donde { width: 190px; right: -70px; top: -.6rem; transform: scaleX(-1) rotate(-6deg); }

/* ── 7 · El orden de la noche: menú doblado en tres ── */
.pieza--menu {
  --giro: .9deg;
  padding: 1.1rem 1.3rem 1rem;
  text-align: left;
  border-radius: 3px;
  background:
    var(--grano),
    /* los dos dobleces del menú, a un tercio y a dos tercios */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 32.6%, rgba(94, 74, 64, .09) 33.1%, rgba(255, 255, 255, .7) 33.5%, rgba(0, 0, 0, 0) 35.5%,
      rgba(0, 0, 0, 0) 65.6%, rgba(94, 74, 64, .09) 66.1%, rgba(255, 255, 255, .7) 66.5%, rgba(0, 0, 0, 0) 68.5%),
    linear-gradient(180deg, #F8EEDD, #F4E5CF 50%, #F7EBD6);
  background-size: 170px 170px, 100% 100%, 100% 100%;
  box-shadow: var(--sombra);
}
.pieza--menu::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(194, 160, 106, .55); pointer-events: none; }
.menu__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .55rem; }
.menu__cab .titulo { margin-top: .25rem; font-size: 1.75rem; }
.monograma {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  font-family: var(--script); font-size: 1.25rem; color: var(--oro-texto);
  box-shadow: inset 0 0 0 1px rgba(194, 160, 106, .8), inset 0 0 0 4px #F7EBD6, inset 0 0 0 5px rgba(194, 160, 106, .45);
}
.monograma i { font-family: var(--serif); font-size: .7em; margin: 0 .04em; }
.itinerario { list-style: none; }
.itinerario__momento { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; }
.itinerario__hora {
  order: 3; flex: none;
  font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .06em;
  color: var(--oro-texto); white-space: nowrap;
}
.itinerario__momento::after {                             /* la línea punteada del menú */
  content: ''; order: 2; flex: 1; min-width: 1rem;
  border-bottom: 2px dotted rgba(122, 90, 42, .45);
  transform: translateY(-.25rem);
}
.itinerario__que {
  order: 1; flex: 0 1 auto; min-width: 0;
  font-family: var(--serif); font-weight: 500; font-size: 1.18rem; line-height: 1.1; color: var(--tinta);
}
.itinerario__detalle {
  display: block; margin-top: .05rem;
  font-style: italic; font-weight: 400; font-size: .92rem; color: var(--tinta-suave);
}
.ramita--orden { width: 120px; right: -18px; bottom: 1.8rem; transform: scaleX(-1) rotate(10deg); }

/* ── 8 · Qué ponerse: etiqueta colgante ── */
.pieza--etiqueta { --giro: -1deg; margin-top: 1.4rem; }
.etiqueta-papel {
  position: relative;
  padding: 2.1rem 1rem 1rem;
  clip-path: polygon(14% 0, 86% 0, 100% 7%, 100% 100%, 0 100%, 0 7%);
  --fondo: #FBF5F1;
}
.etiqueta__ojal {
  position: absolute; left: 50%; top: .75rem; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: var(--saten);
  background-size: 100% 4000%; background-position: 50% 50%;
  box-shadow: 0 0 0 3px #E3CD9F, 0 0 0 4px rgba(122, 90, 42, .5), inset 0 1px 2px rgba(74, 56, 48, .4);
}
.pieza--etiqueta::before {                                /* el cordón de la etiqueta */
  content: ''; position: absolute; z-index: 3; left: 50%; top: -1.8rem; width: 1px; height: 3rem;
  background: linear-gradient(180deg, rgba(122, 90, 42, 0), rgba(122, 90, 42, .65));
  transform: rotate(-8deg); transform-origin: 50% 100%;
}
.etiqueta-papel .titulo { font-size: 1.65rem; }
.dresscode__sub {
  display: inline-block; margin: .3rem 0 .2rem; padding: .2rem .8rem;
  font-family: var(--sans); font-weight: 600; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--champana); background: var(--moka-profundo); border-radius: 999px;
}
.etiqueta-papel > .texto { font-size: 1.05rem; }
.dresscode__laminas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem; margin: .4rem 0 .3rem; align-items: end; }
.lamina { position: relative; height: clamp(118px, 18svh, 160px); display: flex; align-items: flex-end; justify-content: center; }
.lamina img, .lamina svg { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.lamina:nth-child(odd) { transform: translateY(-.25rem); }
.lamina--respaldo svg { overflow: visible; }
.evitar { display: flex; align-items: center; gap: .65rem; text-align: left; padding: .55rem .65rem; border-radius: 6px; background: rgba(232, 201, 196, .28); }
.evitar__colores { flex: none; display: flex; }
.evitar__punto { position: relative; display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(74, 56, 48, .3); }
.evitar__punto + .evitar__punto { margin-left: -.45rem; }
.evitar__punto--blanco { background: #FFFFFF; }
.evitar__punto--cafe { background: #7B5A44; }
.evitar__punto::after {                                   /* la raya de «no» */
  content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; margin-left: -.75px;
  background: var(--moka-profundo); transform: rotate(45deg);
}
.evitar .texto { font-size: .95rem; line-height: 1.32; }
.ramita--vestir { width: 200px; left: -62px; top: 3.6rem; transform: rotate(-4deg); }
/* ── Para los peques: tarjetita pegada con cinta ── */
.pieza--peques {
  --giro: 1.6deg; --fondo: #F6E9E5;
  display: grid; grid-template-columns: 34% 1fr; gap: .6rem; align-items: center;
  margin-top: -.2rem; padding: .8rem .9rem .8rem .6rem;
  width: calc(var(--ancho) * .94);
  text-align: left;
  border-radius: 3px;
  box-shadow: var(--sombra);
}
.cinta-washi {
  position: absolute; left: 50%; top: -.65rem; width: 5.5rem; height: 1.3rem; margin-left: -2.75rem;
  background: repeating-linear-gradient(90deg, rgba(241, 221, 179, .82) 0 6px, rgba(232, 201, 196, .82) 6px 12px);
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(74, 56, 48, .15);
}
.ninos__marco { height: clamp(96px, 14svh, 124px); display: flex; align-items: center; justify-content: center; }
.ninos__dibujo, .ninos__marco svg { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.ninos__texto .titulo { font-size: 1.4rem; margin-bottom: .2rem; }
.ninos__texto .texto { font-size: .98rem; line-height: 1.3; }

/* ── 9 · Nosotros: abanico de instantáneas ── */
.pieza--fotos { padding: .2rem 0 0; }
.pieza--fotos > .titulo {
  font-family: var(--script); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--moka-profundo);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  margin-bottom: .3rem;
  display: inline-block; padding: .1rem 1rem .3rem; border-radius: 4px;
  background: radial-gradient(closest-side, rgba(251, 247, 243, .85), rgba(251, 247, 243, 0));
}
.abanico {
  position: relative; height: clamp(300px, 46svh, 400px);
  margin: 0 auto; width: 100%;
  cursor: pointer; outline: none;
  -webkit-user-select: none; user-select: none;
}
.abanico:focus-visible { box-shadow: 0 0 0 2px var(--oro); border-radius: 6px; }
.instantanea {
  position: absolute; left: 50%; top: 50%;
  width: 62%; aspect-ratio: 4 / 5.1;
  padding: 6% 6% 18%;
  background: var(--grano), #FFFDFA; background-size: 170px 170px, 100% 100%;
  box-shadow: 0 1px 2px rgba(74, 56, 48, .18), 0 12px 22px -8px rgba(74, 56, 48, .45);
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform .7s cubic-bezier(.2, .8, .25, 1), opacity .4s ease;
}
.instantanea img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--rosa-claro); }
.instantanea figcaption {
  position: absolute; left: 0; right: 0; bottom: 4%;
  font-family: var(--script); font-size: 1.35rem; color: var(--tinta-suave); text-align: center;
}
.instantanea--sale { transform: translate(-50%, -50%) translate(0, -12%) rotate(-14deg) scale(1.04) !important; opacity: 0; }
.nosotros__aviso {
  display: inline-block; margin-top: .4rem; padding: .3rem .9rem;
  font-size: .98rem; border-radius: 999px; background: rgba(251, 247, 243, .82);
}
.nosotros__toca { font-style: normal; font-family: var(--sans); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-texto); }
.seccion--nosotros .pieza--fotos .sigue { margin-top: .6rem; }
.ramita--nosotros { width: 190px; left: -64px; bottom: 3rem; transform: rotate(10deg); }

/* ── 10 · Confirma: tarjeta de respuesta con orilla festoneada ── */
.pieza--respuesta { --giro: -.6deg; }
.festoneada {
  --r: 7px;
  position: relative;
  padding: calc(var(--r) + 1.3rem) 1.3rem calc(var(--r) + 1.1rem);
  --fondo: #FFFDFA;
  -webkit-mask:
    radial-gradient(circle at center, #000 calc(var(--r) - .6px), transparent var(--r)) 0 0 / calc(var(--r) * 2) calc(var(--r) * 2) round,
    linear-gradient(#000 0 0) center / calc(100% - var(--r) * 1.2) calc(100% - var(--r) * 1.2) no-repeat;
          mask:
    radial-gradient(circle at center, #000 calc(var(--r) - .6px), transparent var(--r)) 0 0 / calc(var(--r) * 2) calc(var(--r) * 2) round,
    linear-gradient(#000 0 0) center / calc(100% - var(--r) * 1.2) calc(100% - var(--r) * 1.2) no-repeat;
}
.festoneada::before, .festoneada::after { content: ''; position: absolute; pointer-events: none; border-radius: 3px; }
.festoneada::before { inset: calc(var(--r) + 7px); border: 1px solid rgba(194, 160, 106, .75); }
.festoneada::after { inset: calc(var(--r) + 11px); border: 1px solid rgba(194, 160, 106, .32); }
.festoneada > * { position: relative; z-index: 1; }
.respuesta__rsvp { font-family: var(--sans); font-weight: 600; font-size: .58rem; letter-spacing: .34em; color: var(--oro-texto); }
.pieza--respuesta .titulo { margin: .25rem 0 .3rem; font-size: 1.75rem; }
.pieza--respuesta > .festoneada > .texto { font-size: .98rem; line-height: 1.3; margin-bottom: .55rem; color: var(--tinta-suave); }
.confirmar { text-align: left; }
.confirmar__familia { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--tinta); text-align: center; }
.confirmar__lugares, .confirmar__previo { margin-top: .15rem; font-family: var(--sans); font-size: .68rem; line-height: 1.4; color: var(--tinta-suave); text-align: center; }
.confirmar__previo { padding: .35rem .6rem; border-radius: 6px; background: rgba(241, 221, 179, .45); color: var(--tinta); }
.confirmar__campo { margin-top: .55rem; }
.confirmar__campo label, .confirmar legend, .mensaje-form__etiqueta {
  display: block; margin-bottom: .3rem;
  font-family: var(--sans); font-weight: 600; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta);
}
.confirmar input[type="text"], .confirmar textarea, .mensaje-form input, .mensaje-form textarea {
  display: block; width: 100%;
  padding: .55rem .7rem;
  font-family: var(--serif); font-size: 1.05rem; color: var(--tinta);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(166, 138, 123, .65); border-radius: 6px;
  outline: none; resize: none;
}
.confirmar input:focus, .confirmar textarea:focus, .mensaje-form input:focus, .mensaje-form textarea:focus { border-color: var(--moka-profundo); box-shadow: 0 0 0 3px rgba(194, 160, 106, .3); }
.confirmar textarea { height: 3.6rem; }
fieldset { border: 0; min-width: 0; }
.confirmar__vienen { margin-top: .6rem; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.confirmar__vienen legend { grid-column: 1 / -1; float: left; width: 100%; }
.confirmar__eleccion, .confirmar__opcion { position: relative; display: block; cursor: pointer; }
.confirmar__eleccion input, .confirmar__opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.confirmar__eleccion span {
  display: flex; align-items: center; gap: .45rem;
  min-height: 46px; padding: .4rem .6rem;
  font-family: var(--serif); font-weight: 500; font-size: 1.02rem; line-height: 1.1;
  border: 1px solid rgba(166, 138, 123, .6); border-radius: 6px; background: rgba(255, 255, 255, .55);
  transition: background .2s, box-shadow .2s;
}
.confirmar__eleccion span::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--moka);
  transition: box-shadow .2s;
}
.confirmar__eleccion input:checked + span { background: #fff; box-shadow: inset 0 0 0 1px var(--moka-profundo), 0 4px 10px -6px rgba(74, 56, 48, .5); }
.confirmar__eleccion input:checked + span::before { box-shadow: inset 0 0 0 5px var(--moka-profundo); }
.confirmar__eleccion input:focus-visible + span, .confirmar__opcion input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.confirmar__detalle { margin-top: .55rem; }
.confirmar__opciones { display: flex; flex-wrap: wrap; gap: .35rem; }
.confirmar__opcion span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; padding: .3rem .8rem;
  font-family: var(--serif); font-weight: 500; font-size: 1.02rem;
  border: 1px solid rgba(166, 138, 123, .6); border-radius: 999px; background: rgba(255, 255, 255, .55);
}
.confirmar__opcion input:checked + span { color: var(--champana); background: var(--moka-profundo); border-color: var(--moka-profundo); }
.confirmar__nota { margin-top: .2rem; font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--tinta-suave); }
.confirmar__boton { display: flex; width: 100%; margin-top: .65rem; min-height: 48px; font-size: .68rem; }
.confirmar__estado { min-height: 1.1rem; margin-top: .4rem; font-family: var(--serif); font-size: .98rem; line-height: 1.3; text-align: center; }
.confirmar__estado--ok { color: var(--tinta); font-weight: 600; }
.confirmar__estado--error, .mensaje-form__estado--error { color: #8A3B30; }
.confirmar__estado--aviso { color: var(--oro-texto); }
.confirmar__estado--espera { color: var(--tinta-suave); font-style: italic; }
.confirmar__nombre--falta input { border-color: #8A3B30; animation: cl-tiembla .4s ease; }
@keyframes cl-tiembla { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.confirmar--hecho .confirmar__boton { background: linear-gradient(180deg, #A68A7B, #8A7266); }
.confirmar__cerrado { padding: .6rem 0 .2rem; }
.ramita--confirmar { width: 210px; right: -70px; top: 1rem; transform: scaleX(-1) rotate(-8deg); }

/* ── 11 · Lluvia de sobres: sobre con timbre y matasellos ── */
.pieza--sobre { --giro: .8deg; }
.sobrecito {
  position: relative; display: block; width: 92%; margin: 0 auto;
  cursor: pointer; outline: none;
  filter: drop-shadow(0 2px 2px rgba(74, 56, 48, .15)) drop-shadow(0 14px 16px rgba(74, 56, 48, .22));
  transform: rotate(-3deg);
}
.sobrecito:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.sobrecito__dibujo { display: block; width: 100%; height: auto; }
.sobrecito--toca { animation: cl-sacude .6s ease; }
@keyframes cl-sacude { 0%, 100% { transform: rotate(-3deg); } 30% { transform: rotate(1deg) translateY(-6px); } 60% { transform: rotate(-5deg); } }
.sobrecito__lluvia { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.sobrecito__lluvia i {
  position: absolute; top: 30%; left: var(--x);
  width: 30px; height: 20px; border-radius: 2px;
  background:
    linear-gradient(to bottom right, rgba(0, 0, 0, 0) 49%, rgba(166, 138, 123, .55) 50%, rgba(0, 0, 0, 0) 52%) 0 0 / 50% 100% no-repeat,
    linear-gradient(to bottom left, rgba(0, 0, 0, 0) 49%, rgba(166, 138, 123, .55) 50%, rgba(0, 0, 0, 0) 52%) 100% 0 / 50% 100% no-repeat,
    var(--c);
  box-shadow: 0 2px 4px rgba(74, 56, 48, .25);
  animation: cl-sobrecitos 1.6s cubic-bezier(.3, .1, .6, 1) var(--del) both;
}
@keyframes cl-sobrecitos {
  0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 0; }
  20% { opacity: 1; transform: translate(calc(var(--dx) * .3), -60px) rotate(calc(var(--r) * .3)) scale(1); }
  100% { transform: translate(var(--dx), 170px) rotate(var(--r)) scale(1); opacity: 0; }
}
.sobres { position: relative; margin: -1.2rem auto 0; width: 94%; padding: 1.4rem 1.1rem .9rem; border-radius: 3px; box-shadow: var(--sombra); transform: rotate(1.2deg); }
.sobres .titulo { font-size: 1.7rem; margin-bottom: .35rem; }
.sobres .texto { font-size: 1.05rem; }
.ramita--sobres { width: 120px; left: -14px; top: 1.6rem; transform: rotate(-24deg); }

/* ── 12 · Déjanos unas palabras: fichero con pestañas ── */
.pieza--ficha { --giro: -.5deg; }
.ficha {
  position: relative;
  padding: 1.2rem 1.15rem 1rem;
  border-radius: 0 4px 4px 4px;
  box-shadow: var(--sombra);
  --fondo: #FFFDFA;
}
.ficha::before {                                           /* el renglón rosa de ficha bibliográfica */
  content: ''; position: absolute; left: 0; right: 0; top: 3.4rem; height: 1px; background: rgba(232, 201, 196, .9);
}
.ficha .titulo { font-size: 1.7rem; margin-bottom: .55rem; }
.ficha > .texto { font-size: 1rem; line-height: 1.35; margin-bottom: .55rem; }
.mensaje-form { text-align: left; }
.mensaje-form textarea { height: 6.2rem; }
.mensaje-form .mensaje-form__etiqueta:not(:first-child) { margin-top: .5rem; }
.mensaje-form__contador { margin-top: .2rem; font-family: var(--sans); font-size: .58rem; color: var(--tinta-suave); text-align: right; min-height: .8rem; }
.mensaje-form .btn { display: flex; width: 100%; margin-top: .4rem; }
.mensaje-form__estado { min-height: 1rem; margin-top: .35rem; font-family: var(--serif); font-size: .98rem; line-height: 1.3; text-align: center; color: var(--tinta); }
.mensaje-form__estado--ok { font-weight: 600; }
.mensaje-form--sellado .mensaje-form__estado--ok { animation: cl-sellado .55s cubic-bezier(.2, .8, .25, 1.3); }
@keyframes cl-sellado { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
/* las pestañas (js/clasica.js): separadores de fichero, de papel */
.pestanas { display: flex; gap: .25rem; margin-bottom: -1px; position: relative; z-index: 2; }
.pestanas button {
  flex: 0 1 auto; min-height: 42px; padding: .5rem .9rem .45rem;
  border: 0; border-radius: 8px 8px 0 0;
  font-family: var(--sans); font-weight: 600; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
  background: linear-gradient(180deg, #F1E2DA, #E9D6CC);
  box-shadow: inset 0 -6px 8px -8px rgba(74, 56, 48, .5);
}
.pestanas button[aria-selected="true"] {
  color: var(--tinta);
  background: #FFFDFA;
  box-shadow: 0 -3px 6px -3px rgba(74, 56, 48, .25);
}
.pestanas button:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.pestana--oculta { display: none !important; }
.ramita--palabras { width: 190px; right: -66px; top: .4rem; transform: scaleX(-1) rotate(-12deg); }
/* la cápsula: el frasco más chico para que todo quepa en una pantalla, y el
   formulario como una hoja que sube ENCIMA del frasco */
.ficha--capsula { padding-bottom: 1rem; }
.capsula-escena { width: min(15.5rem, 100%) !important; margin-bottom: .4rem; }
.capsula__cuenta { margin: -.2rem 0 .3rem; }
.ficha--capsula #capsula-texto { font-size: .98rem; line-height: 1.32; margin-bottom: .2rem; }
.capsula__faltan { font-family: var(--serif); font-style: italic; font-size: .98rem; }
.capsula__escribir { margin-top: .6rem; width: 100%; display: flex; }
.ficha--capsula .mensaje-form {
  position: absolute; z-index: 5; left: .45rem; right: .45rem; bottom: .45rem;
  padding: 1.1rem 1rem .8rem;
  background: var(--grano), #FFFDFA; background-size: 170px 170px, 100% 100%;
  border-radius: 6px;
  box-shadow: 0 -2px 4px rgba(74, 56, 48, .08), 0 -18px 34px -12px rgba(74, 56, 48, .45);
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .25, 1), visibility 0s .45s;
}
.capsula--escribiendo .ficha--capsula .mensaje-form { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .25, 1); }
.ficha--capsula .mensaje-form::before { content: ''; display: block; width: 2.6rem; height: 4px; margin: -.45rem auto .55rem; border-radius: 4px; background: rgba(166, 138, 123, .45); }
.hoja__cerrar {
  position: absolute; right: .45rem; top: .35rem;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; color: var(--tinta); background: transparent;
}
/* la cápsula abierta (aniversario): cartas en carrusel */
.capsula__cartas { margin-top: .6rem; }
.cartas {
  display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .6rem .2rem 1rem; margin: 0 -.6rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cartas::-webkit-scrollbar { display: none; }
.cartas > .texto { padding: 0 1rem; }
.carta {
  position: relative; flex: 0 0 82%; scroll-snap-align: center;
  padding: 1.6rem 1.1rem 1rem;
  text-align: left;
  background: var(--grano), #FFFCF9; background-size: 170px 170px, 100% 100%;
  box-shadow: 0 2px 4px rgba(74, 56, 48, .12), 0 10px 18px -8px rgba(74, 56, 48, .4);
  transform: translateY(14px) rotate(var(--giro, -.8deg));
  opacity: 0;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .25, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  overflow: hidden;
}
.carta:nth-child(even) { --giro: .8deg; }
.carta--abierta { opacity: 1; transform: rotate(var(--giro, -.8deg)); }
.carta__solapa {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(165deg, #F2DFDA 0%, #E8C9C4 50%, #DDBBB3 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1s cubic-bezier(.6, 0, .2, 1), opacity .4s ease 1s;
  transition-delay: calc(var(--i, 0) * 90ms + .35s);
}
.carta--abierta .carta__solapa { clip-path: polygon(0 0, 100% 0, 50% 0, 50% 0); opacity: 0; }
.carta__sello {
  position: absolute; left: 50%; top: 1.5rem; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, 0);
  background: radial-gradient(circle at 35% 30%, #8A7662, #5E4A40 60%, #3E302A);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: opacity .5s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 90ms + .2s);
}
.carta--abierta .carta__sello { opacity: 0; transform: translate(-50%, -12px) scale(.6); }
.carta__mensaje { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: var(--tinta); }
.carta__firma { margin-top: .5rem; font-family: var(--script); font-size: 1.5rem; color: var(--oro-texto); text-align: right; }
.muestra-letrero { margin: .5rem auto .2rem; }

/* ── 13 · Álbum compartido: tapa de lino con placa ── */
.pieza--album { --giro: .6deg; }
.album__tapa {
  position: relative; height: 4.8rem;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(94, 74, 64, .08) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #B39684, var(--moka) 60%, #9A7E6F);
  box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: center;
}
.album__tapa::before { content: ''; position: absolute; left: 9px; right: 9px; top: 9px; bottom: 0; border: 1px solid rgba(241, 221, 179, .55); border-bottom: 0; border-radius: 3px 3px 0 0; pointer-events: none; }
.album__placa {
  display: flex; align-items: baseline; gap: .1rem;
  padding: .3rem 1rem .35rem;
  font-family: var(--script); font-size: 1.6rem; line-height: 1; color: var(--moka-profundo);
  background: linear-gradient(180deg, #F6E6C7, #E3CD9F);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(122, 90, 42, .5), 0 2px 4px rgba(0, 0, 0, .25);
}
.album__placa i { font-family: var(--serif); font-size: .7em; margin: 0 .05em; color: var(--oro-texto); }
.album__placa small { margin-left: .6rem; font-family: var(--sans); font-size: .5rem; letter-spacing: .18em; color: var(--tinta); }
.album__hoja {
  position: relative; margin-top: -.6rem;
  padding: 1.1rem 1rem .9rem;
  border-radius: 2px 2px 6px 6px;
  box-shadow: var(--sombra);
  --fondo: #FFFDFA;
}
.album__hoja .titulo { font-size: 1.7rem; margin-bottom: .35rem; }
.album__hoja > .texto { font-size: 1rem; line-height: 1.35; }
.galeria-acciones { flex-wrap: nowrap; gap: .4rem; margin-top: .7rem; }
.galeria-acciones .btn { flex: 1 1 0; min-width: 0; padding: .5rem .4rem; font-size: .58rem; letter-spacing: .1em; }
#galeria-aviso { margin-top: .4rem; font-size: .98rem; }
#galeria-aviso:empty { display: none; }
.album__caduca { margin-top: .5rem; padding: .4rem .6rem; border-radius: 6px; background: rgba(241, 221, 179, .45); font-family: var(--serif); font-size: .98rem; line-height: 1.3; color: var(--tinta); }
/* la galería: una tira de dos renglones que se desliza de lado (no alarga la sección) */
.galeria-grid, .galeria-muestra {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 30%;
  gap: .35rem; margin: .6rem -.3rem 0; padding: 0 .3rem .4rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.galeria-grid[hidden] { display: none; }
.galeria-item { position: relative; min-width: 0; scroll-snap-align: start; }
.galeria-item > img, .galeria-item > video, .galeria-grid img, .galeria-muestra img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; touch-action: manipulation;
  box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(74, 56, 48, .25);
}
.galeria-video { width: 100%; aspect-ratio: 1; border: 0; border-radius: 3px; background: linear-gradient(145deg, #6A544A, var(--moka-profundo)); color: var(--champana); display: grid; place-content: center; gap: .3rem; }
.galeria-video__miniatura { cursor: pointer; }
.galeria-video__insignia { position: absolute; left: .4rem; bottom: .4rem; width: 1.9rem; height: 1.9rem; display: grid; place-content: center; border-radius: 50%; color: #fff; background: rgba(74, 56, 48, .8); pointer-events: none; font-size: .7rem; }
.galeria-video__play { width: 2.2rem; height: 2.2rem; border: 1px solid rgba(241, 221, 179, .8); border-radius: 50%; display: grid; place-content: center; }
.galeria-video__texto { font-family: var(--sans); font-weight: 600; font-size: .6rem; }
.galeria-item--seleccionada > img { outline: 3px solid var(--oro); outline-offset: 1px; }
.galeria-item__marca { position: absolute; top: .3rem; right: .3rem; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--moka-profundo); font-size: 1.1rem; line-height: 1; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.galeria-pestanas { display: flex; gap: .35rem; margin: .55rem 0 0; }
.galeria-pestanas .btn { flex: 1 1 0; min-height: 38px; padding: .35rem .4rem; font-size: .58rem; letter-spacing: .06em; }
.galeria-pestana--activa { background: var(--moka-profundo) !important; color: var(--champana) !important; }
.galeria-descargar { display: flex; width: 100%; margin-top: .45rem; }
.galeria-muestra { margin-top: .3rem; }
.ramita--album { width: 200px; left: -70px; top: -.2rem; transform: rotate(-12deg); }
/* después de la boda el álbum es lo principal: un poco más de aire */
.seccion--album-principal .album__hoja .titulo { font-size: 1.9rem; }

/* El visor de fotos (js/galeria.js): una hoja de papel sobre un velo moka. */
.visor { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(62, 48, 42, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.visor__panel { width: min(100%, 680px); max-height: min(86vh, 720px); overflow: hidden; border-radius: 6px; background: var(--papel); box-shadow: 0 18px 50px rgba(40, 28, 22, .5); }
.visor__barra, .visor__pie { display: flex; align-items: center; padding: .5rem .7rem; }
.visor__barra { border-bottom: 1px solid rgba(166, 138, 123, .3); }
.visor__pie { justify-content: flex-end; border-top: 1px solid rgba(166, 138, 123, .3); }
.visor__volver { min-height: 40px; border: 0; padding: .4rem .3rem; background: transparent; font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .06em; color: var(--tinta); }
.visor__medio { display: block; width: 100%; max-height: min(66vh, 580px); object-fit: contain; background: var(--marfil); }
.visor__video { aspect-ratio: 16 / 9; background: #2E231D; }
.visor__descargar { min-height: 40px; border: 0; border-radius: 999px; padding: .5rem .9rem; background: var(--moka-profundo); color: var(--champana); font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .08em; }
.visor__descargar:disabled { opacity: .6; }
.visor__flecha { display: none; }
.visor__contador { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: var(--papel); font-family: var(--sans); font-size: .8rem; }

/* ── 14 · Dudas: tarjeta de visita con canto dorado ── */
.pieza--visita {
  --giro: -1deg;
  width: calc(var(--ancho) * .9);
  padding: 1.2rem 1.1rem 1rem;
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px #E3CD9F, var(--sombra);
}
.pieza--visita .titulo { font-size: 1.6rem; font-style: italic; }
.pieza--visita > .texto { margin-top: .25rem; font-size: 1rem; }
.contacto { margin-top: .7rem; text-align: left; border-radius: 6px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(203, 174, 155, .7); }
.contacto__boton {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 44px; padding: .7rem 1rem; cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 600; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta);
}
.contacto__boton::-webkit-details-marker { display: none; }
.contacto__boton::after { content: '＋'; color: var(--oro-texto); font-size: .9rem; transition: transform .35s ease; }
.contacto[open] .contacto__boton::after { transform: rotate(45deg); }
.contacto__caja { padding: 0 1rem .8rem; }
.contacto__persona { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; padding-top: .6rem; border-top: 1px solid var(--marfil); }
.contacto__quien { font-family: var(--serif); font-size: .95rem; color: var(--tinta-suave); }
.contacto__quien b { display: block; font-size: 1.12rem; font-weight: 600; color: var(--tinta); }
.contacto__persona a { font-family: var(--sans); font-weight: 600; font-size: .72rem; color: var(--oro-texto); }

/* ── La despedida y la SORPRESA: carta de los novios en sobre lacrado ── */
.footer { padding-bottom: 2.4rem; }
.pieza--final { display: flex; flex-direction: column; align-items: center; }
.sorpresa {
  position: relative;
  width: 94%; height: clamp(330px, 50svh, 410px);
  outline: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.sorpresa:focus-visible { box-shadow: 0 0 0 2px var(--oro); border-radius: 6px; }
/* el sobre: abajo; la carta vive adentro y sube al abrirse */
.sorpresa__sobre {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 3;
  border-radius: 4px;
  background:
    linear-gradient(to top right, rgba(0, 0, 0, 0) 49.6%, rgba(166, 138, 123, .35) 50%, rgba(0, 0, 0, 0) 50.6%) 0 100% / 50.2% 100% no-repeat,
    linear-gradient(to top left, rgba(0, 0, 0, 0) 49.6%, rgba(166, 138, 123, .35) 50%, rgba(0, 0, 0, 0) 50.6%) 100% 100% / 50.2% 100% no-repeat,
    var(--grano),
    linear-gradient(180deg, #EFDCD2, #E2CABD);
  background-size: 50.2% 100%, 50.2% 100%, 170px 170px, 100% 100%;
  box-shadow: 0 1px 1px rgba(74, 56, 48, .12), 0 18px 30px -12px rgba(74, 56, 48, .5);
}
.sorpresa__solapa {
  position: absolute; left: 0; right: 0; top: 0; height: 70%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, #E2CABD, #EFDCD2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .8s cubic-bezier(.5, 0, .3, 1) .35s;
  z-index: 2;
}
.sorpresa__solapa::after { content: ''; position: absolute; inset: 0; clip-path: polygon(3% 0, 97% 0, 50% 92%); border-top: 0; background: linear-gradient(180deg, rgba(194, 160, 106, 0), rgba(194, 160, 106, .25)); }
.sorpresa__sello {
  position: absolute; z-index: 4; left: 50%; top: 70%;
  width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  font-family: var(--script); font-size: 1.15rem; color: #E2CDA8;
  background: radial-gradient(circle at 36% 30%, #8A7662, #5E4A40 55%, #382C26);
  box-shadow: 0 3px 6px rgba(40, 28, 22, .45), inset 0 0 0 3px rgba(138, 118, 98, .55);
  transition: transform .6s cubic-bezier(.5, 0, .7, .4), opacity .4s ease .2s;
}
.sorpresa__sello i { font-family: var(--serif); font-size: .7em; margin: 0 .03em; }
.sorpresa__carta {
  position: absolute; z-index: 1; left: 5%; right: 5%; bottom: 6%; height: 92%;
  padding: 1.1rem 1.1rem 1rem;
  text-align: left;
  --fondo: #FFFDFA;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(74, 56, 48, .12), 0 12px 24px -10px rgba(74, 56, 48, .45);
  transform: translateY(42%);
  transition: transform 1.1s cubic-bezier(.22, .7, .25, 1) .8s, z-index 0s 1.4s;
}
.sorpresa__carta::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(194, 160, 106, .55); pointer-events: none; }
.sorpresa__para { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.12rem; color: var(--oro-texto); margin-bottom: .45rem; }
.sorpresa__texto { font-family: var(--serif); font-size: 1.04rem; line-height: 1.42; color: var(--tinta); }
.sorpresa__firma { margin-top: .45rem; font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--tinta-suave); text-align: right; }
.sorpresa__firma b { display: block; font-family: var(--script); font-style: normal; font-weight: 400; font-size: 1.7rem; line-height: 1.1; color: var(--moka-profundo); }
.sorpresa__firma b i { font-family: var(--serif); font-size: .6em; color: var(--oro-texto); }
.sorpresa__pista {
  position: absolute; z-index: 5; left: 50%; bottom: -.3rem; transform: translateX(-50%);
  padding: .3rem .8rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta); background: rgba(251, 247, 243, .9);
  transition: opacity .4s;
}
/* abierta */
.sorpresa--abierta .sorpresa__sello { transform: translateY(40px) scale(.6) rotate(25deg); opacity: 0; }
.sorpresa--abierta .sorpresa__solapa { transform: rotateX(180deg); z-index: 0; }
.sorpresa--abierta .sorpresa__carta { transform: none; z-index: 6; }
.sorpresa--abierta .sorpresa__pista { opacity: 0; }
/* sin abrir, la carta asoma sólo un poco: su texto no se ve entero */
.sorpresa:not(.sorpresa--abierta) .sorpresa__texto,
.sorpresa:not(.sorpresa--abierta) .sorpresa__firma { visibility: hidden; }
.footer__gracias { margin-top: 1.2rem; max-width: 20rem; padding: .6rem 1rem; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--tinta); background: radial-gradient(closest-side, rgba(251, 247, 243, .9), rgba(251, 247, 243, .6) 70%, rgba(251, 247, 243, 0)); }
.footer__nombres { margin-top: .2rem; font-family: var(--script); font-size: 2.6rem; line-height: 1.1; color: var(--moka-profundo); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.footer__nombres .amp { font-size: .55em; color: var(--oro-texto); }
.footer__fecha { font-family: var(--sans); font-weight: 600; font-size: .66rem; letter-spacing: .3em; color: var(--tinta); }
.footer__fecha::before, .footer__fecha::after { content: '—'; margin: 0 .6rem; color: var(--oro-texto); }
.ramita--fin-a { width: 210px; left: -60px; top: 1rem; transform: rotate(-6deg); }
.ramita--fin-b { width: 180px; right: -56px; bottom: 1.2rem; transform: scaleX(-1) rotate(-10deg); }

/* ═══════════ 5. RESPALDOS DE ILUSTRACIONES (js/clasica.js) ═══════════
   Mientras no llega una ilustración, un dibujo de línea sepia con aguada. */
.respaldo-linea path, .respaldo-linea circle, .respaldo-linea rect { vector-effect: non-scaling-stroke; }

/* ═══════════ 6. PANTALLAS BAJITAS Y MENOS MOVIMIENTO ═══════════ */
@media (max-height: 740px) {
  :root { --barra: 2.7rem; }
  .seccion, .footer { padding: 1.1rem 0 1rem; }
  .titulo { font-size: 1.7rem; }
  .sigue { margin-top: .6rem; padding-top: .35rem; padding-bottom: .35rem; }
  .hero .firma { width: 80%; }
  .liston { margin-top: .6rem; padding: .4rem 1.4rem; font-size: .98rem; }
  .calendario__dias span { height: 1.75rem; line-height: 1.75rem; font-size: .98rem; }
  .calendario__mes { font-size: 1.35rem; margin-bottom: .45rem; }
  .pieza--bloc .calendario { padding-top: 1.35rem; padding-bottom: .8rem; }
  .pieza--boleto .texto { margin: .9rem auto .55rem; font-size: 1rem; }
  .historia__texto { font-size: 1.04rem; line-height: 1.38; margin-bottom: .7rem; }
  .carta-algodon { padding-top: 1.15rem; padding-bottom: .9rem; }
  .juntos__cab { font-size: 1.6rem; margin-bottom: .35rem; }
  .juntos__ico { width: 1.5rem; height: 1.5rem; }
  .itinerario__momento { padding: .2rem 0; }
  .itinerario__que { font-size: 1.08rem; }
  .itinerario__detalle { font-size: .86rem; }
  .etiqueta-papel { padding-top: 1.9rem; }
  .evitar .texto { font-size: .9rem; }
  .abanico { height: clamp(260px, 44svh, 330px); }
  .pieza--respuesta .titulo { font-size: 1.5rem; }
  .pieza--respuesta > .festoneada > .texto { font-size: .92rem; margin-bottom: .35rem; }
  .festoneada { padding-top: calc(var(--r) + 1rem); padding-bottom: calc(var(--r) + .8rem); }
  .confirmar__nota { display: none; }
  .confirmar textarea { height: 3rem; }
  .confirmar__eleccion span { min-height: 42px; }
  .mensaje-form textarea { height: 4.8rem; }
  .capsula-escena { width: min(13rem, 100%) !important; }
  .sorpresa { height: clamp(320px, 52svh, 380px); }
  .sorpresa__texto { font-size: .98rem; line-height: 1.36; }
  .footer__nombres { font-size: 2.2rem; }
  .footer__gracias { margin-top: .8rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .contenido--visible, .btn--palpita, .sigue svg, .portada__instruccion, .ramita svg.mece,
  .sobrecito--toca, .sobrecito__lluvia i, .hero__invitado:not(:empty) { animation: none !important; }
  .instantanea, .carta, .carta__solapa, .carta__sello, .sorpresa__solapa, .sorpresa__carta, .sorpresa__sello,
  .ficha--capsula .mensaje-form, .confirmar-fijo, .capitulos { transition-duration: .01s !important; transition-delay: 0s !important; }
  .lluvia-petalos { display: none; }
}

/* ═══════════ Ajustes de la revisión a 390 × 844 ═══════════ */
.pieza--peques .sigue { grid-column: 1 / -1; }
.pieza + .pieza--peques { margin-top: -.25rem; }
.nosotros__toca { display: block; margin-top: .1rem; }
.ficha::before { top: 3.15rem; }
.ficha .titulo { margin-bottom: .75rem; }
/* la carta, cerrada, va DOBLADA dentro del sobre (sólo asoma la orilla) */
.sorpresa__carta { transform: scale(.86, .56); transform-origin: 50% 100%; }
.sorpresa:not(.sorpresa--abierta) .sorpresa__para { visibility: hidden; }
.vivo__lista { --fila: 2.65rem; }
.pieza--programa .titulo { margin-bottom: 1rem; }
.vivo__reloj { margin: .6rem 0 .8rem; }
@media (max-height: 740px) {
  .vivo__lista { --fila: 2.3rem; }
  .vivo__n { font-size: 1.08rem; }
  .pieza--programa { padding-top: 1.1rem; }
  .vivo__sigue { margin-top: .7rem; padding: .7rem 1rem .75rem; }
}

/* ═══════════ Rendimiento (8 oct: «está trabada») ═══════════
   Medido con el celular simulado 4× más lento: el tiempo se iba en volver a
   pintar papel con sombra en cada movimiento del dedo. Ahora:
   · las piezas se asientan en UNA transición (la mueve la tarjeta gráfica, sin
     repintar), en vez de girar con cada pixel de scroll (js/clasica.js);
   · la barra de capítulos ya no desenfoca en vivo lo que pasa por debajo. */
.pieza--posandose {
  transition: translate .95s cubic-bezier(.2, .8, .25, 1), rotate .95s cubic-bezier(.2, .8, .25, 1);
  will-change: translate, rotate;
}
.capitulos {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(251, 247, 243, .96);
}
@media (prefers-reduced-motion: reduce) { .pieza--posandose { transition: none; } }

/* ═══════════ 7. Contraste entre secciones (8 oct, noche) ═══════════
   Pedro: «se siente muy monótona en los colores». Cada sección se apoya en
   su propio mantel —rosa, moka o champaña, en ese orden— que js/clasica.js
   pinta como UN degradado sobre .contenido con las medidas reales, así que
   entre una y otra el color se funde en vez de cortarse en franja. El
   data-tono de cada sección sólo sirve para vestir lo que va suelto sobre
   el mantel (títulos sin papel, ramitas) cuando el mantel es oscuro. */
.contenido--visible { background-size: 200px 200px, 100% 100%, 100% 100%; }

/* Sobre el moka: lo que no va en papel pasa a champaña, y las ramitas se
   aclaran para no perderse en lo oscuro. */
.seccion[data-tono="moka"] .pieza--fotos > .titulo { color: var(--champana); text-shadow: 0 1px 10px rgba(0, 0, 0, .25); }
.seccion[data-tono="moka"] .ramita svg {
  filter: brightness(1.55) saturate(.85) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
/* Corte que vio Pedro: en «Confirma» el formulario pisaba el filete dorado
   interior de la tarjeta festoneada (quedaba a 4 px). Ahora respira. */
.festoneada { padding-left: 1.7rem; padding-right: 1.7rem; }
.festoneada .confirmar__eleccion span { gap: .4rem; padding: .4rem .5rem; font-size: .97rem; white-space: nowrap; }
.festoneada .confirmar__vienen { gap: .4rem; }

/* Los padrinos de la boda: de los dos, al centro bajo ambas familias. */
.padrinos { position: relative; margin-top: 1rem; padding-top: .95rem; }
.padrinos::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 62%; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(194, 160, 106, 0), rgba(194, 160, 106, .6) 25%, rgba(194, 160, 106, .6) 75%, rgba(194, 160, 106, 0));
}

/* ═══════════ 8. Sin máscaras (8 oct, captura de Pedro) ═══════════
   En su Android el boleto salía MOCHO: una línea recta, girada con el
   papel, a media altura del botón «Agendar». Era la máscara (mask) de las
   muescas: el celular la calculó con el alto que tenía el boleto ANTES de
   que llegaran los números y el «Sigue», y lo demás quedó fuera. Aquí no se
   reproducía (otro motor de pintado), así que se quitan las DOS máscaras de
   la página —el boleto y la tarjeta festoneada— por dibujos que no
   dependen del tamaño y no pueden recortar nada. */

/* El boleto: las muescas son dos medios círculos del color del mantel moka
   (la fecha siempre cae en moka) con una sombrita, como un hueco perforado. */
.boleto { -webkit-mask: none; mask: none; }
.boleto::after {
  content: ''; position: absolute; left: 0; right: 0; height: 24px; pointer-events: none;
  top: calc(var(--corte, 52%) - 12px);
  --hueco: radial-gradient(circle, #4A3830 0, #503D35 9px, rgba(40, 28, 22, .55) 10.6px, rgba(40, 28, 22, 0) 12px);
  background: var(--hueco) -12px 0 / 24px 24px no-repeat, var(--hueco) calc(100% + 12px) 0 / 24px 24px no-repeat;
}

/* La festoneada: el festón ya no es máscara. El papel se pinta dentro de un
   borde transparente (padding-box) y, debajo, una trama de circulitos del
   mismo papel asoma SÓLO en ese borde (border-box): las ondas. */
.festoneada {
  -webkit-mask: none; mask: none;
  border: calc(var(--r) * .6) solid transparent;
  background:
    var(--grano),
    radial-gradient(130% 80% at 18% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(var(--fondo), var(--fondo)),
    radial-gradient(circle at center, var(--fondo) calc(var(--r) - .6px), rgba(255, 253, 250, 0) var(--r)) 0 0 / calc(var(--r) * 2) calc(var(--r) * 2) round;
  background-size: 170px 170px, 100% 100%, 100% 100%, calc(var(--r) * 2) calc(var(--r) * 2);
  background-clip: padding-box, padding-box, padding-box, border-box;
  background-origin: padding-box, padding-box, padding-box, border-box;
  padding: calc(var(--r) * .4 + 1.3rem) calc(1.7rem - var(--r) * .6) calc(var(--r) * .4 + 1.1rem);
}
.festoneada::before { inset: calc(var(--r) * .4 + 7px); }
.festoneada::after { inset: calc(var(--r) * .4 + 11px); }

/* ═══════════ 9. Sin tirones al bajar (8 oct, noche) ═══════════
   Pedro: «revisa los tirones que se está dando al scrollear». Medido en un
   celular simulado 4× más lento: 11 cuadros por segundo. No era UNA cosa:
   eran varias que obligaban a repintar en cada cuadro, aun lejos de la
   pantalla. Aquí, las de CSS. Regla: lo que se mueve sólo cambia transform u
   opacity (eso lo desliza la tarjeta gráfica, sin repintar), y nada se anima
   para siempre: unas vueltas al llegar a su sección y se queda quieto. */

/* Las flechitas de «Sigue» (13 en la página, latiendo todas sin parar). */
.sigue svg { animation: none; }
.seccion--brotada .sigue svg { animation: cl-asoma 2.2s ease-in-out .9s 3; }

/* «Agendar en mi celular» latía cambiando su sombra (repinta en cada cuadro).
   Ahora es una onda aparte que crece y se desvanece, cuatro veces. */
.btn--palpita { animation: none; position: relative; }
.btn--palpita::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(194, 160, 106, .6);
  opacity: 0;
}
.seccion--brotada .btn--palpita::after { animation: cl-onda 2.6s ease-out 1.2s 4; }
@keyframes cl-onda { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.08, 1.4); } }

/* El corazón del 26: cuatro latidos y descansa. */
.calendario--scroll.cal-completo .calendario__cora { animation: fx-cora-late 1.6s .6s ease-in-out 4 !important; }

/* Las flores que brotan: antes crecían tallo por tallo y pétalo por pétalo
   DENTRO del dibujo (repintarlo en cada cuadro, justo cuando el dedo llega a
   la sección). Ahora la ramita entera crece desde su esquina con un rebote:
   se ve igual de viva y sólo se desliza. */
.brote__tallo, .brote__hoja, .brote__flor { transition: none !important; }
.brote__tallo { stroke-dashoffset: 0 !important; }
.brote__hoja, .brote__flor { transform: none !important; }
/* Crece desde la esquina donde nace el tallo. Todo va en UNA propiedad,
   transform: a un dibujo SVG el navegador sólo le pasa a la tarjeta gráfica
   el transform entero (con scale/rotate/translate sueltos lo anima la página
   cuadro por cuadro; medido el 8 oct). El giro es al centro porque dos
   esquinas son el dibujo en espejo; para que la esquina no se mueva, la
   ramita arranca corrida hacia ella el 40 % de su lado y vuelve a su lugar
   al mismo ritmo que crece. */
.brote {
  opacity: 0;
  transition: opacity .45s ease, transform 1.15s cubic-bezier(.3, 1.4, .45, 1);
}
.brote--tl { transform: translate(-40%, -40%) rotate(-12deg) scale(.2); }
.brote--tr { transform: translate(40%, -40%) rotate(12deg) scale(.2) scaleX(-1); transition-delay: .25s; }
.brote--bl { transform: translate(-40%, 40%) rotate(12deg) scale(.2) scaleY(-1); transition-delay: .25s; }
.brote--br { transform: translate(40%, 40%) rotate(-12deg) scale(.2) rotate(180deg); }
.seccion--brotada .brote { opacity: 1; }
.seccion--brotada .brote--tl { transform: translate(0, 0) rotate(0deg) scale(1); }
.seccion--brotada .brote--tr { transform: translate(0, 0) rotate(0deg) scale(1) scaleX(-1); }
.seccion--brotada .brote--bl { transform: translate(0, 0) rotate(0deg) scale(1) scaleY(-1); }
.seccion--brotada .brote--br { transform: translate(0, 0) rotate(0deg) scale(1) rotate(180deg); }

/* La barra de capítulos: su rayita avanza con transform; en capa propia,
   cada cuadro es sólo deslizarla. */
.capitulos__seg i { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .brote { opacity: 1; transition: none; }
  .brote--tl { transform: none; } .brote--tr { transform: scaleX(-1); } .brote--bl { transform: scaleY(-1); } .brote--br { transform: rotate(180deg); }
  .seccion--brotada .sigue svg, .seccion--brotada .btn--palpita::after { animation: none; }
}

/* El brillo del satén, ligado al scroll SIN JavaScript: lo corre la tarjeta
   gráfica. Donde no hay animation-timeline (Safari viejito), se queda quieto. */
/* Las ramitas prensadas ya NO hacen parallax: como cada una trae su propio
   giro fijo, el navegador no podía pasarle el movimiento a la tarjeta gráfica
   y lo calculaba la página en cada cuadro. Se quedan quietas, como prensadas
   de verdad, y se siguen meciendo al tocarlas. */
/* (10 oct) El brillo se quitó: era una capa fija debajo del contenido que obligaba
   a re-acomodar capas en cada cuadro de la bajada. Ya no se crea (js/clasica.js). */
@keyframes cl-brillo {
  0% { transform: translate3d(40px, 0, 0); }
  25% { transform: translate3d(0, 150px, 0); }
  50% { transform: translate3d(-40px, 0, 0); }
  75% { transform: translate3d(0, -150px, 0); }
  100% { transform: translate3d(40px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .brillo i { animation: none !important; } }

/* ═══════════ 10. La cápsula del tiempo como MOMENTO (8 oct, noche) ═══════════
   Mientras recibe mensajes, la cápsula no es una sección del recorrido: es
   una hoja que sube encima de todo al confirmar, al querer salir o al acabar
   la carta (js/clasica.js, 1c). Lleva su frasco, su contador y su formulario
   de siempre; arriba, una línea que explica POR QUÉ sale ahora. */
.momento {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: flex-end; justify-content: center;
}
.momento[hidden] { display: none; }
.momento__velo {
  position: absolute; inset: 0;
  background: rgba(40, 30, 26, .84);
  opacity: 0; transition: opacity .4s ease;
}
.momento__marco {
  position: relative; width: 100%; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.2rem 0 calc(.6rem + env(safe-area-inset-bottom, 0px));
  opacity: 0; transform: translateY(60px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .25, 1);
}
.momento--ver .momento__velo { opacity: 1; }
.momento--ver .momento__marco { opacity: 1; transform: none; }
.momento .seccion--momento { padding: 0; margin: auto 0 0; }
.momento .pieza--ficha { --giro: 0deg; }
.momento .ficha::before { display: none; }          /* el renglón de ficha cruzaba la línea de arriba */
.momento .ficha--capsula { border-radius: 6px; box-shadow: 0 -2px 0 rgba(241, 221, 179, .5), 0 30px 60px -20px rgba(0, 0, 0, .6); }
.capsula__motivo {
  position: relative; z-index: 1;
  margin: -.2rem 0 .55rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.06rem; line-height: 1.32; color: var(--tinta);
  text-wrap: pretty;
}
.capsula__motivo + .titulo { margin-top: 0; }
.momento__ahora-no {
  min-height: 44px; margin-top: .5rem; padding: .5rem 1.4rem;
  border: 0; background: none;
  font-family: var(--sans); font-weight: 600; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--champana);
}
html.con-momento, html.con-momento body { overflow: hidden; }

/* El acceso de siempre, al pie de «Déjanos unas palabras». */
.capsula__otra {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .1rem .35rem;
  width: 100%; min-height: 44px; margin-top: .55rem; padding: .5rem .7rem;
  border: 1px dashed rgba(194, 160, 106, .75); border-radius: 6px;
  background: rgba(241, 221, 179, .28);
  font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.25; color: var(--tinta);
}
.capsula__otra b { font-style: normal; font-family: var(--sans); font-weight: 600; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-texto); }
.capsula__otra span { color: var(--oro-texto); }

@media (prefers-reduced-motion: reduce) {
  .momento__velo, .momento__marco { transition: none; }
}
html.con-momento .vista-previa { display: none; }   /* la etiqueta de la vista previa tapaba la línea de arriba */

/* ═══════════ 11. El sobre del final, rehecho (8 oct, revisión de Pedro) ═══════════
   «La animación del último sobre se abre mal». Se veía: la carta asomaba con su
   texto antes de abrir, la solapa giraba plana y quedaba ENCIMA de la carta, y
   al final la carta aparecía de golpe tapando todo el sobre. Ahora es una
   secuencia, como un sobre de verdad (cada paso es una animación de CSS que
   empieza cuando termina la anterior):
     0.0 s  el sello se rompe
     0.3 s  la solapa se abre en 3D; a medio giro pasa DETRÁS de la carta
     1.0 s  la carta, doblada y escondida en el sobre, sube y sale completa;
            ya afuera pasa al frente, baja a su lugar y se desdobla
     2.3 s  aparece el texto;  2.7 s  llueven los pétalos (js/clasica.js)
   La carta siempre mide lo mismo; doblada es scaleY(.535). Medidas en % del
   alto de la sorpresa: sobre abajo 52 %, solapa 36 % desde el borde del sobre,
   carta final de 14 % a 100 %. */
.sorpresa { perspective: 900px; }
.sorpresa__solapa {
  position: absolute; left: 0; right: 0; top: 48%; height: 36%; z-index: 4;
  transform-origin: 50% 0; transform: rotateX(0deg);
  transition: none;
}
.sorpresa__sello { top: 80%; z-index: 5; transition: none; }
.sorpresa__carta {
  left: 6%; right: 6%; bottom: 14%; height: 86%; z-index: 2;
  transform-origin: 50% 100%;
  transform: translateY(11.6%) scaleY(.535);
  transition: none;
}
.sorpresa__carta > * { opacity: 0; }
.sorpresa:not(.sorpresa--abierta) .sorpresa__para { visibility: visible; }
.sorpresa--abierta .sorpresa__sello { animation: cl-sello-rompe .55s cubic-bezier(.5, 0, .7, .4) both; }
.sorpresa--abierta .sorpresa__solapa { animation: cl-solapa-abre .75s cubic-bezier(.45, 0, .3, 1) .3s both; }
.sorpresa--abierta .sorpresa__carta { animation: cl-carta-sale 1.9s cubic-bezier(.35, .55, .25, 1) 1s both; }
.sorpresa--abierta .sorpresa__carta > * { animation: cl-aparece .6s ease 2.3s both; }
@keyframes cl-sello-rompe {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.14); opacity: 1; }
  100% { transform: translateY(28px) rotate(24deg) scale(.55); opacity: 0; }
}
@keyframes cl-solapa-abre {
  0% { transform: rotateX(0deg); z-index: 4; }
  49% { z-index: 4; }
  50% { transform: rotateX(90deg); z-index: 1; }
  100% { transform: rotateX(180deg); z-index: 1; }
}
@keyframes cl-carta-sale {
  0% { transform: translateY(11.6%) scaleY(.535); z-index: 2; }
  47% { transform: translateY(-46.5%) scaleY(.535); z-index: 2; }
  50% { transform: translateY(-46.5%) scaleY(.535); z-index: 6; }
  100% { transform: translateY(0) scaleY(1); z-index: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .sorpresa--abierta .sorpresa__sello { animation: none; opacity: 0; }
  .sorpresa--abierta .sorpresa__solapa { animation: none; transform: rotateX(180deg); z-index: 1; }
  .sorpresa--abierta .sorpresa__carta { animation: none; transform: none; z-index: 6; }
  .sorpresa--abierta .sorpresa__carta > * { animation: none; opacity: 1; }
}

/* ═══════════ 12. Revisión de Pedro (8 oct, noche) ═══════════ */
/* «Nosotros» se perdía: llevaba un halo crema detrás, y sobre el moka se comía
   las letras champaña. Sin halo, champaña sobre el mantel oscuro. */
.seccion[data-tono="moka"] .pieza--fotos > .titulo {
  background: none;
  color: #F3E2BD;
  text-shadow: 0 2px 10px rgba(30, 20, 16, .55), 0 0 1px rgba(30, 20, 16, .4);
}
/* «Los marcos de las fotos están demasiado grandes»: la instantánea crece un
   poco y su marco adelgaza (antes 6 % a los lados y 18 % abajo). */
.instantanea { width: 68%; padding: 3.2% 3.2% 10%; }
.lugar__foto { border-width: 3px; }

/* El jardín, igual que la iglesia (foto, mapa y botones). */
.postal--jardin { --fondo: #F8EEE9; transform: rotate(.8deg); z-index: 2; margin-top: -.15rem; }
.postal--jardin .lugar__foto img { object-position: 50% 46%; }   /* la carpa al fondo del andador */

/* ═══════════ 13. Sin parpadeo cada segundo (8 oct, Pedro en su Android) ═══════════
   «La invitación parpadea cada vez que cambia un segundo». Cada segundo la
   paleta del reloj gira en 3D y cambia de brillo; el navegador le CREABA una
   capa de pintado al empezar el giro y la DESTRUÍA al terminar, y en Android
   ese ir y venir de capas se ve como un parpadeo. Ahora las paletas viven
   siempre en su propia capa (will-change), así que girar sólo es moverlas. Lo
   mismo con el corazón de «Llevamos juntos», que late cada segundo. Y cada
   cajita del reloj se acomoda sola (contain), sin hacer que se re-acomode la
   página cuando cambia su número. */
.flip__u { contain: layout style; }
.juntos__latido svg { will-change: transform; }
.juntos__tarjeta { contain: layout style; }

/* ═══════════ 14. La cápsula con el teclado abierto (8 oct, Pedro en Android) ═══════════
   «Al abrir el teclado tapa todos los campos». La hoja de la cápsula iba
   pegada ABAJO y el formulario subía desde abajo: justo donde sale el teclado.
   Al escribir (capsula--escribiendo), dentro del momento: la hoja sube ARRIBA,
   el frasco y los textos se esconden y el formulario queda en su lugar, no
   flotando. Además js/clasica.js encoge el momento al alto que deja libre el
   teclado (visualViewport) y lleva el campo a la vista. */
.momento .seccion--momento.capsula--escribiendo { margin: 0 0 auto; }
.momento .capsula--escribiendo .capsula-escena,
.momento .capsula--escribiendo #capsula-texto,
.momento .capsula--escribiendo .capsula__faltan,
.momento .capsula--escribiendo .capsula__escribir,
.momento .capsula--escribiendo .capsula__motivo,
.momento .capsula--escribiendo .capsula__cuenta { display: none !important; }
.momento .capsula--escribiendo .ficha--capsula .mensaje-form {
  position: static; margin-top: .3rem; padding: .2rem 0 0;
  background: none; box-shadow: none;
  opacity: 1; visibility: visible; transform: none; transition: none;
}
.momento .capsula--escribiendo .ficha--capsula .mensaje-form::before { display: none; }
.momento .capsula--escribiendo .mensaje-form textarea { height: 5.2rem; }
.momento .capsula--escribiendo + .momento__ahora-no { display: none; }

/* ═══════════ 15. Parpadeo cada segundo, segunda vuelta (9 oct) ═══════════
   Pedro: «sigue parpadeando». Lo que tiene ritmo de UN segundo en la página:
   1. El reloj: en cada cambio, la paleta nueva entraba con un DESTELLO de
      brillo (filter: brightness 1.4 → 1) y la vieja se oscurecía, girando en
      3D con perspectiva. En un celular eso se ve como un parpadeo por segundo,
      y el filtro obliga a repintar la paleta en cada cuadro del giro. Ahora el
      giro es un «abatir» sin 3D (scaleY, que la tarjeta gráfica sólo mueve) y
      la sombra es una capa aparte que sólo cambia de opacidad. Sin filtros.
   2. El cursor de la escena de la cápsula parpadeaba cada segundo SIEMPRE
      (aunque nadie escribiera, y con la hoja abierta). Ahora sólo mientras
      «escribe» (cap--escribe). */
.flip__u { perspective: none; }
.flip__fa, .flip__fb { will-change: transform; }
.flip__fa::after, .flip__fb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #1E1511; opacity: 0;
  will-change: opacity;   /* capa fija: que no nazca y muera en cada segundo */
}
.flip__fb { transform: scaleY(0); }
.flip__u--gira .flip__fa { animation: cl-abate-a .26s ease-in both; }
.flip__u--gira .flip__fb { animation: cl-abate-b .26s .26s ease-out both; }
.flip__u--gira .flip__fa::after { animation: cl-sombra-a .26s ease-in both; }
.flip__u--gira .flip__fb::after { animation: cl-sombra-b .26s .26s ease-out both; }
@keyframes cl-abate-a { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes cl-abate-b { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cl-sombra-a { from { opacity: 0; } to { opacity: .45; } }
@keyframes cl-sombra-b { from { opacity: .35; } to { opacity: 0; } }
.cap__cursor { animation: none; opacity: 0; }
.cap--escribe .cap__cursor { opacity: 1; animation: fx-cursor 1s steps(1) infinite; }
/*   3. «Llevamos juntos» vive DENTRO de la carta de orilla rasgada, que lleva
      un recorte (clip-path) de cientos de puntos. Cada segundo cambiaba un
      número y el navegador volvía a recortar y repintar la carta ENTERA. Con
      su propia capa, cada segundo sólo se repinta el contador. */
.juntos { will-change: transform; contain: layout paint style; }
.juntos__n { display: inline-block; min-width: 2ch; }
/*   4. Y lo mismo con el reloj entero: medido con una traza, cada segundo se
      repintaba también la capa RAÍZ de la página (el fondo completo), porque
      las bisagras y los pernos del reloj (::before/::after) viven ahí y se
      enciman con las paletas. Con el reloj en su propia capa, un cambio de
      número nunca toca el fondo. */
.flip { will-change: transform; contain: layout paint style; }
/*   5. El sobre que flota en la escena de la cápsula llevaba un filtro
      (drop-shadow) en el MISMO elemento que se mueve: el navegador lo animaba
      en el hilo principal, repintando la sombra en cada cuadro (~40 recálculos
      por segundo con la hoja abierta). La sombra pasa al dibujo de adentro y
      el movimiento lo lleva la tarjeta gráfica. */
.cap__flota { filter: none; will-change: transform; }
.cap__flota svg { filter: drop-shadow(0 8px 10px rgba(74, 56, 48, .18)); }

/* ═══════════ 16. Menos capas de GPU en lo que late cada segundo (9 oct) ═══════════
   Medido: las sombras y paletas del reloj sumaban 33 capas compuestas, y cada
   tic arrancaba y paraba animaciones compuestas (reloj y latido). En un
   Android con poca memoria de video, tantas capas se vacían y se vuelven a
   rasterizar, y eso se ve como un parpadeo. Ahora:
   · el abatir de las paletas (scaleY) corre en el HILO PRINCIPAL, sin capa
     por paleta ni sombras. Cómo se logra: Chrome manda a la tarjeta gráfica
     cualquier animación de transform (y desde la v118 también de clip-path),
     creando una capa al arrancar y tirándola al terminar; pero si la misma
     animación toca una propiedad que la GPU no sabe animar (aquí `height`,
     constante), la corre entera en el hilo principal: repinta sólo la
     celda, 16 veces por tic, y no hay capas que nazcan y mueran;
   · el corazón late moviendo el trazo del SVG, no el elemento (no compone). */
.flip__fa, .flip__fb { will-change: auto; -webkit-backface-visibility: visible; backface-visibility: visible; }
.flip__fa::after, .flip__fb::after { display: none; }
.flip__fb { transform: scaleY(0); }
.flip__u--gira .flip__fa { animation: cl-abate-a2 .26s ease-in both; }
.flip__u--gira .flip__fb { animation: cl-abate-b2 .26s .26s ease-out both; }
@keyframes cl-abate-a2 { from { transform: scaleY(1); height: 50%; } to { transform: scaleY(0); height: 50%; } }
@keyframes cl-abate-b2 { from { transform: scaleY(0); height: 50%; } to { transform: scaleY(1); height: 50%; } }
.juntos__latido svg { will-change: auto; }
.juntos__latido--late svg { animation: none; }
.juntos__latido--late svg path { animation: cl-late .55s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes cl-late { 0% { transform: scale(1); } 30% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ═══════════ 17. Sin filtros: pintado barato para celular (9 oct) ═══════════
   Pedro, en su Android: «mucho tironeo al scrollear» (en los tres links) y
   parpadeos sólo cuando el reloj cambia mientras baja. Las dos cosas son lo
   mismo: al teléfono le cuesta RASTERIZAR la página. Medido con raster por
   software (imita una GPU débil), bajando toda la página: con los filtros
   (drop-shadow, blur) 506–615 ms en ~700 tareas; sin ellos 375–467 ms en ~350.
   Cada `filter` obliga a pintar el elemento aparte, desenfocarlo y volverlo a
   componer, por cada mosaico que lo toca. Aquí todos se van:
   · las sombras de papel pasan a box-shadow (una máscara pre-desenfocada,
     barata) en un rectángulo detrás; en las esquinas cortadas se asoma apenas;
   · los desenfoques de boleto y carta pasan a box-shadow en el mismo pseudo;
   · ramitas, flores de portada, listón, sobrecito, esquineros y escena de la
     cápsula se quedan sin sombra: son decorado.
   También: el grano y la trama ya son imágenes (no SVG con feTurbulence), la
   orilla rasgada tiene 2.5× menos puntos, y en pantalla táctil las piezas no
   se «asientan» (js/clasica.js). */
.sombra-papel { filter: none; }
.sombra-papel::before {
  content: ''; position: absolute; z-index: -1; left: 4px; right: 4px; top: 6px; bottom: -2px;
  border-radius: 8px; box-shadow: var(--sombra);
}
.pieza--boleto::before, .pieza--carta::before {
  filter: none; background: none;
  box-shadow: 0 10px 18px -6px rgba(74, 56, 48, .38), 0 28px 44px -18px rgba(74, 56, 48, .42);
}
.ramita svg, .seccion[data-tono="moka"] .ramita svg,
.portada__flor svg, .portada__petalo svg,
.liston, .sigue, .esquinero, .sobrecito,
.cap__flota svg, .cap__mini svg { filter: none; }
.seccion[data-tono="moka"] .ramita { opacity: .82; }
.sobrecito::after {   /* la sombra del sobrecito, como un óvalo debajo */
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 14px; z-index: -1;
  border-radius: 50%; box-shadow: 0 10px 14px rgba(74, 56, 48, .3);
}


/* ═══════════ 18. Revisión de rendimiento con tres revisores (10 oct) ═══════════
   Pedro, en su S25 Ultra (120 Hz, 8.3 ms por cuadro): «sigue habiendo muchos
   parpadeos y se siente trabada». Veredicto común: no es lo caro de pintar,
   son las CAPAS. Una animación de transform/opacity que arranca a media página
   hace que Chrome suba a otra capa todo lo que se pinta después —hasta el final
   de la página— y al terminar la tira y lo repinta todo: eso es el parpadeo
   (17 capas gigantes por bajada, ~62 millones de píxeles). Y cada cambio en un
   cuadro de scroll obliga a re-acomodar ~66 capas. Aquí: nada que componga a
   media página, nada que nazca con el dedo en movimiento (js/fx-comun.js). */

/* El fondo del body queda debajo del mantel de #contenido, que lo tapa entero:
   un color basta (antes eran dos fondos de página completa, uno sobre otro). */
body { background: #CBAE9B; }

/* El reloj sin capas: la paleta abate con una propiedad registrada (corre en
   el hilo principal y repinta sólo su cuadrito). Antes: will-change en .flip
   (capa que, con las muescas del boleto encima, partía la página) y 24 capas
   fijas por backface-visibility. */
@property --sy { syntax: '<number>'; inherits: false; initial-value: 1; }
.flip, .juntos, .flip__fa, .flip__fb { will-change: auto; }
.flip__m { -webkit-backface-visibility: visible; backface-visibility: visible; }
.flip__fa { transform: scaleY(var(--sy)); }
.flip__fb { --sy: 0; transform: scaleY(var(--sy)); }
.flip__u--gira .flip__fa { animation: cl-abate-a3 .26s ease-in both; }
.flip__u--gira .flip__fb { animation: cl-abate-b3 .26s .26s ease-out both; }
@keyframes cl-abate-a3 { from { --sy: 1; } to { --sy: 0; } }
@keyframes cl-abate-b3 { from { --sy: 0; } to { --sy: 1; } }

/* Las muescas del boleto, pintadas en su propio fondo (el ::after de ancho
   completo se encimaba con el reloj y subía a otra capa todo lo de abajo). */
.boleto::after { display: none; }
.boleto {
  --hueco: radial-gradient(circle, #4A3830 0, #503D35 9px, rgba(40, 28, 22, .55) 10.6px, rgba(40, 28, 22, 0) 12px);
  background:
    var(--hueco) -12px calc(var(--corte, 52%) - 12px) / 24px 24px no-repeat,
    var(--hueco) calc(100% + 12px) calc(var(--corte, 52%) - 12px) / 24px 24px no-repeat,
    var(--grano) 0 0 / 170px 170px,
    linear-gradient(180deg, #F7E9CC, #F1DDB3);
}

/* «Agendar»: un aro fijo, sin onda (la onda subía media página a una capa
   durante 11 s). */
.seccion--brotada .btn--palpita::after { animation: none; }
.btn--palpita::after { opacity: .55; }

/* Los días del calendario caen DENTRO de la capa del calendario, sin partir
   la página (contain + su propia capa). */
.calendario { will-change: transform; contain: paint; }

/* Las flores que brotan crecen por JS (atributo transform del SVG, sin capas)
   y sólo con el dedo quieto: aquí ya no se animan. */
.brote { opacity: 1; transition: none; }
.brote--tl, .seccion--brotada .brote--tl { transform: none; }
.brote--tr, .seccion--brotada .brote--tr { transform: scaleX(-1); }
.brote--bl, .seccion--brotada .brote--bl { transform: scaleY(-1); }
.brote--br, .seccion--brotada .brote--br { transform: rotate(180deg); }

/* El texto de la barra cambia sin fundido (cada fundido era una capa). */
.capitulos__txt, .capitulos__txt.cambia { transition: none; opacity: 1; }

/* La solapa del sobre final, sin transform 3D en reposo (era capa permanente). */
.sorpresa__solapa { transform: none; }

/* ═══════════ 19. Ronda 2 de revisores (10 oct) ═══════════
   · El latido del corazón de «Llevamos juntos» (una vez por segundo) y el
     «pop» de sus números animaban transform en la tarjeta gráfica; como la
     carta lleva un recorte (clip-path), Chrome volvía capa la carta ENTERA en
     cada latido y la repintaba: un parpadeo por segundo justo mientras se lee.
     Con propiedades registradas corren en el hilo principal y sólo repintan
     el corazón o el número.
   · El corazón del 26 latía 7 s en el hilo principal mientras se baja: queda
     quieto, ya marcado.
   · La portada ya abierta seguía con dos animaciones infinitas escondidas. */
@property --lat { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --pop { syntax: '<number>'; inherits: false; initial-value: 1; }
.juntos__latido--late svg path { animation: cl-late4 .55s ease-out; transform: scale(var(--lat)); transform-box: fill-box; transform-origin: center; }
@keyframes cl-late4 { 0% { --lat: 1; } 30% { --lat: 1.28; } 100% { --lat: 1; } }
.juntos__n { transform: scale(var(--pop)); }
.juntos__tarjeta--pop .juntos__n { animation: cl-pop4 .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cl-pop4 { 0% { --pop: 1; } 40% { --pop: 1.14; } 100% { --pop: 1; } }
.calendario--scroll.cal-completo .calendario__cora { animation: none !important; }
.portada--abierta .cera__cuerpo, .portada--abierta .portada__instruccion { animation: none; }