/* invitacion.css — la invitación que ve el invitado.
   ─────────────────────────────────────────────────────────────────────────────
   Se diseña para TELÉFONO primero: casi nadie abre esto en una computadora
   (la-pantalla, D29, D39). Nada se carga de fuera: las tipografías se sirven desde
   /tipografias/ (regla seguridad), y eso además la hace abrir con mala señal.

   Las decisiones de diseño, y por qué:
   · La tipografía hace el trabajo. Cormorant Garamond en peso 300 y tamaño grande:
     es lo que separa una invitación cara de una plantilla.
   · Mezcla de letras: script (Pinyon) para los nombres, serif de alto contraste para
     los títulos, y una sans diminuta con mucho espaciado para las etiquetas.
   · Fecha sobredimensionada: el número es un elemento gráfico, no un dato.
   · Capas tipo vellum: papel translúcido encima del fondo, como el papel cebolla real.
   · Grano de papel: una textura finísima. Sin ella, el fondo se ve digital y plano.
   · Reglas de un pelo con un rombo al centro, en vez de líneas gruesas.
   · Aire. Mucho más del que parece necesario: el espacio es lo que se siente caro.
   ───────────────────────────────────────────────────────────────────────────── */

/* ⚠️ D36 · ESTA LÍNEA VA PRIMERO Y NO SE BORRA.
   El atributo hidden esconde con el display:none de la hoja del navegador, y CUALQUIER regla
   de display del autor le gana. Sin esto, una sección "escondida" se queda encima para
   siempre y la suite no lo ve: solo se descubre abriéndolo en un navegador. */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════ paletas
   Una sola fuente del color. Nunca un color suelto dentro de una regla.
   La paleta del evento se pone en <body data-paleta="…"> desde invitacion.js. */
:root {
  /* El aviso de 'invitación de ejemplo' es de la PLATAFORMA, no de la fiesta: va con sus colores
     (desde el 26-sep-2026, blanco de vidrio y el azul de los botones de Apple). */
  --plataforma-fondo: rgba(255, 255, 255, .86);
  --plataforma-texto: #1d1d1f;
  --plataforma-azul:  #0071e3;
  /* El botón de "‹ Ejemplos" (29-sep-2026): el gris de los botones secundarios de Apple sobre el vidrio blanco (la letra
     encima da 14.8 con el vidrio sobre blanco y 10.7 sobre una foto negra), y un poco más al pasar el mouse. */
  --plataforma-perla:   rgba(0, 0, 0, .06);
  --plataforma-perla-2: rgba(0, 0, 0, .1);
  /* arena — el predeterminado: marfil, tinta café y oro viejo */
  --tinta:       #33302b;
  --tinta-2:     #6f675d;
  --tinta-3:     #736f6a;
  --papel:       #f7f3ec;
  --papel-2:     #fffdf9;
  --vellum:      rgba(255, 253, 249, .72);
  --acento:      #9a7b4f;
  --acento-2:    #c8b28c;
  --linea:       #ded3c2;
  --acento-hondo:#7c6240;
  --error:       #8a3c30;
  --sombra:      0 1.5rem 3.5rem -1.5rem rgba(51, 48, 43, .28);

  /* Sobre una FOTO (la portada con foto o video), las letras son claras sobre un velo oscuro,
     sin importar la paleta: sobre una foto, el marfil o el oro no se leen. */
  --sobre-foto:        #fffdf9;
  --sobre-foto-2:      rgba(255, 253, 249, .84);
  --sobre-foto-linea:  rgba(255, 253, 249, .55);
  --velo-arriba:       rgba(0, 0, 0, .34);
  --velo-medio:        rgba(0, 0, 0, .24);
  --velo-abajo:        rgba(0, 0, 0, .62);
  /* El velo de una foto CLARA detrás de las letras (1-oct-2026; invitacion.js → medirFotoDePortada, y las cuentas en
     comun.js → claridadDeFoto): más oscuro donde van las letras. La sombra corta despega la letra delgada del fondo. */
  --velo-clara-arriba:     rgba(0, 0, 0, .42);
  --velo-clara-medio:      rgba(0, 0, 0, .36);
  --velo-muy-clara-arriba: rgba(0, 0, 0, .54);
  --velo-muy-clara-medio:  rgba(0, 0, 0, .5);
  --velo-muy-clara-abajo:  rgba(0, 0, 0, .7);
  --sombra-letra-foto:     rgba(0, 0, 0, .6);
  --visor-fondo:       rgba(8, 8, 8, .96);
  --visor-boton:       rgba(255, 255, 255, .08);

  --ancho:       33rem;
  --serif:       'Cormorant Garamond', ui-serif, Georgia, serif;
  --script:      'Pinyon Script', 'Cormorant Garamond', cursive;
  --sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* El tamaño de la letra: UNA escala para la base y los diez diseños (29-sep-2026). Leo: "las letras más grandes de
     todas las invitaciones, las veo muy pequeñas". Medido en un celular de 390 px, antes: las etiquetas en mayúsculas
     espaciadas ("PARA FAMILIA…", "NOS CASAMOS", la fecha, "DÍAS") iban de 8.8 a 10.9 px, los botones de 10.2 a 11.5,
     las direcciones y las notas de 12.5 a 13.6, y la historia de 16.8 a 20.5; y cada diseño escribía su tamaño chico a
     mano (.55rem, .6rem, .64rem…), así que subir uno no subía los demás. Ahora lo chico sale de aquí, y
     pruebas/casos/letra.js truena si algo queda debajo de 12 px o si lo que se lee de corrido baja de 17. Lo grande (los
     nombres, la fecha, los números, los títulos de sección de los diseños) no se toca: ya es grande, y la portada y el
     sobre tienen que seguir cabiendo. En rem: en la compu la raíz sube (112.5 y 125 %, abajo) y todo esto con ella.
     El espaciado entre letras va en em y crece con la letra: en lo que creció se bajó una quinta parte, para que el aire
     entre letras quede como estaba (en px) y lo que cabía en un renglón siga cabiendo; y lo que puede partirse en dos
     renglones se parte parejo (text-wrap: balance), no con una palabra sola abajo. */
  --letra-minima:       .75rem;     /* 12 px · el piso: lo que va en una caja angosta ("HORAS" en la cuenta) y el pie */
  --letra-etiqueta:     .8rem;      /* 12.8 px · las etiquetas en mayúsculas espaciadas y el detalle de un aviso */
  --letra-boton:        .84rem;     /* 13.4 px · los botones en mayúsculas espaciadas */
  --letra-nota:         1.0625rem;  /* 17 px · lo que acompaña a un dato: la dirección, la nota, dónde es cada momento */
  --letra-lectura:      1.3rem;     /* 20.8 px · la historia y los párrafos, en la serif (se ve más chica que su número) */
  --letra-lectura-sans: 1.15rem;    /* 18.4 px · los párrafos de los diseños que van en la sans (Aurora, Minimal, Fiesta) */
}
body[data-paleta="vino"] {
  --tinta:#332327; --tinta-2:#6d565b; --tinta-3:#7b6e71; --papel:#faf5f4; --papel-2:#fffcfb;
  --vellum:rgba(255,252,251,.72); --acento:#8c3a48; --acento-2:#d3a6ad; --linea:#ebd8db;
  --acento-hondo:#6d2b37; --error:#8a3c30;
}
body[data-paleta="jardin"] {
  --tinta:#2b3129; --tinta-2:#5f6b5a; --tinta-3:#6d736b; --papel:#f4f7f1; --papel-2:#fdfefc;
  --vellum:rgba(253,254,252,.72); --acento:#5a7452; --acento-2:#a9bda1; --linea:#d9e3d4;
  --acento-hondo:#42573c; --error:#8a3c30;
}
body[data-paleta="cielo"] {
  --tinta:#26303a; --tinta-2:#5b6a77; --tinta-3:#697279; --papel:#f2f6f9; --papel-2:#fdfeff;
  --vellum:rgba(253,254,255,.72); --acento:#456d8c; --acento-2:#a3c0d3; --linea:#d5e2ea;
  --acento-hondo:#31516b; --error:#8a3c30;
}
/* Siete paletas más, con más color (Leo y Rod, 26-sep-2026: las de ejemplo tienen que verse de
   muchos colores). Medidas contra su papel: la tinta, entre 12.3 y 13.2; el acento, de 4.2 a 5.9
   (arena, la de siempre, tiene 3.6). */
body[data-paleta="rosa"] {
  --tinta:#3a2429; --tinta-2:#74565d; --tinta-3:#7e6c70; --papel:#fdf3f5; --papel-2:#fffafb;
  --vellum:rgba(255,250,251,.72); --acento:#b54a66; --acento-2:#eab0bf; --linea:#f1d9df;
  --acento-hondo:#8f3a51; --error:#8a3c30;
}
body[data-paleta="lavanda"] {
  --tinta:#2e2a3a; --tinta-2:#635d77; --tinta-3:#726e7c; --papel:#f6f3fb; --papel-2:#fcfbff;
  --vellum:rgba(252,251,255,.72); --acento:#7159a8; --acento-2:#c5b8e6; --linea:#e2dcf0;
  --acento-hondo:#574386; --error:#8a3c30;
}
body[data-paleta="terracota"] {
  --tinta:#3b2a22; --tinta-2:#77594b; --tinta-3:#7b6d66; --papel:#fbf2ec; --papel-2:#fffaf6;
  --vellum:rgba(255,250,246,.72); --acento:#a9563a; --acento-2:#eeb89c; --linea:#f0dccf;
  --acento-hondo:#84432d; --error:#8a3c30;
}
body[data-paleta="menta"] {
  --tinta:#22332c; --tinta-2:#56706a; --tinta-3:#66746e; --papel:#eff8f4; --papel-2:#fbfefc;
  --vellum:rgba(251,254,252,.72); --acento:#347a64; --acento-2:#a8d8c6; --linea:#d3e8df;
  --acento-hondo:#285f4e; --error:#8a3c30;
}
body[data-paleta="girasol"] {
  --tinta:#33301f; --tinta-2:#6b6546; --tinta-3:#767262; --papel:#fdf8e8; --papel-2:#fffdf5;
  --vellum:rgba(255,253,245,.72); --acento:#96700f; --acento-2:#efd27a; --linea:#efe4bf;
  --acento-hondo:#75570b; --error:#8a3c30;
}
body[data-paleta="coral"] {
  --tinta:#3a2622; --tinta-2:#775a54; --tinta-3:#7d6c68; --papel:#fdf2ee; --papel-2:#fffaf8;
  --vellum:rgba(255,250,248,.72); --acento:#bf5442; --acento-2:#f3b3a5; --linea:#f3dbd4;
  --acento-hondo:#974234; --error:#8a3c30;
}
body[data-paleta="azul"] {
  --tinta:#1f2a3d; --tinta-2:#56637a; --tinta-3:#68707f; --papel:#f0f4fb; --papel-2:#fbfcff;
  --vellum:rgba(251,252,255,.72); --acento:#2f5ea3; --acento-2:#a9bee0; --linea:#d6dfee;
  --acento-hondo:#244a82; --error:#8a3c30;
}
/* Doce más (28-sep-2026, llamada Leo + Rod: *"faltan más colores"*), DERIVADAS con piezas/colores.js (la misma regla de los
   colores propios): tinta contra papel de 13.9 a 17.2, acento de 4.5 a 10.3, el hondo de 6.0 a 11. De su color base al token. */
body[data-paleta="champan"] {
  --tinta:#302512; --tinta-2:#695f4e; --tinta-3:#797060; --papel:#fbf6ea; --papel-2:#fdfbf7;
  --vellum:rgba(253,251,247,.72); --acento:#8c6c34; --acento-2:#d5c298; --linea:#ece1c9;
  --acento-hondo:#785c2d; --error:#8a3c30;
}
body[data-paleta="esmeralda"] {
  --tinta:#092019; --tinta-2:#52635d; --tinta-3:#64746f; --papel:#f1f7f3; --papel-2:#f9fcfa;
  --vellum:rgba(249,252,250,.72); --acento:#1f6b52; --acento-2:#c9a86a; --linea:#e1d7bc;
  --acento-hondo:#1f6b52; --error:#8a3c30;
}
body[data-paleta="marino"] {
  --tinta:#09111e; --tinta-2:#5a5f69; --tinta-3:#6b707a; --papel:#f2f4f8; --papel-2:#fafbfc;
  --vellum:rgba(250,251,252,.72); --acento:#1f3a64; --acento-2:#c7a55f; --linea:#e1d4bb;
  --acento-hondo:#1f3a64; --error:#8a3c30;
}
body[data-paleta="durazno"] {
  --tinta:#3b2016; --tinta-2:#725c54; --tinta-3:#826e66; --papel:#fff6f0; --papel-2:#fffbf9;
  --vellum:rgba(255,251,249,.72); --acento:#ab5d41; --acento-2:#ebb99f; --linea:#f7ded0;
  --acento-hondo:#924f38; --error:#8a3c30;
}
body[data-paleta="olivo"] {
  --tinta:#1c2010; --tinta-2:#5f6154; --tinta-3:#707266; --papel:#f7f6ee; --papel-2:#fcfbf8;
  --vellum:rgba(252,251,248,.72); --acento:#5d6b34; --acento-2:#c7c69b; --linea:#e4e3cd;
  --acento-hondo:#596632; --error:#8a3c30;
}
body[data-paleta="borgona"] {
  --tinta:#250912; --tinta-2:#6f5a61; --tinta-3:#7f6b72; --papel:#fbf3f5; --papel-2:#fdfafb;
  --vellum:rgba(253,250,251,.72); --acento:#7a1f3d; --acento-2:#e7a9b8; --linea:#f3d5dd;
  --acento-hondo:#7a1f3d; --error:#8a3c30;
}
body[data-paleta="salvia"] {
  --tinta:#1d2620; --tinta-2:#5c635e; --tinta-3:#6e7470; --papel:#f6f9f6; --papel-2:#fbfdfb;
  --vellum:rgba(251,253,251,.72); --acento:#5b7965; --acento-2:#b3c9ba; --linea:#dbe6de;
  --acento-hondo:#4e6756; --error:#8a3c30;
}
body[data-paleta="perla"] {
  --tinta:#1d1e22; --tinta-2:#606064; --tinta-3:#717174; --papel:#f7f7f8; --papel-2:#fcfcfc;
  --vellum:rgba(252,252,252,.72); --acento:#5f6470; --acento-2:#c1c3ca; --linea:#e1e2e6;
  --acento-hondo:#5d616d; --error:#8a3c30;
}
body[data-paleta="fucsia"] {
  --tinta:#360b21; --tinta-2:#785667; --tinta-3:#876878; --papel:#fff2f8; --papel-2:#fffafc;
  --vellum:rgba(255,250,252,.72); --acento:#b3246d; --acento-2:#f3a6c8; --linea:#fad4e5;
  --acento-hondo:#b2246d; --error:#8a3c30;
}
body[data-paleta="turquesa"] {
  --tinta:#072629; --tinta-2:#4d6567; --tinta-3:#5f7678; --papel:#f0faf9; --papel-2:#f9fdfd;
  --vellum:rgba(249,253,253,.72); --acento:#167e88; --acento-2:#d8c099; --linea:#e6e3d3;
  --acento-hondo:#136b74; --error:#8a3c30;
}
body[data-paleta="ciruela"] {
  --tinta:#1c0d1c; --tinta-2:#675c67; --tinta-3:#786d78; --papel:#f8f3f8; --papel-2:#fcfafc;
  --vellum:rgba(252,250,252,.72); --acento:#5c2a5e; --acento-2:#d4b06a; --linea:#ead8bf;
  --acento-hondo:#5c2a5e; --error:#8a3c30;
}
body[data-paleta="nube"] {
  --tinta:#162635; --tinta-2:#57636f; --tinta-3:#69747f; --papel:#f5f9fd; --papel-2:#fbfdfe;
  --vellum:rgba(251,253,254,.72); --acento:#4576a4; --acento-2:#aec6dd; --linea:#d9e5f0;
  --acento-hondo:#3b658c; --error:#8a3c30;
}
body[data-paleta="noche"] {
  --tinta:#efe9df; --tinta-2:#b6aa99; --tinta-3:#88847c; --papel:#16140f; --papel-2:#201d17;
  --vellum:rgba(32,29,23,.72); --acento:#c6a76a; --acento-2:#8a7448; --linea:#332e25;
  --acento-hondo:#6b5836; --error:#e8b5ab;
  --sombra:0 1.5rem 3.5rem -1.5rem rgba(0,0,0,.6);
  /* En la noche el "hondo" es más oscuro que el papel: el botón va en oro con la letra del papel (8.6). */
  --boton-fondo:var(--acento); --boton-texto:var(--papel); --acento-letra:var(--acento);
}
/* ═══ Los botones llenos (enviar, la opción elegida, el botón que acompaña) y la capa de color de la fecha.
   Un solo par, con 4.5 o más en TODAS las paletas (medido el 27-sep-2026: con el acento y letra blanca, arena daba
   3.95 y noche 2.30). Se declara en body, no en :root: así toma el "hondo" de la paleta que tiene puesta. */
body { --boton-fondo: var(--acento-hondo); --boton-texto: var(--papel-2); --acento-letra: var(--acento-hondo); }
/* --acento-letra: el acento para LETRA sobre el papel (la fecha límite para confirmar, la fecha del sobre de Editorial).
   El hondo en todas, menos en la noche, donde el hondo es más oscuro que el papel (2.46): ahí el acento (28-sep-2026, lo
   vio el ayudante de Fiesta). Se declara en body, como el par del botón, para que tome la paleta que tiene puesta. */

/* La muestra dentro de un teléfono (el formulario de la landing y el constructor del panel): sin la barra de
   desplazamiento de la compu. Se sigue bajando con la rueda o el dedo; la barra no es de un celular (28-sep-2026). */
html.en-muestra { scrollbar-width: none; }
html.en-muestra::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════ base */
* { box-sizing: border-box; }
/* Lo que se sale de lado se RECORTA, no solo se esconde (28-sep-2026). Con overflow-x: hidden en el cuerpo, la cinta de
   fotos inclinada (girada y un 5% más grande, de -18 a 408 px en un celular de 390) quedaba escondida, pero la página
   seguía midiendo 408: el celular dejaba arrastrarla de lado y hasta el sobre fijo medía 408 y se descentraba. Solo se
   ve con las animaciones prendidas (la cinta no se arma con "menos movimiento"): lo midió revisar_portadas --movimiento.
   Con "clip" en la raíz, a la ventana le llega "hidden" (no se desplaza de lado) y el cuerpo guarda el suyo: recorta en su
   orilla sin volverse un contenedor que se desplaza (lo pegajoso, sticky, sigue pegándose a la ventana). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;          /* en rem (no px): en la compu la letra de la raíz sube, y con ella todo (abajo) */
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;   /* un navegador sin "clip" (Safari antes del 16) se queda con este */
  overflow-x: clip;
  /* Una palabra que no cabe se parte (27-sep-2026). Un hashtag ("#MaximilianoYGuadalupeParaSiempre2027"), un enlace
     o un correo pegados en la historia o en una dirección no tienen dónde partirse, y a 320 px se salían de la
     pantalla en los cuatro diseños: el cuerpo recorta lo que se sale de lado, así que no se ve un scroll, se ve el
     texto cortado. Lo midió revisar_portadas.mjs --pagina. Los nombres de la portada van con nowrap y se achican aparte
     (apretarHastaCaber). */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El grano del papel. Sin esto el fondo se ve digital y plano; con esto se ve impreso.
   Va como textura SVG en línea: no carga nada de fuera (la CSP deja data: en img-src). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
body[data-paleta="noche"]::before { mix-blend-mode: screen; opacity: .35; }

/* ═══════════════════════════════════════════════════ tipografía compartida */
.script { font-family: var(--script); font-weight: 400; line-height: 1.15; }
.serif  { font-family: var(--serif); font-weight: 300; }

/* La etiqueta diminuta con mucho aire entre letras. Es el detalle que más "papelería fina"
   se siente, y el que casi ninguna plantilla se toma la molestia de hacer bien.
   El text-indent compensa el espacio que el tracking le cuelga a la última letra: sin eso,
   un texto "centrado" queda medio carácter corrido a la izquierda. */
.eyebrow {
  font-family: var(--sans); font-size: var(--letra-etiqueta); font-weight: 400;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: var(--tinta-3); margin: 0;
}

/* ═══════════════════════════════════════════════════ regla de un pelo con rombo */
.regla {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin: 0 auto 2.25rem; width: min(11rem, 60%);
}
.regla::before, .regla::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--linea));
}
.regla::before { background: linear-gradient(to left, transparent, var(--linea)); }
.regla i { width: 5px; height: 5px; background: var(--acento-2);
           transform: rotate(45deg); flex: none; }

/* ═══════════════════════════════════════════════════ el sobre */
.sobre {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-content: center; justify-items: center; gap: 2.5rem;
  background: var(--papel); padding: 1.5rem;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), visibility .9s;
  /* La carta NUNCA se encoge (27-sep-2026). En una pantalla baja (el celular acostado) la rejilla le daba solo su
     alto mínimo; el texto, anclado abajo, subía y el sello le caía encima a "PARA FAMILIA…" (lo midió
     revisar_portadas.mjs --sobre). Ahora cada renglón mide lo que su contenido, y si no cabe se puede bajar,
     empezando desde arriba ("safe": centrado, pero sin esconder la orilla de arriba). */
  grid-auto-rows: max-content; overflow-y: auto; align-content: safe center;
}
/* Con el letrero fijo de "invitación de ejemplo" arriba, el sobre le deja su lugar: acostado, lo tapaba. Con el id,
   para que le gane al relleno propio de cada diseño (el de Editorial pesaba lo mismo, iba después y lo borraba). */
body.con-letrero #sobre { padding-top: 4.5rem; }
/* El celular acostado (ancho y bajito): la carta y "Abrir invitación" van lado a lado. Uno debajo del otro no cabían:
   con la carta aplastada el sello le caía encima al nombre del invitado, y sin aplastarla el botón quedaba abajo de la
   pantalla (las dos cosas las midió revisar_portadas.mjs --sobre). */
@media (orientation: landscape) and (max-height: 32rem) {
  .sobre { grid-auto-flow: column; align-items: center; }   /* centrado: estirado, el botón medía lo que la carta */
  /* Acostado, el letrero se lleva lo que mide (termina a los 58 px) y nada más: con los 72 de siempre, la carta con nombres
     largos medía 3 px más que el hueco y el sobre se podía bajar sin nada abajo (revisar_portadas --sobre, 28-sep-2026). */
  body.con-letrero #sobre { padding-top: 4rem; }
  /* Y el "para quién" y la fecha, en un renglón y sin aire de más arriba y abajo: con la letra de la escala (29-sep-2026)
     partían en dos renglones de 22 px, y con el letrero de ejemplo la carta de nombres largos medía hasta 28 px más que la
     pantalla (Clásico, Editorial, Botánico) y en Déco el medallón subía debajo del letrero (revisar_portadas --sobre).
     Con ".sobre" delante: la regla de siempre de .sobre-para va más abajo en esta hoja y a peso igual le ganaba; el diseño
     que trae su propio espaciado (body[data-diseno]) sigue mandando. */
  .sobre .sobre-para, .sobre .sobre-fecha { line-height: 1.35; }
  .sobre .sobre-para { letter-spacing: .1em; text-indent: .1em; }
}
.sobre.abierto { opacity: 0; visibility: hidden; pointer-events: none; }
/* Mientras abre, el sobre no se desplaza. En el Clásico la carta vuela hacia el invitado (crece 2.9 veces) y el sobre,
   que se puede bajar, enseñaba barras de lado y de alto el último segundo (en la compu con mouse se ven): lo midió
   revisar_portadas --movimiento, cuadro por cuadro (28-sep-2026). hidden y no clip: con clip dejaría de ser una caja que
   se desplaza, y si estaba bajado (el celular acostado) brincaría hasta arriba justo al abrir. */
.sobre.abriendo { overflow: hidden; }

.sobre-carta {
  position: relative; cursor: pointer;
  background: var(--papel-2);
  box-shadow: var(--sombra), 0 0 0 1px var(--linea) inset;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);

  /* ── Que el sello NO le caiga encima al nombre. Dos veces ya pasó: a 375 px con la
     solapa al 50%, y otra vez a 320 px cuando "PARA FAMILIA RUIZ ALCÁNTARA" partió en
     dos renglones. Anclar el texto abajo no basta: con un nombre largo sube y choca.

     Ahora la separación es geométrica y no depende del largo del nombre:

       · el sello cuelga del pico de la solapa, que está al 40% de la ALTURA;
       · la altura es el ancho / 1.28, así que ese 40% es el 31.25% del ANCHO;
       · el sello mide 2.9rem, o sea que baja 1.45rem más;
       · y se le deja 0.75rem de aire.

     El padding en porcentaje se mide contra el ANCHO, que es justo lo que necesitamos.
     Y con min-height en vez de aspect-ratio, la tarjeta CRECE si el nombre es largo,
     en vez de dejar que el texto se salga. ── */
  /* UNA sola medida manda: cuánto baja la solapa. La solapa, el sello y el hueco del
     texto salen los tres de aquí, así que no se pueden separar.
     Se calcula desde el ANCHO (no desde la altura) a propósito: la altura crece cuando el
     nombre del invitado parte en dos renglones, y con ella se bajaba el sello encima del
     nombre. Ese fue el intento anterior, medido: 5 px de encimado a 320 px. */
  /* Y nunca más que el hueco del sobre (su ancho menos 1.5rem de cada lado): 84vw cabe desde 300 px, pero en una pantalla
     más angosta (la de afuera de un celular plegable mide 280) se pasaba y el sobre se arrastraba de lado. 28-sep-2026. */
  --ancho-carta: min(21rem, 84vw, calc(100vw - 3rem));
  --baja-solapa: calc(var(--ancho-carta) * 0.3125);   /* 40% de la altura de referencia */
  --radio-sello: 1.8rem;

  width: var(--ancho-carta);
  min-height: calc(var(--ancho-carta) / 1.28);
  padding: calc(var(--baja-solapa) + var(--radio-sello) + .8rem) 1.4rem 1.75rem;
}
.sobre.abriendo .sobre-carta { transform: translateY(-1.5rem) scale(.98); }

.sobre-solapa {
  /* Altura en píxeles derivada del ancho, no en % de la altura de la tarjeta: si no,
     la solapa crece cuando el nombre es largo y el pico baja con ella. */
  position: absolute; inset: 0 0 auto 0; height: var(--baja-solapa);
  background: linear-gradient(168deg, var(--acento-2) 0%, var(--acento) 92%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; backface-visibility: hidden;
  /* Un filo de luz en el doblez: es lo que hace que se lea como papel doblado y no como
     un triángulo de color. */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
  transition: transform .95s cubic-bezier(.62,.03,.25,1);
}
.sobre.abriendo .sobre-solapa { transform: rotateX(178deg); }

/* El sello de cera, colgando del pico de la solapa.
   La solapa va al 40% (no al 50% que uno pondría a ojo) porque el sello cuelga de su pico
   y, más abajo, le come el renglón "PARA FAMILIA ..." al invitado. Medido a 375 px.
   Los sobres de verdad también tienen la solapa más corta que la mitad. */
.sobre-sello {
  position: absolute; left: 50%; top: var(--baja-solapa);
  width: calc(var(--radio-sello) * 2); height: calc(var(--radio-sello) * 2);
  margin: calc(var(--radio-sello) * -1) 0 0 calc(var(--radio-sello) * -1);
  display: grid; place-content: center;
  font-family: var(--script); font-size: 1.35rem; font-weight: 400;
  letter-spacing: .02em; line-height: 1;
  transition: opacity .5s ease, transform .5s ease;

  /* ── Cera de verdad, no un círculo.
     Lo que hace que una cosa parezca cera y no un botón son tres detalles, y ninguno es
     el color:
       1. el borde es IRREGULAR — la cera se escurre al prensarla. Ese borde lo dibuja el
          clip-path de abajo, con 24 radios distintos;
       2. la luz entra por arriba a la izquierda y el color se hunde hacia el borde;
       3. el monograma está HUNDIDO, no impreso: una sombra clara arriba y una oscura
          abajo, que es lo que hace un troquel al prensar.
     Todo con CSS: ni una imagen que cargar, y la CSP no carga nada de fuera. */
  background:
    radial-gradient(ellipse at 32% 26%, rgba(255,255,255,.34), transparent 46%),
    radial-gradient(circle at 50% 50%, var(--acento-2) 8%, var(--acento) 58%, var(--acento-hondo) 100%);
  clip-path: polygon(
    50% 0.5%, 62% 2.4%, 71% 6.2%, 79% 11%, 86% 18%, 91.5% 26%, 95% 35%, 97.6% 44%,
    97.4% 55%, 95% 64%, 91% 73%, 85.5% 81%, 78% 87.5%, 70% 92.6%, 60.5% 96.4%, 50% 98.5%,
    39% 96.8%, 29.5% 93%, 21% 87.8%, 14% 81%, 8.6% 72.5%, 4.6% 63%, 2.6% 53%, 3.4% 42%,
    6.4% 32.5%, 11% 23.5%, 17.5% 15.6%, 25.5% 9%, 35% 4%);
  box-shadow:
    0 .3rem .75rem rgba(0,0,0,.34),                 /* la sombra que proyecta sobre el papel */
    inset 0 -.14rem .3rem rgba(0,0,0,.30),          /* el borde de abajo, más hondo */
    inset 0 .1rem .22rem rgba(255,255,255,.22);     /* el brillo del borde de arriba */
  color: color-mix(in srgb, var(--acento-hondo) 72%, #000);
  text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 1px rgba(0,0,0,.38);
}

.sobre.abriendo .sobre-sello { opacity: 0; transform: scale(.55) rotate(-14deg); }

.sobre-cuerpo { position: relative; z-index: 2; }
.sobre-para   { font-size: var(--letra-etiqueta); letter-spacing: .28em; text-indent: .28em;
                text-transform: uppercase; color: var(--tinta-3); margin: 0 0 .8rem; text-wrap: balance; }
.sobre-titulo { font-family: var(--script); font-size: calc(1.95rem * var(--escala, 1)); font-weight: 400;
                margin: 0 0 .45rem; line-height: 1.1; color: var(--tinta); }
.sobre-fecha  { font-family: var(--sans); font-size: var(--letra-etiqueta); letter-spacing: .22em;
                text-indent: .22em; text-transform: uppercase; color: var(--tinta-2); margin: 0; text-wrap: balance; }

.sobre-abrir {
  font-family: var(--sans); font-size: var(--letra-boton); font-weight: 400;
  letter-spacing: .22em; text-indent: .22em; text-transform: uppercase;
  padding: 1.05rem 2.4rem; cursor: pointer; min-height: 48px;
  background: transparent; color: var(--tinta); border: 1px solid var(--linea);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.sobre-abrir:hover  { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); }
.sobre-abrir:active { transform: translateY(1px); }
/* Tocó antes de que llegaran los datos: se nota que está en camino (se abre sola en cuanto lleguen). */
.sobre-abrir[aria-busy="true"] { opacity: .55; cursor: progress; }
/* Al tocar, el botón se va primero: en Aurora se quedaba montado encima del nombre mientras la
   portada ya aparecía detrás (se vio filmando la apertura cuadro por cuadro). */
.sobre.abriendo .sobre-abrir { opacity: 0; pointer-events: none; transition: opacity .25s ease; }

/* ═══════════════════════════════════════════════════ estructura */
main { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto;
       padding: 0 1.5rem 4rem; }
.seccion { padding: 2.75rem 0; }
.titulo-seccion {
  font-family: var(--sans); font-size: var(--letra-etiqueta); font-weight: 400;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: var(--tinta-3); text-align: center; margin: 0 0 2.25rem; text-wrap: balance;
}
.parrafo { margin: 0 auto 1rem; color: var(--tinta-2); text-align: center;
           max-width: 26rem; font-family: var(--serif); font-size: var(--letra-lectura); line-height: 1.6; text-wrap: pretty; }
.nota-chica { font-size: var(--letra-nota); color: var(--tinta-3); margin: .6rem 0 0; text-align: center; text-wrap: balance; }

/* ═══════════════════════════════════════════════════ portada
   Toda la pantalla, una sola idea. El monograma arriba, los nombres enormes,
   y la fecha como pieza gráfica. */
.portada {
  min-height: 100svh; display: grid; align-content: center; justify-items: center;
  text-align: center; padding: 5rem 0 4rem; position: relative;
}
.monograma {
  width: 4.5rem; height: 4.5rem; border: 1px solid var(--linea); border-radius: 50%;
  display: grid; place-content: center; margin-bottom: 2rem;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .1em; color: var(--acento);
}
.portada-etiqueta { margin-bottom: 1.75rem; }
.portada-titulo {
  font-family: var(--script); font-weight: 400; margin: 0;
  /* --escala la ponen las clases apretado-N (disenos.css) cuando un nombre largo no cabe (invitacion.js → ajustarNombres). */
  font-size: calc(clamp(3rem, 16vw, 5.25rem) * var(--escala, 1)); line-height: .98;
  color: var(--tinta); text-wrap: balance; letter-spacing: .012em;
}
.portada-frase {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: var(--letra-lectura); color: var(--tinta-2); margin: 1.75rem auto 0;
  max-width: 19rem; line-height: 1.6; text-wrap: balance;
}

/* la fecha sobredimensionada: números grandes separados por un rombo fino */
.fecha-grande {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin-top: 2.5rem; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 8vw, 2.6rem); color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em;
}
.fecha-grande span { display: block; }
.fecha-grande i { width: 4px; height: 4px; background: var(--acento-2);
                  transform: rotate(45deg); flex: none; }
.fecha-texto {
  margin: .9rem 0 0; font-family: var(--sans); font-size: var(--letra-etiqueta);
  letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: var(--tinta-2); text-wrap: balance;
}

.scroll-pista { position: absolute; bottom: 2rem; width: 1px; height: 3rem;
                background: var(--linea); overflow: hidden; }
.scroll-pista span { display: block; width: 100%; height: 45%; background: var(--acento);
                     animation: bajar 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes bajar { 0% { transform: translateY(-110%); } 100% { transform: translateY(240%); } }
@media (prefers-reduced-motion: reduce) { .scroll-pista span { animation: none; } }

/* ─── la portada con foto o video de fondo
   A todo lo ancho de la pantalla (se sale del ancho de lectura de main), con un velo oscuro para
   que las letras claras se lean encima, y un acercamiento lento que la hace sentir viva. */
.portada.con-foto { color: var(--sobre-foto); }
.portada-fondo {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  overflow: hidden; z-index: 0; background: var(--tinta);
}
.portada-fondo img, .portada-fondo video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: acercar 22s cubic-bezier(.22,.61,.36,1) both;
}
.portada-fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--velo-arriba) 0%, var(--velo-medio) 45%, var(--velo-abajo) 100%);
}
@keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1); } }
/* Una foto clara detrás de las letras (llamada del 1-oct-2026: en Cine, "MI BAUTIZO", la frase y la fecha se perdían sobre
   unas rosas blancas): el velo, más oscuro, y la letra chica más gruesa y con su sombra corta. Solo en los diseños que ponen
   las letras ENCIMA de la foto (el clásico y el cine): los demás la llevan en su marco, con las letras sobre el papel. */
body:is([data-diseno="clasico"], [data-diseno="cine"]) .portada.foto-clara .portada-fondo::after {
  background: linear-gradient(to bottom, var(--velo-clara-arriba) 0%, var(--velo-clara-medio) 45%, var(--velo-abajo) 100%);
}
body:is([data-diseno="clasico"], [data-diseno="cine"]) .portada.foto-muy-clara .portada-fondo::after {
  background: linear-gradient(to bottom, var(--velo-muy-clara-arriba) 0%, var(--velo-muy-clara-medio) 45%, var(--velo-muy-clara-abajo) 100%);
}
body:is([data-diseno="clasico"], [data-diseno="cine"]) .portada.con-foto :is(.portada-frase, .fecha-texto, .portada-etiqueta) {
  text-shadow: 0 1px 3px var(--sombra-letra-foto), 0 1px 14px var(--velo-abajo);
}
body:is([data-diseno="clasico"], [data-diseno="cine"]) .portada.con-foto :is(.fecha-texto, .portada-etiqueta) { font-weight: 500; }
body:is([data-diseno="clasico"], [data-diseno="cine"]) .portada.con-foto .portada-frase { font-weight: 400; }
/* Todo encima del fondo. La rayita de "baja" NO: ella va pegada abajo (absoluta), y ponerla
   relativa la subía encima de la fecha. */
/* Los avisos que flotan y los flashes del cine (disenos.css) van absolutos: si caen en esta regla, se
   acomodan en fila con las letras y la portada crece. */
.portada.con-foto > *:not(.portada-fondo):not(.scroll-pista):not(.destellos):not(.aviso-portada):not(.flash) { position: relative; z-index: 2; }
.portada.con-foto .scroll-pista { z-index: 2; }
.portada.con-foto .monograma { border-color: var(--sobre-foto-linea); color: var(--sobre-foto); }
.portada.con-foto .portada-titulo,
.portada.con-foto .fecha-grande { color: var(--sobre-foto); text-shadow: 0 2px 24px var(--velo-abajo); }
.portada.con-foto .portada-frase,
.portada.con-foto .fecha-texto,
.portada.con-foto .portada-etiqueta { color: var(--sobre-foto-2); text-shadow: 0 1px 14px var(--velo-abajo); }
/* Encima de una foto clara (rosas blancas, un vestido), el texto chico se perdía: la sombra lo
   separa del fondo sin oscurecer la foto entera. */
.portada.con-foto .fecha-grande i { background: var(--sobre-foto-2); }
.portada.con-foto .scroll-pista { background: var(--sobre-foto-linea); }
.portada.con-foto .scroll-pista span { background: var(--sobre-foto); }
@media (prefers-reduced-motion: reduce) { .portada-fondo img, .portada-fondo video { animation: none; } }

/* ═══════════════════════════════════════════════════ padrinos
   Como en una invitación impresa: el papel (Velación) chiquito y en mayúsculas, los nombres en
   letra de invitación debajo. */
.padrinos { display: grid; gap: 1.4rem; margin: 0; text-align: center; }
.padrino dt { font-family: var(--sans); font-size: var(--letra-etiqueta); letter-spacing: .24em; text-indent: .24em;
              text-transform: uppercase; color: var(--acento); margin-bottom: .35rem; text-wrap: balance; }
.padrino dd { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--tinta); text-wrap: balance; }
@media (min-width: 40rem) { .padrinos { grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; } }

/* ═══════════════════════════════════════════════════ videos */
.videos { display: grid; gap: 1.6rem; }
.video { margin: 0; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tinta);
               box-shadow: var(--sombra); }
/* Un video vertical del celular, en su forma (y que quepa en la pantalla); uno cuadrado, cuadrado. */
.video.forma-vertical video { aspect-ratio: 9 / 16; height: auto; margin-inline: auto;
                              width: min(100%, 22.5rem, 78vh * 9 / 16); width: min(100%, 22.5rem, 78svh * 9 / 16); }
.video.forma-cuadrado video { aspect-ratio: 1; }
.video figcaption { margin-top: .8rem; text-align: center; font-family: var(--serif); font-style: italic;
                    font-size: 1.2rem; color: var(--tinta-2); }

/* ═══════════════════════════════════════════════════ la fecha límite para confirmar */
.confirmar-limite { margin: -1.2rem auto 1.8rem; text-align: center; font-family: var(--serif); font-style: italic;
                    font-size: 1.2rem; color: var(--acento-letra); text-wrap: balance; }

/* ═══════════════════════════════════════════════════ el visor de fotos
   Toda la pantalla, en negro: la foto manda. Se cierra tocando fuera, con la × o con Esc. */
.visor {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--visor-fondo); place-items: center; overflow: hidden;
}
.visor[open] { display: grid; }
.visor::backdrop { background: var(--visor-fondo); }
.visor-foto { max-width: 100vw; max-height: 86dvh; object-fit: contain; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.visor-boton {
  position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sobre-foto-linea); background: var(--visor-boton); color: var(--sobre-foto);
  font-family: var(--sans); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.visor-cerrar { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.visor-antes { left: 10px; top: 50%; transform: translateY(-50%); }
.visor-despues { right: 10px; top: 50%; transform: translateY(-50%); }
.visor-cuenta { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0;
                text-align: center; font-family: var(--sans); font-size: var(--letra-etiqueta); letter-spacing: .24em;
                color: var(--sobre-foto-2); }

/* ═══════════════════════════════════════════════════ cuenta regresiva
   Sin cajas: números finos sobre el papel, separados por líneas de un pelo. */
.cuenta-caja { display: grid; grid-template-columns: repeat(4, 1fr); }
/* Con 100 días o más (invitacion.js → latir), los días toman más ancho: con cuatro columnas iguales "227" se partía. */
.cuenta-caja.cien { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.cuenta-dato { text-align: center; padding: .25rem .2rem; position: relative; }
.cuenta-dato + .cuenta-dato::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: var(--linea);
}
.cuenta-dato b {
  display: block; white-space: nowrap; font-family: var(--serif); font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 300; line-height: 1; font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta);
}
.cuenta-dato span {
  display: block; margin-top: .6rem; font-size: var(--letra-minima); font-weight: 400;
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--tinta-3);
}
.cuenta-ya { text-align: center; font-family: var(--serif); font-style: italic;
             font-size: 1.5rem; color: var(--acento); margin: 0; }

/* ═══════════════════════════════════════════════════ itinerario
   Una línea de tiempo con un pelo de línea y un punto por momento. */
.itinerario { list-style: none; margin: 0; padding: 0; position: relative; }
.itinerario::before {
  content: ''; position: absolute; left: 3.9rem; top: 1.4rem; bottom: 1.4rem; width: 1px;
  background: var(--linea);
}
.itinerario li {
  display: grid; grid-template-columns: 3.2rem 1.4rem 1fr; gap: 0 .75rem;
  padding: 1.05rem 0; align-items: baseline;
}
.itinerario .hora {
  font-family: var(--serif); font-size: 1.15rem; color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
}
.itinerario .punto { position: relative; height: 1em; }
.itinerario .punto::after {
  content: ''; position: absolute; left: 50%; top: .42em;
  width: 6px; height: 6px; margin-left: -3px;
  background: var(--papel); border: 1px solid var(--acento); border-radius: 50%;
}
.itinerario .que  { font-family: var(--serif); font-size: 1.4rem; font-weight: 400;
                    color: var(--tinta); line-height: 1.3; }
.itinerario .donde { display: block; font-family: var(--sans); font-size: var(--letra-nota);
                     color: var(--tinta-3); margin-top: .15rem; }

/* ═══════════════════════════════════════════════════ lugares · vellum
   Papel translúcido encima del fondo, como el papel cebolla de una invitación real. */
.lugares { display: grid; gap: 1rem; }
/* El PDF del hospedaje: un botón debajo de los hoteles (o solo, si no pusieron hoteles). */
.hospedaje-pdf { margin: 1.4rem 0 0; text-align: center; }
.lugares:empty + .hospedaje-pdf { margin-top: 0; }
.lugar {
  background: var(--vellum); border: 1px solid var(--linea);
  padding: 1.9rem 1.4rem; text-align: center;
  backdrop-filter: blur(1.5px);
}
.lugar h3 { margin: 0 0 .45rem; font-family: var(--serif); font-weight: 400;
            font-size: 1.6rem; color: var(--tinta); line-height: 1.25; }
.lugar p  { margin: 0 0 1.3rem; color: var(--tinta-3); font-size: var(--letra-nota); line-height: 1.6; text-wrap: balance; }

/* ═══════════════════════════════════════════════════ regalos a la mexicana
   La tienda con su número de evento grande (se dicta y se copia), la lluvia de sobres y los
   datos para transferir. Mismo papel vellum que los lugares: es parte de la invitación. */
#regalosTiendas { margin: 1.4rem 0; }
#regalosTiendas:empty { display: none; }
.lugar .tienda-etiqueta { margin: 0 0 .2rem; font-family: var(--sans); font-size: var(--letra-etiqueta);
                          letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); }
.lugar .tienda-numero { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.7rem;
                        color: var(--tinta); letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums; }
.enlace-tienda { display: inline-block; margin-top: 1rem; font-family: var(--sans); font-size: var(--letra-nota);
                 color: var(--tinta-2); text-underline-offset: .25em; }
.sobres { margin-top: 1.6rem; }
.transferencia { margin-top: 1.4rem; }
.datos-transferencia { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem;
                       margin: 0 auto 1.4rem; max-width: 20rem; text-align: left; }
.datos-transferencia dt { font-family: var(--sans); font-size: var(--letra-etiqueta); letter-spacing: .14em;
                          text-transform: uppercase; color: var(--tinta-3); align-self: center; }
.datos-transferencia dd { margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--tinta);
                          overflow-wrap: anywhere; }
/* Cifras parejas (no las de estilo antiguo de la tipografía): se leen y se dictan mejor. */
.datos-transferencia .clabe { font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; }
.copiado { min-height: 1.2em; margin: .9rem 0 0; text-align: center; font-family: var(--sans);
           font-size: var(--letra-nota); color: var(--acento); }

/* ═══════════════════════════════════════════════════ galería */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.galeria-foto { display: block; padding: 0; border: 0; background: var(--linea); cursor: zoom-in; overflow: hidden; }
.galeria-foto:first-child { grid-column: 1 / -1; }
.galeria img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
               filter: saturate(.92) contrast(1.02); transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.galeria-foto:first-child img { aspect-ratio: 4/3; }
.galeria-foto:hover img { transform: scale(1.04); }
.galeria-foto:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════ vestimenta */
.vestimenta { text-align: center; font-family: var(--serif); font-weight: 300;
              font-size: clamp(1.9rem, 8vw, 2.4rem); margin: 0; color: var(--tinta);
              letter-spacing: .01em; }
/* Las fotos de cómo ir vestidos: dos por renglón (o una sola, centrada), como tarjetas de la galería. */
.vestimenta-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.4rem; }
.vestimenta-fotos .galeria-foto:only-child { grid-column: 1 / -1; max-width: 70%; justify-self: center; }
.vestimenta-fotos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════ botones */
.botones { display: grid; gap: .65rem; justify-items: center; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .85rem 1.9rem; text-decoration: none;
  font-family: var(--sans); font-size: var(--letra-boton); font-weight: 400;
  letter-spacing: .18em; text-indent: .18em; text-transform: uppercase; text-wrap: balance;
  background: transparent; color: var(--tinta); border: 1px solid var(--linea);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.boton:hover { background: var(--boton-fondo); border-color: var(--boton-fondo); color: var(--boton-texto); }

/* ═══════════════════════════════════════════════════ confirmar
   La sección que decide si el invitado contesta. Tiene que sentirse fácil. */
.confirmar {
  background: var(--vellum); border: 1px solid var(--linea);
  padding: 3rem 1.4rem; margin-top: 1rem; backdrop-filter: blur(1.5px);
}
.confirmar-saludo {
  text-align: center; font-family: var(--serif); font-weight: 300;
  font-size: 1.35rem; line-height: 1.45; margin: 0 0 2rem; color: var(--tinta);
  text-wrap: balance;
}
/* Solo para adultos (1-oct-2026): dicho al confirmar, como letrero chico. Es una .etiqueta (su color lo pone cada diseño:
   en los oscuros, claro); aquí solo su lugar. */
.etiqueta.confirmar-solo-adultos { margin: -1.2rem 0 1.8rem; text-align: center; }
#ninosCaja { margin-top: 1.2rem; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.5rem; }
.opcion {
  font-family: var(--sans); font-size: var(--letra-boton); font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase; text-wrap: balance;
  padding: 1.15rem .3rem; min-height: 52px; cursor: pointer;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta-2);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.opcion:hover { border-color: var(--acento-2); color: var(--tinta); }
.opcion[aria-pressed="true"] { background: var(--boton-fondo); color: var(--boton-texto); border-color: var(--boton-fondo); }

.etiqueta { display: block; font-family: var(--sans); font-size: var(--letra-etiqueta); font-weight: 400;
            letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
            margin: 1.5rem 0 .6rem; }
.etiqueta i { font-style: normal; text-transform: none; letter-spacing: .04em; opacity: .75; }

.campo {
  width: 100%; font-family: var(--sans); font-weight: 300;
  padding: .85rem 1rem; border: 1px solid var(--linea);
  background: var(--papel-2); color: var(--tinta);
  /* 16px mínimo: por debajo de eso, el iPhone hace zoom solo al tocar el campo */
  font-size: max(16px, 1rem); border-radius: 0;
}
.campo::placeholder { color: var(--tinta-3); }
.campo:focus { outline: 1px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }

.contador { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.contador-btn {
  font-family: var(--serif); font-size: 1.5rem; width: 48px; height: 48px;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta-2);
  cursor: pointer; border-radius: 50%; line-height: 1;
  transition: border-color .3s ease, color .3s ease;
}
.contador-btn:hover:not([disabled]) { border-color: var(--acento); color: var(--acento); }
.contador-btn[disabled] { opacity: .3; cursor: not-allowed; }
.contador-n {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 300; width: 3.5rem;
  text-align: center; border: 0; background: none; color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; padding: 0;
}
.contador-n::-webkit-outer-spin-button, .contador-n::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.enviar {
  width: 100%; min-height: 52px; padding: 1.1rem .75rem; margin-top: 2rem; cursor: pointer;
  font-family: var(--sans); font-size: var(--letra-boton); font-weight: 400;
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; text-wrap: balance;
  background: var(--boton-fondo); color: var(--boton-texto); border: 1px solid var(--boton-fondo);
  transition: filter .3s ease, transform .15s ease;
}
.enviar:hover { filter: brightness(1.08); }
.enviar:active { transform: translateY(1px); }
.enviar[disabled] { opacity: .5; cursor: progress; }

.link-boton { background: none; border: 0; cursor: pointer; padding: .6rem;
              font-family: var(--sans); font-size: var(--letra-nota); color: var(--tinta-3);
              text-decoration: underline; text-underline-offset: 3px; }
.link-boton:hover { color: var(--acento); }

.aviso {
  margin: 1.1rem 0 0; padding: .85rem 1rem; font-size: var(--letra-nota); text-align: center;
  background: rgba(154, 60, 48, .07); color: var(--error); border: 1px solid rgba(154, 60, 48, .2);
}

.gracias { text-align: center; font-family: var(--serif); font-style: italic;
           font-weight: 300; font-size: 1.5rem; margin: 0 0 .75rem; color: var(--acento);
           line-height: 1.4; text-wrap: balance; }

/* ═══════════════════════════════════════════════════ el pase de entrada
   El QR va en negro sobre su propio cuadro blanco (lo trae el SVG) y con su margen: es lo que
   piden los lectores de la puerta. En los colores de la paleta se vería precioso y fallaría
   con la luz de un salón. El código escrito, abajo, por si el QR no se lee. */
.pase {
  background: var(--vellum); border: 1px solid var(--linea);
  padding: 2rem 1.4rem 1.8rem; margin-top: 1rem; text-align: center; backdrop-filter: blur(1.5px);
}
.pase-qr { width: min(15rem, 82%); margin: 0 auto 1.4rem; }
.pase-qr svg { display: block; width: 100%; height: auto; }
.pase-nombre { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
               line-height: 1.3; color: var(--tinta); text-wrap: balance; }
.pase-codigo { margin: 1.1rem 0 .2rem; font-family: var(--sans); font-size: 1.15rem; font-weight: 500;
               letter-spacing: .24em; text-indent: .24em; color: var(--tinta);
               font-variant-numeric: tabular-nums; }
/* Lo de la captura, a la vista (llamada del 1-oct-2026: antes era una nota chica y gris que nadie leía). */
.pase-captura { margin: 1.3rem auto 1.1rem; max-width: 22rem; font-family: var(--sans); font-size: var(--letra-nota);
                line-height: 1.5; color: var(--tinta); text-wrap: balance; }
.pase-captura b { font-weight: 600; }

/* ═══════════════════════════════════════════════════ música */
.musica {
  position: fixed; right: 1.1rem; top: 1.1rem; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--vellum); border: 1px solid var(--linea);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; gap: 2.5px;
}
.musica-onda { width: 2px; height: 8px; background: var(--acento); border-radius: 1px;
               animation: sonar 1.1s ease-in-out infinite; }
.musica-onda:nth-child(2) { animation-delay: .18s; height: 14px; }
.musica-onda:nth-child(3) { animation-delay: .36s; }
@keyframes sonar { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.2); } }
.musica.callada .musica-onda { animation: none; transform: scaleY(.4); opacity: .45; }

/* ═══════════════════════════════════════════════════ pie */
.pie { text-align: center; padding: 3rem 0 1rem; }
#pieTitulo { font-family: var(--script); font-size: 1.85rem; color: var(--tinta);
             margin: 0 0 .6rem; line-height: 1.2; }
.pie-marca { font-family: var(--sans); font-size: var(--letra-minima); letter-spacing: .24em;
             text-indent: .24em; text-transform: uppercase; color: var(--tinta-3); margin: 0; text-wrap: balance; }
.pie-marca span { color: var(--acento); }

.vacio { min-height: 100svh; display: grid; place-content: center; text-align: center;
         padding: 2rem; gap: .75rem; position: relative; z-index: 2; }
.vacio-titulo { font-family: var(--serif); font-weight: 300; font-size: 1.75rem; margin: 0; }
.vacio-texto  { color: var(--tinta-3); margin: 0 auto; max-width: 22rem; font-size: var(--letra-nota); }

/* ═══════════════════════════════════════════════════ aparecer al bajar
   Tipografía cinética: cada bloque entra desde abajo, con un desfase por hijo.
   Es lo que hace que se sienta "vivo" en vez de una página que ya estaba ahí. */
.aparece > * { opacity: 0; transform: translateY(1.1rem);
               transition: opacity .95s cubic-bezier(.22,.61,.36,1),
                           transform .95s cubic-bezier(.22,.61,.36,1); }
.aparece.visible > * { opacity: 1; transform: none; }
.aparece.visible > *:nth-child(2) { transition-delay: .09s; }
.aparece.visible > *:nth-child(3) { transition-delay: .18s; }
.aparece.visible > *:nth-child(4) { transition-delay: .27s; }
.aparece.visible > *:nth-child(5) { transition-delay: .36s; }
.aparece.visible > *:nth-child(n+6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .aparece > * { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════ pantallas grandes
   El teléfono es el caso normal. Esto es el añadido, no al revés. */
@media (min-width: 40rem) {
  body { font-size: 1.0625rem; }
  .seccion { padding: 4rem 0; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  /* Solo la primera foto, panorámica. Decía ".galeria img:first-child", y cada foto es la primera hija de su botón: en
     la compu TODAS salían a 16:9 y las verticales perdían cabezas y pies (lo vio el ayudante de Botánico, 28-sep-2026). */
  .galeria-foto:first-child img { aspect-ratio: 16/9; }
  .lugares { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .confirmar { padding: 3.5rem 2.5rem; }
  .monograma { width: 5.25rem; height: 5.25rem; font-size: 1.2rem; }
}
/* En la compu, TODO más grande (llamada del 28-sep-2026: "de repente la letra está súper chiquita […] en compu no se
   ve chido; en celular se ve mejor"). La invitación está hecha para el celular, en rem: subir la letra de la raíz sube
   en proporción los textos, los espacios, el sobre y el ancho de la columna (33rem), sin tocar cada regla. Solo con
   pantalla alta también: acostada y bajita, más grande ya no cabe. Las media queries en rem no cambian con esto (se
   miden con la letra del navegador), así que no hay vuelta. */
@media (min-width: 64rem) and (min-height: 40rem) { html { font-size: 112.5%; } }
@media (min-width: 80rem) and (min-height: 46rem) { html { font-size: 125%; } }


/* ═══════════════════════════════════ el relieve del papel
   Lo que separa una invitación cara de una plantilla no es el color: es que el papel se
   vea PRENSADO. Un patrón floral de línea, tono sobre tono, casi invisible de frente y
   evidente cuando la luz lo cruza — igual que un papel con realce de verdad.

   Va como SVG dentro del CSS: no carga ni un archivo de fuera, así que la CSP estricta
   (default-src 'self') lo deja pasar sin excepciones.

   La opacidad es MUY baja a propósito. Si se nota el dibujo, se ve a estampado barato;
   si apenas se intuye, se ve a papel de imprenta. */
/* El contenedor necesita posición propia, o su ::before se ancla a la VENTANA y el
   relieve queda pegado a la pantalla en vez de al papel. */
#invitacion { position: relative; }
.sobre-carta::before,
#invitacion::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.5%27%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2750%27%20r%3D%277%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2750%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%2820%2050%2050%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2750%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%2880%2050%2050%29%27%2F%3E%3Cellipse%20cx%3D%2750%27%20cy%3D%2750%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%28140%2050%2050%29%27%2F%3E%3Cpath%20d%3D%27M50%2068%20C48%2084%2040%2092%2030%2098%27%2F%3E%3Cpath%20d%3D%27M38%2084%20C30%2082%2026%2076%2026%2070%20C34%2070%2038%2076%2038%2084%20Z%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27150%27%20r%3D%277%27%2F%3E%3Cellipse%20cx%3D%27150%27%20cy%3D%27150%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%2850%20150%20150%29%27%2F%3E%3Cellipse%20cx%3D%27150%27%20cy%3D%27150%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%28110%20150%20150%29%27%2F%3E%3Cellipse%20cx%3D%27150%27%20cy%3D%27150%27%20rx%3D%2716%27%20ry%3D%279%27%20transform%3D%27rotate%28170%20150%20150%29%27%2F%3E%3Cpath%20d%3D%27M150%20168%20C152%20184%20160%20192%20170%20198%27%2F%3E%3Cpath%20d%3D%27M162%20184%20C170%20182%20174%20176%20174%20170%20C166%20170%20162%20176%20162%20184%20Z%27%2F%3E%3Cpath%20d%3D%27M100%208%20C112%2020%20112%2034%20100%2046%20C88%2034%2088%2020%20100%208%20Z%27%2F%3E%3Cpath%20d%3D%27M8%20100%20C20%20112%2034%20112%2046%20100%20C34%2088%2020%2088%208%20100%20Z%27%2F%3E%3Cpath%20d%3D%27M192%20100%20C180%20112%20166%20112%20154%20100%20C166%2088%20180%2088%20192%20100%20Z%27%2F%3E%3Cpath%20d%3D%27M100%20192%20C112%20180%20112%20166%20100%20154%20C88%20166%2088%20180%20100%20192%20Z%27%2F%3E%3Cpath%20d%3D%27M64%20122%20C78%20118%2092%20126%2096%20140%27%2F%3E%3Cpath%20d%3D%27M136%2078%20C122%2082%20108%2074%20104%2060%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 175px 175px;
  opacity: .075;
  mix-blend-mode: multiply;
}
/* El texto ya va encima: .sobre-cuerpo tiene z-index 2. NO se le pone position:relative a
   TODOS los hijos — eso le quita el position:absolute a la solapa y al sello, y el sobre se
   desarma. Pasó, y se vio al abrirlo, no en la suite. */

/* En la paleta oscura el multiply desaparece: ahí el relieve se hace con luz. */
body[data-paleta="noche"] .sobre-carta::before,
body[data-paleta="noche"] #invitacion::before { mix-blend-mode: screen; opacity: .07; }

@media (prefers-reduced-motion: no-preference) {
  /* El sello llega como si lo acabaran de prensar. */
  .sobre-sello { animation: prensar .75s cubic-bezier(.34,1.3,.5,1) both .55s; }
  @keyframes prensar {
    from { opacity: 0; transform: scale(1.5) rotate(-12deg); }
    to   { opacity: 1; transform: none; }
  }
}

/* ═══════════════════════════════════ el aviso de "invitación de ejemplo"
   Solo en las de la landing. Arriba, fijo, y que se lea: con nombres ficticios y todo,
   alguien podría creer que es la boda de alguien de verdad. Y de paso vende: lleva al
   formulario de contacto. */
.aviso-ejemplo {
  position: fixed; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 90; width: max-content; max-width: calc(100vw - 1.2rem);
  display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem 1rem; border-radius: 980px; text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif; font-size: .8rem; font-weight: 500;
  color: var(--plataforma-texto); background: var(--plataforma-fondo); letter-spacing: -0.01em;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.aviso-ejemplo b { color: #fff; background: var(--plataforma-azul); font-weight: 600; padding: .38rem .8rem; border-radius: 980px; }

/* El de las invitaciones de ejemplo (29-sep-2026): dos enlaces en la misma píldora. A la izquierda, "‹ Ejemplos", de regreso
   a los ejemplos de la landing (Rod: "los ejemplos ya no te dejan regresar fácil al home": la landing los abre en otra
   pestaña y el "atrás" del navegador no tiene a dónde ir); a la derecha, "Invitación de ejemplo · Quiero una así", al
   formulario, como siempre. Del mismo alto que antes: el sobre y los avisos de la portada le dejan su lugar
   (body.con-letrero #sobre, invitacion.js → ponerAvisos). En un celular angosto (menos de 388 px: un iPhone SE o uno de
   360) no caben la palabra y el letrero: queda la flecha sola, con su nombre para el lector de pantalla (aria-label). Con
   #avisoEjemplo y no con .aviso-ejemplo: la vista previa usa la misma píldora (previa.css → .aviso-previa) y ahí no va el
   regreso. Medido con Chrome: en un renglón de 320 a 1440 px. */
#avisoEjemplo { gap: .45rem; padding: .45rem; white-space: nowrap; }
.aviso-volver, .aviso-quiero { display: flex; align-items: center; color: inherit; text-decoration: none; border-radius: 980px; }
.aviso-quiero { gap: .45rem; }
.aviso-volver {
  position: relative; flex: none; gap: .35rem; height: 2.16rem; padding: 0 .75rem 0 .65rem;
  background: var(--plataforma-perla); font-weight: 600; transition: background .2s ease;
}
/* Se ve chico, pero el dedo le atina: lo que se toca llega a lo alto de la píldora (44 px o más). */
.aviso-volver::after { content: ''; position: absolute; inset: -.45rem -.3rem; }
.aviso-volver:hover { background: var(--plataforma-perla-2); }
.aviso-volver svg { flex: none; width: .45rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-volver:focus-visible, .aviso-quiero:focus-visible { outline: 2px solid var(--plataforma-azul); outline-offset: 2px; }
@media (max-width: 24.25rem) {
  .aviso-volver { justify-content: center; width: 2.16rem; padding: 0; }
  .aviso-volver-texto { display: none; }
}
/* Un celular chico (320 px): todo un poco más junto, para que siga en un renglón. */
@media (max-width: 22.5rem) {
  #avisoEjemplo { gap: .4rem; padding: .45rem .4rem; max-width: calc(100vw - .8rem); }
  #avisoEjemplo .aviso-quiero { gap: .45rem; }
  #avisoEjemplo b { padding: .38rem .65rem; }
}
/* Y en uno más angosto todavía (la pantalla de afuera de un plegable, 280 px) ni así cabe: el letrero se parte en dos
   renglones, como hacía antes, en vez de salirse de su píldora. */
@media (max-width: 19rem) { #avisoEjemplo { white-space: normal; } }

/* ═══════════════════════════════════════════════════ la canción, de YouTube (30-sep-2026)
   El reproductor de YouTube a la vista (así lo pide YouTube), del mismo tamaño y con la misma sombra que los videos. Antes
   de armarse es un botón de "Escuchar" sobre el papel: nada de YouTube carga hasta que el invitado abre el sobre o lo toca.
   El alto mínimo de 200 px es el que pide YouTube para su reproductor. */
.cancion-nombre { margin: -.6rem auto 1.4rem; text-align: center; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35;
                  color: var(--tinta); text-wrap: balance; }
.cancion-autor { display: block; font-style: italic; font-size: 1.05rem; color: var(--tinta-2); }
.cancion-marco { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; min-height: 200px;
                 overflow: hidden; background: var(--tinta); box-shadow: var(--sombra); }
.cancion-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cancion-tocar { display: inline-flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .6rem 1.4rem .6rem 1rem;
                 border: 1px solid var(--linea); border-radius: 980px; cursor: pointer; font: 500 1rem/1 var(--sans);
                 letter-spacing: .02em; color: var(--tinta); background: var(--papel); }
.cancion-tocar:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.cancion-play { width: 0; height: 0; border-style: solid; border-width: .45rem 0 .45rem .75rem;
                border-color: transparent transparent transparent var(--acento); }
.cancion-nota { margin: .9rem auto 0; text-align: center; font-family: var(--sans); font-size: .95rem; color: var(--tinta-2); }