/* Invitación: la suite del sobre. */

:root {
  --papel-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Valores de la paleta verde; assets/estilos.js los cambia por paleta */
  --cartulina-luz: #2f5d48;
  --cartulina-media: #27503e;
  --cartulina-honda: #1f4434;
  --brillo-suelo: rgba(62, 106, 82, 0.45);
  /* Destellos del fondo: el oro, su centro de luz, el halo y la sombra de las orillas */
  --destello: #f3d27e;
  --destello-luz: #fff7df;
  --destello-halo: rgba(232, 180, 76, 0.22);
  --destello-sombra: color-mix(in srgb, var(--sombra) 55%, transparent);
  --matasellos-sobre: var(--polen-claro);
  --barra-riel: var(--verde-hondo);
  --grano-suelo: var(--grano);
  --forro-img: url(forro.svg);
  --escala-nombres: 1;
  --escala-mano: 1;
  --cartulina: linear-gradient(158deg, var(--cartulina-luz) 0%, var(--cartulina-media) 42%, var(--cartulina-honda) 100%);
  --pliegues: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 0L50 80L0 140Z' fill='%23000' fill-opacity='.1'/%3E%3Cpath d='M100 0L50 80L100 140Z' fill='%23000' fill-opacity='.05'/%3E%3Cpath d='M0 140L50 76L100 140Z' fill='%23fff' fill-opacity='.035'/%3E%3Cpath d='M0 140L50 76L100 140' fill='none' stroke='%23000' stroke-opacity='.28' stroke-width='.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

html {
  background: var(--verde);
  scrollbar-color: var(--verde-luz) var(--barra-riel);
}

html:not(.intro) {
  scroll-behavior: smooth;
}

html.intro {
  overflow: hidden;
}

body {
  min-height: 100svh;
  overflow-x: clip;
  color: var(--tinta-sobre);
  background:
    var(--fibra),
    var(--grano-suelo),
    radial-gradient(90% 60% at 20% 0%, var(--brillo-suelo), transparent 70%),
    var(--verde);
  background-attachment: scroll;
}

/*
 * Destellos: una capa fija detrás de todas las piezas, también detrás del
 * sobre. Un halo dorado arriba y en las esquinas, las orillas en sombra y,
 * encima, el lienzo donde assets/destellos.js pinta el oro que titila.
 */
.destellos {
  position: fixed;
  inset: 0 0 auto;
  z-index: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background:
    radial-gradient(75% 45% at 50% -6%, var(--destello-halo), transparent 72%),
    radial-gradient(55% 38% at 104% 96%, var(--destello-halo), transparent 70%),
    radial-gradient(50% 34% at -4% 70%, color-mix(in srgb, var(--destello-halo) 70%, transparent), transparent 70%),
    radial-gradient(140% 95% at 50% 42%, transparent 48%, var(--destello-sombra) 100%);
}

.destellos canvas {
  display: block;
  width: 100%;
  height: 100%;
}

main {
  position: relative;
  z-index: 1;
}

/* ---------- Escena del sobre ---------- */

/*
 * El sobre llena la pantalla, en teléfono y en computador. Sus piezas se miden
 * con el lado corto de la pantalla para guardar la proporción en vertical y en
 * apaisado. Atrás van el forro y la tarjeta; delante, el bolsillo y la solapa.
 */
.escena {
  position: relative;
  z-index: 40;
}

.escena-capa {
  position: fixed;
  inset: 0;
}

.escena-delante {
  z-index: 1;
  pointer-events: none;
}

html:not(.intro) .escena {
  display: none;
}

/*
 * Primera visita con los datos en Supabase: la página espera el estilo de la
 * boda antes de mostrarse, para no pintar un sobre verde que luego cambia.
 */
html.estilo-pendiente {
  background: var(--algodon-hondo);
}

html.estilo-pendiente body {
  opacity: 0;
}

body {
  transition: opacity 0.4s ease-out;
}

.sobre {
  --margen: clamp(22px, 6.5vw, 112px);
  --arriba: calc(env(safe-area-inset-top) + clamp(22px, 5svh, 60px));
  --sello-postal: clamp(76px, min(19vw, 17svh), 150px);
  --sello-cierre: clamp(64px, min(18vw, 14svh), 128px);
  position: absolute;
  inset: 0;
}

.sobre-delante {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.sobre-delante:focus-visible {
  outline-offset: -14px;
  border-radius: 0;
}

.abriendo .sobre-delante {
  cursor: default;
}

.sobre-frente,
.sobre-bolsillo-sombra,
.sobre-bolsillo,
.sobre-interior,
.sobre-carta,
.solapa {
  position: absolute;
}

.sobre-frente {
  inset: 0;
  overflow: hidden;
  background: var(--fibra), var(--cartulina);
}

.sobre-numero {
  position: absolute;
  top: calc(var(--arriba) + 0.4rem);
  left: var(--margen);
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: clamp(0.82rem, 0.5rem + 0.9vmin, 1.1rem);
  letter-spacing: 0.24em;
  color: var(--salvia-clara);
}

.sobre-sello {
  position: absolute;
  top: var(--arriba);
  right: var(--margen);
  width: var(--sello-postal);
  aspect-ratio: 70 / 86;
  transform: rotate(4deg);
}

.sobre-matasellos {
  position: absolute;
  top: calc(var(--arriba) - var(--sello-postal) * 0.06);
  right: calc(var(--margen) - var(--sello-postal) * 0.48);
  width: calc(var(--sello-postal) * 2.6);
  transform: rotate(-8deg);
  color: var(--matasellos-sobre);
  opacity: 0.9;
}

.sobre-matasellos[data-estado='declinado'] {
  color: var(--salvia-clara);
}

.sobre-direccion {
  position: absolute;
  left: max(var(--margen), 10%);
  right: var(--margen);
  top: 44%;
  display: grid;
  justify-items: start;
}

.sobre-para {
  font-family: var(--f-texto);
  font-style: italic;
  font-size: clamp(1.05rem, 0.8rem + 0.8vmin, 1.4rem);
  color: var(--salvia);
}

.sobre-nombre {
  font-family: var(--f-mano);
  font-size: calc(clamp(2.5rem, min(11.5vw, 7.5svh), 5.8rem) * var(--escala-mano));
  line-height: 1.04;
  color: var(--tinta-sobre);
  margin-top: 0.1em;
  min-height: 1.1em;
  text-wrap: balance;
}

.sobre-nombre.escribiendo {
  animation: escribir 1.6s var(--sal-suave) both;
}

@keyframes escribir {
  from { clip-path: inset(-20% 100% -30% 0); }
  to { clip-path: inset(-20% -5% -30% 0); }
}

.sobre-rubrica {
  width: min(78%, 30rem);
  height: auto;
  margin-top: -0.2rem;
  overflow: visible;
}

.sobre-rubrica path {
  fill: none;
  stroke: var(--tinta-sobre);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.75;
  stroke-dasharray: 240;
  stroke-dashoffset: 0;
}

.sobre-rubrica.escribiendo path {
  animation: rubrica 0.9s 1.2s var(--sal-suave) both;
}

@keyframes rubrica {
  from { stroke-dashoffset: 240; }
}

.sobre-cupos {
  margin-top: 0.55rem;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: clamp(0.82rem, 0.55rem + 0.7vmin, 1.05rem);
  letter-spacing: 0.26em;
  color: var(--salvia);
}

/* En pantalla ancha la dirección va hacia el centro, como en un sobre apaisado */
@media (min-width: 640px) and (min-aspect-ratio: 1 / 1) {
  .sobre-direccion {
    left: 36%;
    top: 46%;
  }
}

/* Dorso: bolsillo con pliegues, solapa y sello de cierre */
.sobre-dorso {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

[data-cara='dorso'] .sobre-dorso {
  visibility: visible;
}

[data-cara='dorso'] .sobre-frente {
  visibility: hidden;
}

/* El borde del bolsillo proyecta su sombra sobre la tarjeta que va dentro */
.sobre-bolsillo-sombra {
  inset: 0;
  filter: drop-shadow(0 -1px 4px color-mix(in srgb, var(--sombra) 45%, transparent));
}

.sobre-bolsillo {
  inset: 0;
  background: var(--pliegues) 0 0 / 100% 100%, var(--fibra), var(--cartulina);
  clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%);
}

.sobre-interior {
  inset: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--verde-hondo) 45%, transparent), transparent 30%),
    var(--forro-img) 0 0 / clamp(150px, 18vmin, 210px);
}

/* La invitación espera dentro del sobre: se ve al levantar la solapa */
.sobre-carta {
  left: 6%;
  right: 6%;
  top: calc(var(--arriba) + 2svh);
  bottom: 0;
  background: var(--papel-claro), var(--algodon);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 -2px 10px -2px color-mix(in srgb, var(--sombra) 45%, transparent);
}

.sobre-carta::before {
  content: '';
  position: absolute;
  inset: 14px 14px 0;
  border: 1px solid color-mix(in srgb, var(--tinta) 13%, transparent);
  border-bottom: 0;
}

/* El texto de la carta de gala solo va en Vino & Marfil (vino.css) */
.carta-gala {
  display: none;
}

.sobre-interior,
.sobre-carta {
  visibility: hidden;
}

[data-cara='dorso'] .sobre-interior,
[data-cara='dorso'] .sobre-carta {
  visibility: visible;
}

.solapa {
  left: 0;
  right: 0;
  top: 0;
  height: 54%;
  transform-origin: 50% 0;
}

.solapa-cerrada {
  display: grid;
  justify-items: center;
  align-content: start;
  filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--sombra) 35%, transparent));
}

.solapa-forma {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.1)),
    var(--fibra),
    var(--cartulina);
}

.solapa-remite {
  position: relative;
  margin-top: calc(env(safe-area-inset-top) + 12svh);
  font-family: var(--f-mano);
  font-size: calc(clamp(1.4rem, min(6vw, 5.5svh), 2.8rem) * var(--escala-mano));
  color: var(--salvia-clara);
}

.solapa-remite i,
.remite-firma i {
  font-style: normal;
  color: var(--salvia);
}

.sobre-sello-cierre {
  position: absolute;
  left: 50%;
  top: 100%;
  width: var(--sello-cierre);
  aspect-ratio: 1;
  margin: calc(var(--sello-cierre) / -2) 0 0 calc(var(--sello-cierre) / -2);
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 0.18em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--algodon) 55%, var(--algodon-hondo));
  box-shadow:
    inset 0 0 0 calc(var(--sello-cierre) * 0.06) var(--algodon),
    inset 0 0 0 calc(var(--sello-cierre) * 0.06 + 1px) var(--linea),
    0 3px 8px rgba(0, 0, 0, 0.35);
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: calc(var(--sello-cierre) * 0.24);
  color: var(--tinta);
}

.escena-pista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(5svh, calc(env(safe-area-inset-bottom) + 20px));
  margin: 0;
  text-align: center;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: clamp(1.1rem, 0.85rem + 0.7vmin, 1.4rem);
  color: var(--salvia-clara);
  animation: respirar 2.8s ease-in-out infinite;
}

.abriendo .escena-pista {
  opacity: 0;
  transition: opacity 0.3s;
  animation: none;
}

@keyframes respirar {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- Portada: la tarjeta a pantalla completa ---------- */

/*
 * La tarjeta aparece a pantalla completa cuando el sobre se desvanece. Con
 * scroll-vivo, la sección es más alta que la pantalla y la tarjeta queda fija
 * mientras --p (0 → 1) la asienta sobre la mesa: se aleja, gira un poco y
 * aparece el verde alrededor.
 */
.portada {
  --alto-foto: min(24svh, 340px);
  --ancho-ramo: calc(var(--alto-foto) * 0.86);
  --p: 0;
  --asiento: 0.18;
  position: relative;
  height: 100svh;
}

.scroll-vivo .portada {
  height: 190svh;
}

.portada-escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.intro main {
  visibility: hidden;
}

/* Mientras el sobre está cerrado, la invitación ni se calcula ni se dibuja
   (rendimiento): se arma al tocar el sobre, durante su animación. */
.intro:not(.abriendo) main {
  content-visibility: hidden;
}

/* Lo de adentro del sobre (el forro y la tarjeta) queda tapado por el frente
   hasta que se abre: no se dibuja antes (es lo más caro de la primera
   pantalla). */
.intro:not(.abriendo) .escena-atras {
  content-visibility: hidden;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  color: var(--tinta);
  background: var(--papel-claro), var(--algodon);
  border-radius: 3px;
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid color-mix(in srgb, var(--tinta) 13%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.tarjeta-marca {
  position: absolute;
  right: 22px;
  bottom: 18px;
  margin: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--tinta-tenue);
}

.tarjeta-invitacion {
  position: absolute;
  inset: 0;
  width: auto;
  display: grid;
  align-content: center;
  padding:
    max(28px, calc(env(safe-area-inset-top) + 22px))
    26px
    calc(36px + env(safe-area-inset-bottom));
  text-align: center;
  transform-origin: 50% 32%;
  transform:
    translate3d(0, calc(var(--p) * 3svh), 0)
    scale(calc(1 - var(--p) * var(--asiento)))
    rotate(calc(var(--p) * -1.4deg));
}

/* Doble filete de tarjeta grabada */
.tarjeta-invitacion::before {
  inset: 14px;
  outline: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  outline-offset: -6px;
}

.tarjeta-invitacion .tarjeta-marca {
  right: 28px;
  bottom: calc(26px + env(safe-area-inset-bottom));
}

.tarjeta-cuerpo {
  position: relative;
  z-index: 1;
}

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

.nombre {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: calc(clamp(2.3rem, min(13vw, 6.4svh), 4.4rem) * var(--escala-nombres));
  line-height: 0.92;
  letter-spacing: 0.05em;
  padding-left: 0.05em;
}

.apellido {
  margin-top: min(0.55rem, 1.1svh);
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 0.44em;
  padding-left: 0.44em;
  color: var(--tinta-suave);
}

.y {
  margin: min(0.4rem, 0.8svh) 0 min(0.25rem, 0.5svh);
  font-family: var(--f-mano);
  font-size: calc(clamp(2.4rem, 5.4svh, 3.2rem) * var(--escala-mano));
  line-height: 0.8;
  color: var(--verde-luz);
}

.invitacion-texto {
  max-width: 25ch;
  margin: clamp(0.8rem, 2.2svh, 1.6rem) auto 0;
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  text-wrap: balance;
}

.invitacion-cuando {
  margin-top: clamp(0.7rem, 2svh, 1.4rem);
  padding-top: clamp(0.7rem, 2svh, 1.1rem);
  position: relative;
}

.invitacion-cuando::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 56px;
  height: 1px;
  margin-left: -28px;
  background: var(--tinta-tenue);
  opacity: 0.6;
}

.invitacion-cuando p {
  margin: 0;
}

.invitacion-fecha {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-wrap: balance;
}

.invitacion-ciudad {
  margin-top: 0.3rem !important;
  font-size: 1.02rem;
  color: var(--tinta-suave);
}

.por-confirmar {
  font-family: var(--f-texto) !important;
  font-style: italic;
  letter-spacing: 0 !important;
  color: var(--tinta-tenue) !important;
  text-transform: none;
}

.invitacion-para {
  margin: clamp(0.8rem, 2.4svh, 1.6rem) 0 0;
  display: grid;
  justify-items: center;
}

.para-de {
  font-style: italic;
  font-size: 0.98rem;
  color: var(--tinta-suave);
}

.para-nombre {
  font-family: var(--f-mano);
  font-size: calc(clamp(2rem, 4.6svh, 2.6rem) * var(--escala-mano));
  line-height: 1.1;
  color: var(--tinta);
  text-wrap: balance;
}

.para-cupos {
  margin-top: 0.35rem;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--tinta-suave);
}

/*
 * La foto de los novios, impresa en un arco con su filete, y el ramo apoyado
 * en la esquina de abajo: las flores tapan solo esa esquina y los tallos
 * salen hacia el borde de la tarjeta. El arco se corre un poco a la derecha
 * para que foto y ramo queden centrados juntos.
 */
.retrato {
  --giro-ramo: 74deg;
  --ramo-x: 8%;
  --ramo-y: 70%;
  position: relative;
  justify-self: center;
  width: calc(var(--alto-foto) * 0.8);
  height: var(--alto-foto);
  margin-bottom: clamp(12px, 2svh, 28px);
  translate: calc(var(--alto-foto) * 0.12) 0;
}

.retrato-marco {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 999px 999px 2px 2px;
  outline: 1px solid color-mix(in srgb, var(--tinta) 20%, transparent);
  outline-offset: 5px;
}

.retrato-foto {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--verde-hondo) 40%, transparent), transparent 50%),
    var(--forro-img) 50% 0 / 130px,
    var(--verde-forro);
}

.retrato-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 16%, transparent), inset 0 2px 8px color-mix(in srgb, var(--sombra) 20%, transparent);
  pointer-events: none;
}

.retrato-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Sin foto todavía: el arco deja ver el forro y, en modo local, dónde va el archivo */
.retrato-pendiente {
  position: absolute;
  left: 50%;
  top: 22%;
  width: max-content;
  max-width: 86%;
  margin: 0;
  padding: 7px 10px 8px;
  display: grid;
  gap: 2px;
  justify-items: center;
  translate: -50% 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--algodon) 94%, transparent);
  font-family: var(--f-ui);
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--tinta-suave);
  text-wrap: balance;
}

.retrato-pendiente b {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--tinta);
}

/* El centro de las flores cae sobre la esquina del arco y desde ahí gira */
.ramo-lugar {
  position: absolute;
  left: var(--ramo-x);
  top: var(--ramo-y);
  width: var(--ancho-ramo);
  aspect-ratio: 600 / 640;
  transform-origin: 50% 40%;
  transform:
    translate(-50%, -40%)
    translate3d(0, calc(var(--p) * -2svh), 0)
    rotate(calc(var(--giro-ramo) + var(--p) * -4deg));
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--tinta) 22%, transparent)) drop-shadow(0 1px 1px color-mix(in srgb, var(--tinta) 18%, transparent));
  pointer-events: none;
  z-index: 2;
}

.ramo-lugar .ramo {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.portada-pista {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  min-height: 44px;
  margin: clamp(0.6rem, 2.2svh, 1.4rem) auto 0;
  padding: 4px 12px 0;
  font-style: italic;
  font-size: 1rem;
  color: var(--tinta-suave);
  text-decoration: none;
  white-space: nowrap;
  opacity: calc(1 - var(--p) * 5);
}

.portada-pista svg {
  width: 16px;
  height: 28px;
  overflow: visible;
}

.portada-pista path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  animation: bajar 2.6s var(--sal-suave) infinite;
}

@keyframes bajar {
  0% { stroke-dashoffset: 60; }
  55%, 100% { stroke-dashoffset: 0; }
}

.recien-abierta .portada-pista {
  animation: aparecer 0.8s 2.2s ease-out both;
}

/* Teléfonos bajos: la tarjeta aprieta su interlineado y la pista queda en flecha */
@media (max-height: 740px) {
  .portada {
    --alto-foto: min(21svh, 340px);
  }

  .tarjeta-invitacion {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  .invitacion-texto {
    font-size: 1.04rem;
    line-height: 1.38;
  }

  .invitacion-fecha {
    font-size: 1.02rem;
  }

  .para-de,
  .invitacion-ciudad {
    font-size: 0.94rem;
  }

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

  .portada-pista {
    margin-top: 0.3rem;
  }
}

/* ---------- Tarjeta de respuesta ---------- */

.tarjeta-respuesta {
  width: min(100%, 520px);
  padding: 30px 24px 50px;
  transform: rotate(0.7deg);
  transition: opacity 0.6s ease-out, transform 1s var(--sal-papel);
}

/* Se reparte sobre la mesa cuando el invitado llega a ella */
.tarjeta-respuesta.por-repartir {
  opacity: 0;
  transform: translateY(70px) rotate(6deg);
}

.respuesta-titulo {
  margin: 0;
  padding: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.07em;
  line-height: 1.2;
}

.respuesta-sub {
  margin: 0.45rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.respuesta-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.eleccion-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0.85rem;
}

.respuesta-form .respuesta-sub {
  margin-top: 0.4rem;
  font-size: 0.98rem;
}

.opcion {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 1.04rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.opcion:hover {
  border-color: var(--tinta-tenue);
  background: #fff;
}

.opcion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opcion-caja {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--tinta);
  border-radius: 2px;
  display: grid;
  place-items: center;
  background: #fff;
}

.opcion-caja svg {
  width: 30px;
  height: 30px;
  margin: -6px -4px 0 0;
  overflow: visible;
}

.opcion-caja path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.35s var(--sal-suave);
}

.opcion input:checked + .opcion-caja path {
  stroke-dashoffset: 0;
}

.opcion:has(input:checked) {
  border-color: var(--tinta);
  background: #fff;
}

.opcion:has(input:focus-visible) {
  outline: 3px solid var(--polen);
  outline-offset: 2px;
}

.respuesta-detalle {
  display: grid;
  gap: 1.3rem;
  margin-top: 1.4rem;
}

.respuesta-detalle[hidden] {
  display: none;
}

.cuantos {
  display: grid;
  gap: 0.5rem;
}

.campo-etiqueta {
  font-size: 1rem;
  color: var(--tinta-suave);
}

.campo-etiqueta em {
  font-style: italic;
  color: var(--tinta-tenue);
}

.contador {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contador-boton {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  background: #fff;
  color: var(--tinta);
  transition: background-color 0.2s, opacity 0.2s;
}

.contador-boton:hover:not(:disabled) {
  background: var(--algodon-hondo);
}

.contador-boton:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.contador-valor {
  min-width: 1.6em;
  text-align: center;
  font-family: var(--f-cifras);
  font-size: 2.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.contador-de {
  font-style: italic;
  color: var(--tinta-suave);
}

.mensaje-campo {
  display: grid;
  gap: 0.3rem;
}

.mensaje-campo textarea {
  width: 100%;
  min-height: 98px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  resize: vertical;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--linea) 31px, var(--linea) 32px);
  font-family: var(--f-texto);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 32px;
  color: var(--tinta);
}

.mensaje-campo textarea:focus {
  outline: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--tinta-tenue) 31px, var(--tinta-tenue) 32px);
}

.mensaje-campo textarea::placeholder {
  color: var(--tinta-tenue);
}

/* Preguntas opcionales (alergias, canción): un solo renglón, como el mensaje */
.renglon-campo {
  display: grid;
  gap: 0.3rem;
}

.renglon-campo[hidden] {
  display: none;
}

.renglon-campo input,
.quienes-lista input {
  width: 100%;
  min-height: 44px;
  padding: 6px 2px 4px;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  background: transparent;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--tinta);
}

.renglon-campo input:focus,
.quienes-lista input:focus {
  outline: none;
  border-bottom-color: var(--tinta-tenue);
}

.renglon-campo input::placeholder,
.quienes-lista input::placeholder {
  color: var(--tinta-tenue);
}

/* Quiénes van: un renglón numerado por persona, debajo de «¿Cuántos irán?» */
.quienes {
  min-width: 0;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.quienes legend {
  padding: 0;
}

.quienes-lista {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: quien;
}

.quien {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  align-items: end;
  counter-increment: quien;
}

.quien::before {
  content: counter(quien) '.';
  padding-bottom: 10px;
  font-family: var(--f-cifras);
  font-variant-numeric: lining-nums;
  font-size: 0.95rem;
  color: var(--tinta-tenue);
}

.quien input[aria-invalid='true'] {
  border-bottom-color: var(--declinado);
}

.boton-responder {
  min-height: 58px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 3px;
  background: var(--polen);
  color: var(--tinta);
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 var(--polen-hondo), 0 8px 16px -8px color-mix(in srgb, var(--sombra) 40%, transparent);
  transition: background-color 0.2s, transform 0.15s var(--sal-suave), box-shadow 0.15s;
}

.boton-responder:hover:not(:disabled) {
  background: var(--polen-claro);
}

.boton-responder:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 var(--polen-hondo), 0 4px 10px -6px color-mix(in srgb, var(--sombra) 40%, transparent);
}

.boton-responder:disabled {
  cursor: progress;
  opacity: 0.75;
}

.boton-responder .girando {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.respuesta-error {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--declinado);
}

.respuesta-error:empty {
  display: none;
}

.respuesta-nota {
  margin: 1rem 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--linea);
  font-family: var(--f-ui);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* Respondida: el matasellos se queda */
.respuesta-hecha {
  position: relative;
}

.respuesta-hecha .matasellos {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 104px;
  transform: rotate(-11deg);
  color: var(--polen-hondo);
  opacity: 0.9;
}

.respuesta-hecha {
  padding-right: 96px;
}

.respuesta-hecha[data-estado='declinado'] .matasellos {
  color: var(--tinta-suave);
}

.recien-sellada .matasellos {
  animation: sellar 0.55s var(--sal-papel) both;
}

@keyframes sellar {
  0% { transform: rotate(-4deg) scale(1.5); opacity: 0; }
  55% { opacity: 0.95; }
  100% { transform: rotate(-11deg) scale(1); opacity: 0.9; }
}

.respuesta-hecha .respuesta-titulo {
  max-width: 11em;
}

.respuesta-resumen {
  margin: 0.8rem 0 0;
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 30ch;
}

.respuesta-resumen b {
  font-family: var(--f-cifras);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Lo que contestó a las preguntas opcionales */
.respuesta-datos {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

.respuesta-datos dt {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--tinta-tenue);
}

.respuesta-datos dd {
  margin: 0.1rem 0 0;
  font-style: italic;
  line-height: 1.45;
}

.respuesta-cita {
  margin: 1rem 0 0;
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 1px solid var(--linea);
  font-style: italic;
  color: var(--tinta-suave);
  line-height: 1.5;
}

.enlace-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--verde-forro);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

.enlace-accion:hover {
  text-decoration-color: currentColor;
}

.enlace-accion[hidden] {
  display: none;
}

.respuesta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin-top: 0.8rem;
}

/* ---------- Tarjeta de mesa: el invitado confirmado encuentra la suya ---------- */

.tarjeta-mesa {
  width: min(100%, 420px);
  margin-top: 12px;
  padding: 34px 22px 54px;
  text-align: center;
  transform: rotate(-1.3deg);
  transition: opacity 0.6s ease-out, transform 1s var(--sal-papel);
  scroll-margin-top: 24px;
}

.tarjeta-mesa.por-repartir {
  opacity: 0;
  transform: translateY(64px) rotate(-7deg);
}

.mesa-para {
  margin: 0;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--tinta-suave);
}

.mesa-invitado {
  margin: 0;
  font-family: var(--f-mano);
  font-size: calc(2.15rem * var(--escala-mano));
  line-height: 1.1;
  text-wrap: balance;
}

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

.mesa-palabra {
  padding-left: 0.32em;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  color: var(--tinta-suave);
}

.mesa-cifra {
  font-size: 4.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.mesa-pendiente {
  margin-top: 0.3rem;
  font-size: 1.5rem;
}

.mesa-apodo {
  margin: 0.15rem 0 0;
  font-style: italic;
  font-size: 1.14rem;
  color: var(--tinta-suave);
}

.mesa-nota {
  max-width: 30ch;
  margin: 0.8rem auto 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.mesa-plano {
  margin: 1.3rem -4px 0;
}

.mesa-plano figcaption {
  max-width: 32ch;
  margin: 0.7rem auto 0;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* El plano impreso en la tarjeta: tinta clara, y la mesa del invitado en tinta llena */
.plano-invitado {
  display: block;
  width: 100%;
  height: auto;
}

.plano-invitado .plano-muros {
  fill: color-mix(in srgb, var(--tinta) 3%, transparent);
  stroke: color-mix(in srgb, var(--tinta) 30%, transparent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.plano-invitado .zona-fondo {
  fill: color-mix(in srgb, var(--tinta) 6%, transparent);
  stroke: color-mix(in srgb, var(--tinta) 38%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.plano-invitado .zona-nombre {
  font-family: var(--f-grabada);
  letter-spacing: 0.12em;
  text-anchor: middle;
  fill: var(--tinta-suave);
}

.plano-invitado .tablero {
  fill: var(--algodon);
  stroke: color-mix(in srgb, var(--tinta) 45%, transparent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.plano-invitado .mesa-numero {
  font-family: var(--f-cifras);
  font-size: 38px;
  font-variant-numeric: lining-nums;
  text-anchor: middle;
  fill: var(--tinta-tenue);
}

.plano-invitado .destacada .tablero {
  fill: var(--tinta);
  stroke: var(--tinta);
}

.plano-invitado .destacada .mesa-numero {
  font-size: 46px;
  fill: var(--algodon);
}

/* El círculo a mano alrededor de su mesa: se traza cuando la tarjeta llega */
.plano-anillo {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.scroll-vivo .tarjeta-mesa .plano-anillo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scroll-vivo .tarjeta-mesa.vista .plano-anillo {
  animation: trazar-anillo 1.3s var(--sal-suave) 0.45s forwards;
}

@keyframes trazar-anillo {
  to { stroke-dashoffset: 0; }
}

/* En la tarjeta de la portada: el número de su mesa, que lleva a la tarjeta de mesa */
/* El área de toque llega a 44px sin empujar la pista de abajo */
.para-mesa {
  display: inline-block;
  margin: -0.55rem 0 -0.7rem;
  padding: 0.85rem 0.6rem;
  line-height: 1;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.para-mesa:hover {
  text-decoration-color: currentColor;
}

.para-mesa[hidden] {
  display: none;
}

/* ---------- Pliegos: cada parte de la invitación ---------- */

/*
 * Cada parte es un pliego, como las hojas de una invitación de varias piezas:
 * su título impreso en la cartulina, sus piezas de papel y, si le toca, una
 * foto de la pareja (al lado en pantalla ancha, alternando; debajo en el
 * teléfono). Entre pliegos hay mucho verde; dentro, el título va cerca de su
 * pieza.
 */
:root {
  --entre-pliegos: clamp(112px, 15vh, 176px);
}

.pliego {
  position: relative;
  display: grid;
  gap: clamp(40px, 6vh, 56px);
  width: min(100% - 32px, 620px);
  margin: var(--entre-pliegos) auto 0;
}

.pliego[hidden],
.pliego-foto[hidden] {
  display: none;
}

.pliego-texto {
  display: grid;
  align-content: start;
  gap: clamp(26px, 4vh, 36px);
  min-width: 0;
}

.pliego-titulo {
  margin: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: calc(clamp(2.15rem, 1.1rem + 4.4vw, 4.4rem) * var(--escala-nombres));
  line-height: 0.98;
  letter-spacing: 0.05em;
  color: var(--tinta-sobre);
  text-wrap: balance;
}

/* Un filete corto debajo, como bajo un título grabado */
.pliego-titulo::after {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 0.4em;
  background: currentColor;
  opacity: 0.45;
}

/* El cierre es una frase, no un rótulo: un poco más pequeño */
.pliego-responder .pliego-titulo {
  font-size: calc(clamp(2rem, 1rem + 3.8vw, 3.6rem) * var(--escala-nombres));
  line-height: 1.04;
}

.pliego-llegar {
  width: min(100% - 32px, 920px);
}

.pliego-momentos {
  width: min(100% - 32px, 1040px);
}

.pliego-responder .tarjeta-mesa {
  justify-self: end;
}

/* La foto del pliego: una copia grande con sus esquineros, que se corre a un lado */
.pliego-foto {
  width: min(86%, 420px);
  justify-self: end;
}

.pliego[data-lado='izquierda'] .pliego-foto {
  justify-self: start;
}

.pliego-foto:has(.foto[data-forma='horizontal']) {
  width: min(100%, 560px);
}

.pliego-foto .foto {
  transform: rotate(1.8deg);
}

.pliego[data-lado='izquierda'] .pliego-foto .foto {
  transform: rotate(-1.6deg);
}

.pliego-foto .esquina {
  width: 30px;
  height: 30px;
}

/* ---------- Cuándo y dónde: tres tarjetitas sobre la mesa ---------- */

.capitulos {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
  justify-items: center;
}

.capitulo {
  width: min(100%, 360px);
  padding: 24px 26px 26px;
  text-align: center;
}

.capitulo:nth-child(1) { transform: rotate(-1.4deg); }
.capitulo:nth-child(2) { transform: rotate(1.2deg); }
.capitulo:nth-child(3) { transform: rotate(-0.8deg); }

.capitulo-titulo {
  margin: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.07em;
  line-height: 1.2;
}

.capitulo p {
  margin: 0;
}

.capitulo-dato {
  margin-top: 0.55rem !important;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-wrap: balance;
}

.capitulo-hora {
  font-family: var(--f-cifras);
  font-size: 2.3rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.capitulo-lugar {
  font-family: var(--f-texto);
  font-size: 1.3rem;
  letter-spacing: 0;
  line-height: 1.25;
}

.capitulo-dato.por-confirmar {
  font-size: 1.2rem;
}

.capitulo-nota {
  margin-top: 0.45rem !important;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}

.capitulo-nota .cifra {
  font-style: normal;
}

.capitulo .enlace-accion {
  margin-top: 0.4rem;
}

/* ---------- Cómo llegar ---------- */

.tarjeta-llegar {
  width: 100%;
  padding: 40px 22px 50px;
  text-align: center;
  transform: rotate(-0.4deg);
}

.sitios {
  display: grid;
  gap: 40px;
  text-align: left;
}

.sitio {
  display: grid;
  gap: 24px;
  align-items: center;
}

.sitio + .sitio {
  padding-top: 40px;
  border-top: 1px solid var(--linea);
}

.sitio-mapa {
  position: relative;
  margin: 0;
  padding: 8px;
  background: var(--algodon);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--sombra) 20%, transparent), 0 12px 22px -12px color-mix(in srgb, var(--sombra) 50%, transparent);
  transform: rotate(0.7deg);
}

.sitio + .sitio .sitio-mapa {
  transform: rotate(-0.6deg);
}

.sitio-mapa .esquina {
  width: 22px;
  height: 22px;
}

.sitio-marco {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--algodon-hondo);
}

.sitio-marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.45) sepia(0.08);
}

.sitio-datos {
  display: grid;
  justify-items: start;
}

.sitio-datos p {
  margin: 0;
}

.sitio-momento {
  margin: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.07em;
  line-height: 1.2;
}

.sitio-hora {
  margin-top: 0.45rem !important;
  font-family: var(--f-cifras);
  font-size: 1.5rem;
  line-height: 1.2;
}

.sitio-nombre {
  margin-top: 0.5rem !important;
  font-size: 1.35rem;
  line-height: 1.3;
  max-width: 26ch;
}

.sitio-direccion {
  margin-top: 0.25rem !important;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  max-width: 34ch;
}

.apps {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 1.2rem;
}

.app {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.app:hover {
  border-color: var(--tinta-tenue);
  background: #fff;
}

.app:active {
  background: var(--algodon-hondo);
}

.app span {
  white-space: nowrap;
}

.app .icono {
  width: 22px;
  height: 22px;
  color: var(--verde-forro);
}

.app .app-salida {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--tinta-tenue);
}

.sitio-datos .enlace-accion {
  margin-top: 0.5rem;
}

.sitio-solo .sitio-datos {
  justify-items: center;
  text-align: center;
}

.sitio-solo .sitio-nombre {
  max-width: none;
}

.sitio-solo .apps {
  max-width: 680px;
}

.llegar-calendario {
  margin: 2rem 0 0;
}

/* Vista previa (modo local o desde el panel): lo vacío dice dónde se llena */
.tarjeta .seccion-pendiente,
.preguntas-lista .seccion-pendiente {
  display: grid;
  gap: 4px;
  max-width: 36ch;
  margin: 1.4rem auto 0;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--tinta) 30%, transparent);
  font-family: var(--f-ui);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tinta-suave);
}

.tarjeta .seccion-pendiente b,
.preguntas-lista .seccion-pendiente b {
  font-weight: 600;
  color: var(--tinta);
}

.preguntas-lista:has(.seccion-pendiente) {
  border-top: 0;
}

/* ---------- Dónde quedarse ---------- */

.tarjeta-alojamiento {
  width: 100%;
  padding: 40px 24px 58px;
  text-align: center;
  transform: rotate(-0.6deg);
}

.alojamiento-nota {
  margin: 0 auto 1.4rem;
  max-width: 34ch;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.alojamiento-nota[hidden] {
  display: none;
}

.hoteles {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hotel {
  padding: 22px 0 18px;
  border-top: 1px solid var(--linea);
}

.hotel:first-child {
  border-top: 0;
  padding-top: 4px;
}

.hotel p {
  max-width: 34ch;
  margin: 0.3rem auto 0;
}

.hotel-nombre {
  margin: 0;
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
}

.hotel-direccion {
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.hotel-nota {
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.45;
}

.hotel-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 22px;
  margin-top: 0.3rem;
}

/* ---------- Itinerario ---------- */

.tarjeta-programa {
  width: 100%;
  padding: 40px 24px 56px;
  text-align: center;
  transform: rotate(0.5deg);
}

.dia {
  --hilo: 1;
  --x-hilo: 10px;
  position: relative;
  text-align: left;
}

.dia::before,
.dia-hilo {
  content: '';
  position: absolute;
  left: var(--x-hilo);
  top: 14px;
  bottom: 14px;
  width: 1px;
}

.dia::before {
  background: var(--linea);
}

/* El hilo del día se traza a medida que el invitado baja */
.dia-hilo {
  background: var(--tinta-suave);
  transform-origin: 50% 0;
  transform: scaleY(var(--hilo));
}

.dia-lista {
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dia-momento {
  display: grid;
  grid-template-columns: 21px 1fr;
  grid-template-areas:
    'punto hora'
    '. texto';
  column-gap: 16px;
  align-items: center;
}

.dia-momento p {
  margin: 0;
}

.dia-hora {
  grid-area: hora;
  font-family: var(--f-cifras);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--tinta);
}

.dia-hora.por-confirmar {
  font-size: 1.02rem;
}

.dia-punto {
  grid-area: punto;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--tinta-suave);
  border-radius: 50%;
  background: var(--algodon);
  transition: background-color 0.4s ease-out, border-color 0.4s ease-out;
}

.alcanzado .dia-punto {
  border-color: var(--tinta);
  background: var(--tinta);
}

.dia-texto {
  grid-area: texto;
  margin-top: 0.15rem;
}

.dia-titulo {
  margin: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
}

.dia-detalle {
  margin-top: 0.2rem !important;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* ---------- Nuestra historia ---------- */

.tarjeta-historia {
  width: 100%;
  padding: 44px 26px 60px;
  transform: rotate(-0.4deg);
}

/* Una carta: párrafos en texto, alineados a la izquierda, y la firma a mano */
.historia-texto {
  display: grid;
  gap: 1rem;
  max-width: 36ch;
  margin: 0 auto;
}

.historia-texto p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.historia-firma {
  max-width: 36ch;
  margin: 1.1rem auto 0;
  padding-right: 0.2em;
  text-align: right;
  font-family: var(--f-mano);
  font-size: calc(2.3rem * var(--escala-mano));
  line-height: 1.1;
  color: var(--tinta);
}

.historia-firma i {
  font-style: normal;
  color: var(--tinta-suave);
}

/* ---------- Fotos ---------- */

/*
 * Las fotos que sobran después de repartir una por pliego (hasta tres):
 * copias sueltas sobre la mesa, desfasadas. Con una, centrada.
 */
.fotos-mesa {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 18px;
  align-items: start;
}

.fotos-mesa .foto:nth-child(odd) { transform: rotate(-1.6deg); }
.fotos-mesa .foto:nth-child(even) { margin-top: 48px; transform: rotate(1.3deg); }
.fotos-mesa .foto:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: min(78%, 420px); margin-top: -8px; transform: rotate(0.8deg); }
.fotos-mesa[data-cuantas='1'] .foto { grid-column: 1 / -1; justify-self: center; width: min(88%, 480px); }
.fotos-mesa[data-cuantas='1'] .foto[data-forma='horizontal'] { width: min(100%, 640px); }

.fotos-mesa .esquina {
  width: 24px;
  height: 24px;
}

.foto {
  position: relative;
  margin: 0;
  padding: 10px;
  background: var(--algodon);
  box-shadow: var(--sombra-tarjeta);
}

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

.foto[data-forma='vertical'] .foto-marco {
  aspect-ratio: 4 / 5;
}

.foto[data-forma='horizontal'] .foto-marco {
  aspect-ratio: 3 / 2;
}

.foto-marco {
  position: relative;
  overflow: hidden;
  background: var(--algodon-hondo);
}

.foto-boton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.foto-boton:focus-visible {
  outline-offset: 4px;
}

.esquina {
  position: absolute;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--verde-medio), var(--verde-forro));
  clip-path: polygon(0 0, 100% 0, 0 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.esquina:nth-of-type(1) { top: 2px; left: 2px; }
.esquina:nth-of-type(2) { top: 2px; right: 2px; transform: rotate(90deg); }
.esquina:nth-of-type(3) { bottom: 2px; right: 2px; transform: rotate(180deg); }
.esquina:nth-of-type(4) { bottom: 2px; left: 2px; transform: rotate(270deg); }

.titulo-grabado {
  margin: 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  letter-spacing: 0.1em;
  line-height: 1.15;
}

/* ---------- Forro y papel vegetal: vestimenta y regalos ---------- */

/* Las hojas van una debajo de otra, con aire entre ellas; nunca montadas */
.forro {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  gap: 32px;
  margin-top: var(--entre-pliegos);
  padding: clamp(64px, 9vh, 96px) 16px clamp(72px, 10vh, 104px);
  color: var(--tinta);
  background: var(--forro-img) 0 0 / 200px;
  box-shadow:
    inset 0 18px 30px -18px color-mix(in srgb, var(--sombra) 55%, transparent),
    inset 0 -18px 30px -18px color-mix(in srgb, var(--sombra) 55%, transparent);
}

.vegetal {
  position: relative;
  width: min(100%, 920px);
  margin: 0;
  padding: 44px 28px;
  display: grid;
  gap: 34px;
  text-align: center;
  background: color-mix(in srgb, var(--algodon) 87%, transparent);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--sombra) 55%, transparent);
  transform: rotate(-0.5deg);
}

.vegetal-bloque[hidden] {
  display: none;
}

.vegetal .titulo-grabado {
  font-size: 1.35rem;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
}

.vegetal .por-confirmar {
  color: var(--tinta-suave) !important;
}

.vegetal p {
  margin: 0.8rem auto 0;
  max-width: 34ch;
  font-size: 1.1rem;
  line-height: 1.5;
}

.vegetal .enlace-accion {
  margin-top: 0.4rem;
}

/* Fotos de referencia: copias pequeñas con esquineros y un nombre a mano */
.vestimenta-fotos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 16px;
  margin: 1.8rem auto 0;
  padding: 0;
  list-style: none;
}

.vestimenta-fotos[hidden] {
  display: none;
}

.vestimenta-fotos > li {
  width: min(44%, 210px);
  transform: rotate(-1.4deg);
}

.vestimenta-fotos > li:nth-child(even) {
  margin-top: 14px;
  transform: rotate(1.6deg);
}

.vestimenta-fotos > li:has(.foto[data-forma='horizontal']) {
  width: min(92%, 300px);
}

.vestimenta-fotos .foto {
  padding: 8px 8px 0;
}

.vestimenta-fotos .esquina {
  width: 24px;
  height: 24px;
}

.vestimenta-fotos figcaption {
  min-height: 12px;
  padding: 7px 4px 9px;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  color: var(--tinta-suave);
}

/* ---------- Visor: una foto en grande ---------- */

.visor {
  width: fit-content;
  min-width: min(100vw - 24px, 320px);
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  margin: auto;
  padding: 12px 12px 0;
  border: 0;
  border-radius: 3px;
  background: var(--algodon);
  box-shadow: var(--sombra-tarjeta);
  color: var(--tinta);
  overflow: visible;
}

.visor::backdrop {
  background: color-mix(in srgb, var(--verde-hondo) 82%, transparent);
}

.visor[open] {
  animation: visor-entra 0.35s var(--sal-papel);
}

@keyframes visor-entra {
  from { opacity: 0; transform: translateY(18px) rotate(1deg); }
}

.visor-foto img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100svh - 110px);
  margin: 0 auto;
}

.visor-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
}

.visor-pie p {
  margin: 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tinta-suave);
}

.visor-cerrar {
  margin-left: auto;
}

.vegetal-otros {
  width: min(100%, 640px);
  transform: rotate(0.6deg);
}

.vegetal p[hidden] {
  display: none;
}

/* La cuenta para regalos en dinero: una ficha punteada dentro del vegetal */
.regalo-cuenta {
  max-width: 340px;
  margin: 1.1rem auto 0;
  padding: 16px 18px 4px;
  border: 1px dashed color-mix(in srgb, var(--tinta) 32%, transparent);
  border-radius: 3px;
}

.regalo-cuenta[hidden],
.regalo-listas[hidden] {
  display: none;
}

.cuenta {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.cuenta dt {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: var(--tinta-suave);
}

.cuenta dd {
  margin: 0.1rem 0 0;
  font-size: 1.08rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cuenta dd.cuenta-numero {
  font-family: var(--f-cifras);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums tabular-nums;
}

.regalo-listas {
  display: grid;
  justify-items: center;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Preguntas frecuentes ----------
   Una sección entera, de lado a lado y sin tarjeta (como el itinerario): una
   banda de papel con el título y las preguntas directo encima; en pantalla
   ancha, las preguntas van en dos columnas. */

.pliego.pliego-preguntas {
  --tinta-sobre: var(--tinta);
  width: 100%;
  margin-inline: 0;
  padding: clamp(64px, 10vh, 112px) 16px clamp(72px, 11vh, 120px);
  color: var(--tinta);
  background: var(--algodon);
  border-block: 1px solid var(--linea);
}

.pliego-preguntas .pliego-texto {
  width: min(100%, 1080px);
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.preguntas-lista {
  width: min(100%, 720px);
  text-align: left;
  border-top: 1px solid var(--linea);
}

@media (min-width: 880px) {
  .pliego-preguntas .preguntas-lista {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(40px, 5vw, 72px);
    border-top: 0;
  }

  /* Cada columna empieza con su filete */
  .pliego-preguntas .pregunta:nth-child(-n + 2) {
    border-top: 1px solid var(--linea);
  }

  /* Una sola pregunta (o el aviso de vacío): a lo ancho de las dos columnas */
  .pliego-preguntas .preguntas-lista > :only-child {
    grid-column: 1 / -1;
  }
}

.pregunta {
  border-bottom: 1px solid var(--linea);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 1.12rem;
  line-height: 1.35;
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

.pregunta summary:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* Un más trazado a pluma que se vuelve menos al abrir */
.pregunta-signo {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.pregunta-signo::before,
.pregunta-signo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--tinta-suave);
  transition: transform 0.3s var(--sal-suave);
}

.pregunta-signo::after {
  transform: rotate(90deg);
}

.pregunta[open] .pregunta-signo::after {
  transform: rotate(0deg);
}

.pregunta-respuesta {
  display: grid;
  gap: 0.6rem;
  padding: 0 32px 20px 2px;
}

.pregunta-respuesta p {
  margin: 0;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ---------- Remite ---------- */

/* La solapa del remite nunca toca la última pieza: lleva el mismo aire que un pliego */
.remite {
  position: relative;
  margin-top: var(--entre-pliegos);
  padding: 150px 16px 64px;
  text-align: center;
  overflow: hidden;
}

.remite-solapa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 128px;
  background: var(--fibra), var(--cartulina);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.remite-sello {
  position: absolute;
  left: 50%;
  top: 128px;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 0.2em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--algodon) 55%, var(--algodon-hondo));
  box-shadow: inset 0 0 0 4px var(--algodon), inset 0 0 0 5px var(--linea), 0 4px 10px rgba(0, 0, 0, 0.35);
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--tinta);
}

.remite-con {
  margin: 48px 0 0;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--salvia);
}

.remite-firma {
  margin: 0.1rem 0 0;
  font-family: var(--f-mano);
  font-size: calc(clamp(3rem, 13vw, 4.4rem) * var(--escala-mano));
  line-height: 1.1;
  color: var(--tinta-sobre);
}

.remite .enlace-accion {
  margin-top: 1.4rem;
  color: var(--salvia-clara);
}

/* ---------- Ramo: animación de florecer ---------- */

.ramo .anima {
  transform-box: view-box;
  transform-origin: 0 0;
}

.ramo-vaiven {
  transform-box: view-box;
  transform-origin: 300px 468px;
}

.ramo.florece .ramo-vaiven {
  animation: vaiven 7s 3.4s ease-in-out infinite;
}

@keyframes vaiven {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.1deg); }
}

.ramo.por-florecer .tallo,
.ramo.florece .tallo {
  stroke-dasharray: var(--l) var(--l);
}

.ramo.por-florecer .tallo { stroke-dashoffset: var(--l); }
.ramo.por-florecer .anima { transform: scale(0); }
.ramo.por-florecer .corte,
.ramo.por-florecer .ramo-sombra { opacity: 0; }

.ramo.florece .tallo {
  animation: crecer 1.1s var(--d, 0ms) var(--sal-suave) both;
}

.ramo.florece .tallo-bajo {
  animation-duration: 0.8s;
}

@keyframes crecer {
  from { stroke-dashoffset: var(--l); }
  to { stroke-dashoffset: 0; }
}

.ramo.florece .corte {
  animation: aparecer 0.4s var(--d, 0ms) both;
}

.ramo.florece .ramo-sombra {
  animation: aparecer 1.6s 0.4s ease-out both;
}

@keyframes aparecer {
  from { opacity: 0; }
}

.ramo.florece .hoja .anima {
  animation: desplegar-hoja 1.2s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes desplegar-hoja {
  from { transform: scale(0.1) rotate(-22deg); }
}

.ramo.florece .capullo .anima {
  animation: desplegar-hoja 1.1s var(--d, 0ms) var(--sal-papel) both;
}

.ramo.florece .rosa > .flor-abre {
  animation: abrir-rosa 1.5s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes abrir-rosa {
  from { transform: scale(0.28) rotate(-70deg); opacity: 0; }
  30% { opacity: 1; }
}

.ramo.florece .rosa .petalo-ext .anima {
  animation: petalo 1.3s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes petalo {
  from { transform: scale(0.35, 0.2); }
}

.ramo.florece .lirio > .flor-abre {
  animation: abrir-lirio 1.4s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes abrir-lirio {
  from { transform: scale(0.5) rotate(40deg); opacity: 0; }
  25% { opacity: 1; }
}

.ramo.florece .tepalo .anima {
  animation: tepalo 1.3s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes tepalo {
  from { transform: scale(0.16, 0.5); }
}

.ramo.florece .estambres {
  animation: estambres 0.9s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes estambres {
  from { transform: scale(0); opacity: 0; }
}

.ramo.florece .cinta .anima {
  animation: cinta 1s var(--d, 0ms) var(--sal-papel) both;
}

@keyframes cinta {
  from { transform: scale(0.4) translateY(30px); opacity: 0; }
}

/* ---------- Tabletas ---------- */

@media (min-width: 640px) {
  .portada {
    --alto-foto: min(27svh, 340px);
  }

  .tarjeta-invitacion {
    padding-left: 48px;
    padding-right: 48px;
  }

  .tarjeta-respuesta {
    padding: 38px 38px 52px;
  }

  /* Las tres tarjetitas se reparten en la columna como piezas sueltas */
  .capitulos {
    justify-items: stretch;
  }

  .capitulo {
    width: min(100%, 420px);
  }

  .capitulo:nth-child(2) { justify-self: end; }
  .capitulo:nth-child(3) { margin-left: 6%; }

  .tarjeta-llegar {
    padding: 52px 48px 58px;
  }

  .tarjeta-programa {
    padding: 52px 48px 60px;
  }

  .tarjeta-alojamiento,
  .tarjeta-historia {
    padding: 52px 48px 62px;
  }

  .apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app {
    padding: 0 12px;
  }

  .dia {
    --x-hilo: calc(8.5rem + 18px + 10px);
  }

  .dia-momento {
    grid-template-columns: 8.5rem 21px 1fr;
    grid-template-areas: 'hora punto texto';
    column-gap: 18px;
    align-items: start;
  }

  .dia-hora {
    justify-self: end;
    text-align: right;
  }

  .dia-hora,
  .dia-punto {
    margin-top: 0.15rem;
  }

  .dia-punto {
    margin-top: 0.45rem;
  }

  .dia-texto {
    margin-top: 0;
  }

  /* Tres fotos sueltas van en fila, la del medio más abajo */
  .fotos-mesa {
    gap: 32px 26px;
  }

  .fotos-mesa[data-cuantas='3'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fotos-mesa[data-cuantas='3'] .foto:nth-child(3) {
    grid-column: auto;
    width: auto;
    margin-top: 16px;
  }

  .fotos-mesa[data-cuantas='2'] {
    max-width: 860px;
  }

  .fotos-mesa .esquina {
    width: 30px;
    height: 30px;
  }

  .vegetal {
    padding: 56px 44px;
  }

  .vegetal-otros {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .vegetal-bloque + .vegetal-bloque {
    border-left: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
    padding-left: 24px;
  }
}

@media (min-width: 960px) {
  .sitio {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 44px;
  }

  .sitio + .sitio .sitio-mapa {
    order: 1;
  }

  .sitio-solo {
    grid-template-columns: none;
    justify-items: center;
  }

  .sitio-solo .apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .apps {
    grid-template-columns: none;
  }

  .app {
    padding: 0 16px;
  }

  .fotos-mesa {
    gap: 32px 40px;
  }

  .fotos-mesa .foto:nth-child(even) {
    margin-top: 72px;
  }

  /* Sin foto al lado, las tres tarjetitas del día, la hora y el lugar van en fila */
  .pliego-detalles:not(.con-foto) .capitulos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
  }

  .pliego-detalles:not(.con-foto) .capitulo {
    width: 100%;
    margin-left: 0;
    padding: 30px 28px 32px;
  }

  .pliego-detalles:not(.con-foto) .capitulo:nth-child(2) { margin-top: 56px; }
  .pliego-detalles:not(.con-foto) .capitulo:nth-child(3) { margin-top: 18px; }

  /* Pliegos: la foto a un lado, alternando; el texto en su columna */
  .pliego.con-foto {
    width: min(100% - 64px, 1120px);
    grid-template-columns: minmax(0, 620px) minmax(0, 440px);
    justify-content: space-between;
    align-items: center;
    column-gap: clamp(48px, 6vw, 112px);
  }

  .pliego.con-foto[data-lado='izquierda'] {
    grid-template-columns: minmax(0, 440px) minmax(0, 620px);
  }

  .pliego.con-foto[data-lado='izquierda'] .pliego-foto {
    order: -1;
  }

  .pliego.con-foto .pliego-foto,
  .pliego.con-foto[data-lado] .pliego-foto {
    justify-self: stretch;
    width: 100%;
    margin: 0;
  }

  .pliego.con-foto .pliego-foto .foto {
    transform: rotate(1.8deg);
  }

  .pliego.con-foto[data-lado='izquierda'] .pliego-foto .foto {
    transform: rotate(-1.6deg);
  }

  .pliego-detalles:not(.con-foto) {
    width: min(100% - 64px, 1040px);
  }
}

/* ---------- Pantalla ancha: tarjeta apaisada con la foto y el ramo a un lado ---------- */

@media (min-width: 960px) and (min-aspect-ratio: 5 / 4) {
  .portada {
    --alto-foto: min(60svh, 33vw, 620px);
    --ancho-ramo: calc(var(--alto-foto) * 0.8);
    --asiento: 0.17;
  }

  .tarjeta-invitacion {
    grid-template-columns: 44% 1fr;
    padding: 56px clamp(40px, 5vw, 96px) calc(72px + env(safe-area-inset-bottom)) 0;
  }

  .tarjeta-invitacion::before {
    inset: 22px;
    outline-offset: -7px;
  }

  .tarjeta-invitacion .tarjeta-marca {
    right: 40px;
    bottom: 36px;
  }

  .tarjeta-cuerpo {
    grid-column: 2;
    grid-row: 1;
  }

  .retrato {
    --giro-ramo: 42deg;
    --ramo-x: 6%;
    --ramo-y: 86%;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    translate: calc(var(--alto-foto) * 0.2) calc(var(--alto-foto) * -0.04);
  }

  .retrato-marco {
    outline-offset: 7px;
  }

  .ramo-lugar {
    transform:
      translate(-50%, -40%)
      translate3d(calc(var(--p) * -2vw), calc(var(--p) * -4svh), 0)
      rotate(calc(var(--giro-ramo) + var(--p) * -4deg));
  }

  .nombre {
    font-size: calc(clamp(3.4rem, min(6.6vw, 11svh), 6rem) * var(--escala-nombres));
  }

  .apellido {
    margin-top: 0.7rem;
    font-size: 1.12rem;
  }

  .y {
    margin: 0.6rem 0 0.4rem;
    font-size: calc(clamp(3rem, 7svh, 4.2rem) * var(--escala-mano));
  }

  .invitacion-texto {
    font-size: 1.32rem;
  }

  .invitacion-fecha {
    font-size: 1.3rem;
  }

  .invitacion-ciudad,
  .para-de {
    font-size: 1.1rem;
  }

  .para-nombre {
    font-size: calc(clamp(2.4rem, 5.4svh, 3.1rem) * var(--escala-mano));
  }

  .para-cupos {
    font-size: 0.86rem;
  }

  .capitulo-titulo {
    font-size: 1.7rem;
  }

  .capitulo-hora {
    font-size: 2.8rem;
  }

  /* La tarjeta donde se responde queda derecha: el texto girado se suaviza */
  .tarjeta-respuesta {
    padding: 40px 40px 54px;
    transform: none;
  }

  .respuesta-titulo {
    font-size: 1.7rem;
  }

  .opcion {
    min-height: 68px;
  }
}

/* ---------- Fondo propio (Diseño → Tema → Fondo) ---------- */

/* Un color o un degradado en lugar del suelo del tema, con su grano */
html[data-fondo='claro'],
html[data-fondo='oscuro'] {
  background: var(--fondo-color);
}

html[data-fondo='claro'] body,
html[data-fondo='oscuro'] body {
  background: var(--fibra), var(--grano-suelo), var(--fondo-pagina);
}

/* Una foto quieta detrás de todo, con un velo del color del suelo */
html[data-fondo='imagen'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--fondo-imagen);
  pointer-events: none;
}

/* ---------- Bloques libres (Diseño → Agregar bloque) ---------- */

.bloques {
  display: flow-root;
}

.libre-texto {
  display: grid;
  gap: 1rem;
  max-width: 40ch;
  margin: 0 auto;
}

.libre-texto p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.tarjeta-libre {
  width: 100%;
  padding: 44px 28px;
  transform: rotate(0.4deg);
}

/* Sobre el fondo, el texto va en la tinta del suelo */
.libre-suelto {
  color: var(--tinta-sobre);
}

.pliego-libre[data-alinear='centro'],
.pliego-libre[data-alinear='centro'] .pliego-titulo::after {
  text-align: center;
  margin-inline: auto;
}

.pliego-libre[data-alinear='izquierda'] .libre-texto {
  margin-inline: 0;
}

/* Fuera de una tarjeta, el aviso de un bloque vacío se lee sobre el suelo */
.pliego-libre .seccion-pendiente,
.vegetal-bloque > p > .seccion-pendiente {
  display: grid;
  gap: 4px;
  max-width: 40ch;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px dashed currentColor;
  font-family: var(--f-ui);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tinta-sobre);
  background: color-mix(in srgb, var(--verde) 70%, transparent);
}

.pliego-libre .tarjeta .seccion-pendiente {
  color: var(--tinta-suave);
  background: none;
}

.vegetal-bloque > p > .seccion-pendiente {
  color: var(--tinta-suave);
  background: none;
}

/* Una foto suelta: mediana y un poco girada, o a todo el ancho */
.pliego-foto-libre .libre-foto {
  width: min(88%, 460px);
  justify-self: center;
}

.pliego-foto-libre .libre-foto[data-forma='horizontal'] {
  width: min(100%, 620px);
}

.pliego-foto-libre .foto {
  transform: rotate(-1.2deg);
}

.pliego-foto-libre[data-tamano='grande'] {
  width: min(100% - 32px, 1040px);
}

.pliego-foto-libre[data-tamano='grande'] .libre-foto {
  width: 100%;
}

.pliego-foto-libre[data-tamano='grande'] .foto {
  transform: none;
}

.pliego-foto-libre figcaption,
.galeria figcaption {
  padding: 10px 4px 2px;
  font-family: var(--f-mano);
  font-size: calc(1.6rem * var(--escala-mano));
  line-height: 1.1;
  text-align: center;
  color: var(--tinta);
}

/* Una galería: copias sobre la mesa, en dos columnas (tres en pantalla ancha) */
.pliego-galeria {
  width: min(100% - 32px, 1040px);
}

.galeria {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
  align-items: start;
}

.galeria li:nth-child(3n + 1) .foto { transform: rotate(-1.4deg); }
.galeria li:nth-child(3n + 2) .foto { transform: rotate(1.1deg); }
.galeria li:nth-child(3n) .foto { transform: rotate(-0.6deg); }
.galeria[data-cuantas='1'] { grid-template-columns: minmax(0, 480px); justify-content: center; }

.galeria .foto {
  padding: 7px;
}

.galeria .esquina {
  width: 20px;
  height: 20px;
}

/* Una cita, grande y en la tinta del suelo */
.cita {
  display: grid;
  gap: 18px;
  max-width: 34ch;
  margin: 0 auto;
  text-align: center;
  color: var(--tinta-sobre);
}

.cita-texto {
  display: grid;
  gap: 0.8rem;
}

.cita-texto p {
  margin: 0;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.4;
  text-wrap: balance;
}

.cita-texto p:first-child::before {
  content: '«';
}

.cita-texto p:last-child::after {
  content: '»';
}

.cita-autor {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--salvia);
}

.cita-autor::before {
  content: '— ';
}

/* Un botón en píldora, con filete fino */
.libre-accion {
  margin: 0;
  text-align: center;
}

.boton-pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinta-sobre);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.boton-pildora:hover {
  color: var(--verde);
  background: var(--tinta-sobre);
}

.boton-pildora .icono {
  width: 18px;
  height: 18px;
}

.pliego-boton {
  text-align: center;
}

.pliego-boton .pliego-titulo::after {
  margin-inline: auto;
}

/* Un separador: una lámina de Redouté o una línea fina con un punto */
.separador {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: var(--entre-pliegos) auto 0;
  width: min(100% - 32px, 620px);
}

.separador img {
  width: clamp(120px, 26vw, 200px);
  height: auto;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--sombra) 22%, transparent));
}

.separador-linea {
  position: relative;
  width: min(60%, 320px);
  height: 1px;
  background: color-mix(in srgb, var(--tinta-sobre) 45%, transparent);
}

.separador-linea::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinta-sobre);
  translate: -50% -50%;
}

/* La cuenta regresiva: cuatro tarjetitas con su número */
.pliego-cuenta {
  text-align: center;
}

.pliego-cuenta .pliego-titulo::after {
  margin-inline: auto;
}

.cuenta-regresiva {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

.cuenta-unidad {
  display: grid;
  gap: 4px;
  padding: 16px 4px 14px;
  color: var(--tinta);
  background: var(--papel-claro), var(--algodon);
  border-radius: 3px;
  box-shadow: var(--sombra-tarjeta);
}

.cuenta-unidad:nth-child(odd) { transform: rotate(-1deg); }
.cuenta-unidad:nth-child(even) { transform: rotate(0.8deg); }

.cuenta-cifra {
  font-family: var(--f-cifras);
  font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.cuenta-nombre {
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--tinta-tenue);
}

.cuenta-nota {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--f-mano);
  font-size: calc(2.6rem * var(--escala-mano));
  color: var(--tinta-sobre);
}

.cuenta-nota.por-confirmar {
  font-family: var(--f-texto);
  font-size: 1.2rem;
  font-style: italic;
}

/* Un video de YouTube o Vimeo, en un marco de papel */
.pliego-video {
  width: min(100% - 32px, 860px);
}

.video {
  margin: 0;
  padding: 10px;
  background: var(--algodon);
  box-shadow: var(--sombra-tarjeta);
}

.video-marco {
  aspect-ratio: 16 / 9;
  background: var(--algodon-hondo);
}

.video-marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video figcaption {
  padding: 10px 4px 2px;
  font-family: var(--f-ui);
  font-size: 0.92rem;
  text-align: center;
  color: var(--tinta-suave);
}

@media (min-width: 960px) {
  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 28px;
  }

  .galeria[data-cuantas='2'],
  .galeria[data-cuantas='4'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin-inline: auto;
  }

  .cuenta-regresiva {
    gap: 16px;
  }
}

/* ---------- La vista previa del editor (panel → Diseño) ---------- */

/* Cada bloque se puede tocar para editarlo: al pasar se enmarca, el elegido queda enmarcado */
html.editando [data-bloque] {
  cursor: pointer;
  outline: 2px dashed transparent;
  outline-offset: 10px;
  transition: outline-color 0.15s;
}

html.editando [data-bloque]:hover {
  outline-color: color-mix(in srgb, var(--polen) 70%, transparent);
}

html.editando [data-bloque].bloque-elegido {
  outline: 3px solid var(--polen);
}

html.editando .portada[data-bloque] {
  outline-offset: -14px;
}

/* ---------- Letra Editorial (Gloock y Hanken Grotesk) ---------- */

/* Gloock va en caja mixta; las etiquetas chicas pasan a la sans */
[data-letra='editorial'] :is(.nombre, .pliego-titulo, .titulo-grabado, .respuesta-titulo, .dia-titulo, .capitulo-titulo, .mesa-palabra) {
  text-transform: none;
  letter-spacing: -0.01em;
}

[data-letra='editorial'] .nombre {
  line-height: 0.95;
}

[data-letra='editorial'] :is(.apellido, .para-cupos, .tarjeta-marca, .invitacion-fecha) {
  font-family: var(--f-ui);
  font-weight: 500;
  letter-spacing: 0.2em;
}

[data-letra='editorial'] .tarjeta-marca {
  font-size: 0.72rem;
}

[data-letra='editorial'] .invitacion-fecha {
  font-size: 0.92rem;
  letter-spacing: 0.16em;
}

[data-letra='editorial'] :is(.invitacion-texto, .para-de, .invitacion-ciudad) {
  font-style: normal;
  font-weight: 300;
}

/* ---------- Tema Editorial (Diseño → Tema) ---------- */

/*
 * Una página de revista: titulares enormes en caja mixta, el texto directo
 * sobre la página, fotos rectas sin marco y láminas de Redouté que se asoman
 * por los bordes. El único papel es la tarjeta: la de la portada, la de
 * respuesta y la de mesa. Sirve con cualquier paleta: los titulares van en
 * --tinta-sobre y el texto en --tinta-texto (o en la misma, si la paleta no
 * trae una propia).
 */
html[data-tema='editorial'] {
  --entre-pliegos: clamp(140px, 16vh, 200px);
  --margen: clamp(20px, 5.5vw, 80px);
  --tinta-pagina: var(--tinta-texto, var(--tinta-sobre));
}

.lamina {
  display: none;
}

html[data-tema='editorial'] .pliego {
  width: min(100%, 1360px);
  padding-inline: var(--margen);
}

/* Las preguntas, impresas en la página como lo demás: sin banda de papel */
html[data-tema='editorial'] .pliego.pliego-preguntas {
  margin-inline: auto;
  padding-block: 0;
  background: none;
  border-block: 0;
  --tinta: var(--tinta-sobre);
  --tinta-suave: var(--tinta-pagina);
  --linea: color-mix(in srgb, var(--tinta-sobre) 24%, transparent);
}

html[data-tema='editorial'] .pliego-preguntas .pliego-texto {
  justify-items: start;
  text-align: left;
}

html[data-tema='editorial'] .pliego-detalles:not(.con-foto) {
  width: min(100%, 1360px);
}

html[data-tema='editorial'] .pliego-texto,
html[data-tema='editorial'] .pliego > .pliego-titulo,
html[data-tema='editorial'] .pliego > :is(.galeria, .cita, .cuenta-regresiva, .video, .libre-foto, .fotos-mesa) {
  position: relative;
  z-index: 1;
}

/* El titular: enorme, apretado, en la tinta del suelo */
html[data-tema='editorial'] .pliego-titulo {
  font-size: calc(clamp(3rem, 1.25rem + 6vw, 6.6rem) * var(--escala-nombres));
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: none;
}

html[data-tema='editorial'] .pliego-titulo::after {
  display: none;
}

/* Las piezas de papel se imprimen en la página: sin papel, sin giro, sin marca */
html[data-tema='editorial'] :is(.capitulo, .tarjeta-llegar, .tarjeta-alojamiento, .tarjeta-programa, .tarjeta-historia, .tarjeta-libre),
html[data-tema='editorial'] .vegetal {
  --tinta: var(--tinta-sobre);
  --tinta-suave: var(--tinta-pagina);
  --tinta-tenue: var(--tinta-pagina);
  --linea: color-mix(in srgb, var(--tinta-sobre) 24%, transparent);
  width: 100%;
  padding: 0;
  text-align: left;
  color: var(--tinta-pagina);
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-tema='editorial'] :is(.capitulo, .tarjeta-llegar, .tarjeta-alojamiento, .tarjeta-programa, .tarjeta-historia, .tarjeta-libre)::before {
  display: none;
}

html[data-tema='editorial'] :is(.tarjeta-llegar, .tarjeta-alojamiento, .tarjeta-programa, .tarjeta-historia) > .tarjeta-marca {
  display: none;
}

html[data-tema='editorial'] :is(.capitulo, .tarjeta-llegar, .tarjeta-alojamiento, .tarjeta-programa, .tarjeta-historia, .tarjeta-libre, .vegetal) .enlace-accion {
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .tarjeta .seccion-pendiente {
  margin-inline: 0;
  text-align: left;
}

/* Los detalles: la etiqueta en la sans, el dato en el titular */
html[data-tema='editorial'] .capitulos {
  justify-items: stretch;
  gap: 26px;
  max-width: none;
}

html[data-tema='editorial'] .pliego-detalles .capitulo:nth-child(n) {
  display: grid;
  gap: 8px;
  align-content: start;
  margin: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--linea);
}

html[data-tema='editorial'] .capitulo-titulo {
  font: 500 0.8rem/1.3 var(--f-ui);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--tinta-pagina);
}

html[data-tema='editorial'] :is(.capitulo-dato, .capitulo-hora, .capitulo-lugar) {
  margin-top: 0 !important;
  font-family: var(--f-grabada);
  text-transform: none;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .capitulo-nota {
  margin-top: 0 !important;
  font-style: normal;
}

/* Cómo llegar: el mapa recto, los botones en filete */
html[data-tema='editorial'] .sitio-mapa .esquina,
html[data-tema='editorial'] .bloques .esquina {
  display: none;
}

html[data-tema='editorial'] .sitio + .sitio {
  border-top-color: var(--linea);
}

html[data-tema='editorial'] .app {
  border-color: color-mix(in srgb, var(--tinta-sobre) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .app:hover {
  border-color: var(--tinta-sobre);
  background: color-mix(in srgb, var(--tinta-sobre) 8%, transparent);
}

/* El itinerario: la hora en la sans, el momento en el titular, el hilo en la tinta */
html[data-tema='editorial'] .dia {
  max-width: 560px;
}

html[data-tema='editorial'] .dia-punto {
  background: var(--verde);
}

html[data-tema='editorial'] .alcanzado .dia-punto {
  border-color: var(--tinta-sobre);
  background: var(--tinta-sobre);
}

html[data-tema='editorial'] .dia::before {
  background: color-mix(in srgb, var(--tinta-sobre) 22%, transparent);
}

html[data-tema='editorial'] .dia-hilo {
  background: var(--tinta-sobre);
}

html[data-tema='editorial'] .dia-hora {
  font: 500 0.88rem/1.3 var(--f-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-pagina);
}

html[data-tema='editorial'] .dia-titulo {
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.05;
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .dia-detalle {
  margin-top: 4px !important;
  font-style: normal;
}

/* La historia y los textos: párrafos de revista */
html[data-tema='editorial'] :is(.historia-texto, .libre-texto) {
  max-width: 40ch;
  margin-inline: 0;
}

html[data-tema='editorial'] :is(.historia-texto, .libre-texto) p {
  font-size: clamp(1.02rem, 0.97rem + 0.2vw, 1.14rem);
  color: var(--tinta-pagina);
}

html[data-tema='editorial'] .historia-firma {
  max-width: 40ch;
  margin-inline: 0;
  text-align: left;
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .pliego-libre[data-alinear='centro'] .libre-texto {
  margin-inline: auto;
}

/* Las fotos: rectas, sin marco, como impresas en la página */
html[data-tema='editorial'] .bloques .foto {
  padding: 0;
  background: none;
  box-shadow: none;
  /* Pliegos las gira de varias maneras; aquí ninguna va girada. */
  transform: none !important;
}

html[data-tema='editorial'] .bloques .foto-marco {
  background: var(--verde-medio);
}

html[data-tema='editorial'] :is(.pliego-foto-libre, .galeria) figcaption {
  font: 400 0.92rem/1.4 var(--f-ui);
  text-align: left;
  color: var(--tinta-pagina);
}

html[data-tema='editorial'] .galeria {
  gap: clamp(12px, 2vw, 28px);
}

html[data-tema='editorial'] .fotos-mesa .foto:nth-child(even) {
  margin-top: 0;
}

/* Vestimenta, regalos y dudas: sin forro, sobre la página */
html[data-tema='editorial'] .forro {
  width: min(100%, 1360px);
  margin-inline: auto;
  padding: 0 var(--margen);
  justify-items: stretch;
  gap: var(--entre-pliegos);
  color: var(--tinta-pagina);
  background: none;
  box-shadow: none;
}

html[data-tema='editorial'] .vegetal {
  gap: 22px;
}

html[data-tema='editorial'] .vegetal .titulo-grabado {
  font-size: calc(clamp(2.5rem, 1.3rem + 4.4vw, 5rem) * var(--escala-nombres));
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .vegetal p {
  color: var(--tinta-pagina);
}

/* Todo va alineado a la izquierda, como en una página de revista */
html[data-tema='editorial'] :is(.hotel, .alojamiento-nota, .sitio-solo .sitio-datos, .vegetal p, .vegetal-bloque) {
  justify-items: start;
  text-align: left;
  margin-inline: 0;
}

html[data-tema='editorial'] .hotel-acciones {
  justify-content: flex-start;
}

html[data-tema='editorial'] .hotel p {
  margin-inline: 0;
}

html[data-tema='editorial'] .hotel-nombre {
  font-family: var(--f-grabada);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.05;
  color: var(--tinta-sobre);
}

html[data-tema='editorial'] .sitio-momento {
  font: 500 0.8rem/1.3 var(--f-ui);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--tinta-pagina);
}

/* Cita, cuenta regresiva, botón y video */
html[data-tema='editorial'] .cita {
  max-width: 22ch;
}

html[data-tema='editorial'] .cita-texto p {
  font-family: var(--f-grabada);
  font-style: normal;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

html[data-tema='editorial'] .cita-autor {
  font: 500 0.82rem/1.3 var(--f-ui);
  letter-spacing: 0.2em;
  color: var(--tinta-pagina);
}

html[data-tema='editorial'] .cuenta-unidad {
  padding: 18px 4px 14px;
  color: var(--tinta-sobre);
  background: none;
  border-top: 1px solid color-mix(in srgb, var(--tinta-sobre) 35%, transparent);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html[data-tema='editorial'] .cuenta-cifra {
  font-family: var(--f-grabada);
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  letter-spacing: -0.02em;
}

html[data-tema='editorial'] .cuenta-nombre {
  font: 500 0.7rem/1.3 var(--f-ui);
  letter-spacing: 0.2em;
  color: var(--tinta-pagina);
}

html[data-tema='editorial'] .video {
  padding: 0;
  background: none;
  box-shadow: none;
}

html[data-tema='editorial'] .video figcaption {
  text-align: left;
  color: var(--tinta-pagina);
}

/* La respuesta sigue en su tarjeta; responder es una píldora */
html[data-tema='editorial'] .boton-responder {
  border-radius: 999px;
  font-family: var(--f-ui);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
}

/* Las láminas: sobre un suelo claro se imprimen como tinta sobre el papel
   (multiply: el blanco del recorte desaparece); sobre uno oscuro van
   opacas, con su sombra. Se asoman desde el borde, nunca encima del texto. */
html[data-tema='editorial'] .lamina {
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(130px, 30vw, 380px);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--sombra) 30%, transparent));
}

html[data-tema='editorial'][data-suelo='claro'] :is(.lamina, .separador img) {
  mix-blend-mode: multiply;
  filter: none;
}

/* En el teléfono se asoman en el aire entre las partes, desde el borde */
html[data-tema='editorial'] .lamina-arriba {
  top: clamp(-200px, -34vw, -120px);
  right: -8%;
  transform: rotate(12deg);
}

html[data-tema='editorial'] .lamina-lado {
  top: clamp(-200px, -34vw, -120px);
  left: -10%;
  transform: rotate(-10deg);
}

html[data-tema='editorial'] .separador img {
  width: clamp(140px, 30vw, 260px);
}

/* ---------- Tema Editorial en pantalla ancha: dos columnas que alternan ---------- */

@media (min-width: 960px) {
  html[data-tema='editorial'] .pliego,
  html[data-tema='editorial'] .pliego.con-foto,
  html[data-tema='editorial'] .pliego.con-foto[data-lado='izquierda'] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 40px);
    align-items: start;
    width: min(100%, 1360px);
  }

  html[data-tema='editorial'] .pliego > * {
    grid-column: 1 / -1;
  }

  html[data-tema='editorial'] .pliego > .pliego-texto {
    grid-column: 2 / 12;
  }

  html[data-tema='editorial'] .pliego.con-foto > .pliego-texto {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  html[data-tema='editorial'] .pliego.con-foto > .pliego-foto {
    grid-column: 8 / 13;
    grid-row: 1;
    order: 0;
    margin-right: calc(var(--margen) * -1);
  }

  html[data-tema='editorial'] .pliego.con-foto[data-lado='izquierda'] > .pliego-texto {
    grid-column: 7 / 13;
  }

  html[data-tema='editorial'] .pliego.con-foto[data-lado='izquierda'] > .pliego-foto {
    grid-column: 1 / 6;
    margin-right: 0;
    margin-left: calc(var(--margen) * -1);
  }

  /* Los detalles sin foto: el titular arriba y los tres datos en fila */
  html[data-tema='editorial'] .pliego-detalles:not(.con-foto) .capitulos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  html[data-tema='editorial'] .pliego-programa:not(.con-foto) .pliego-texto {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: clamp(20px, 2.4vw, 40px);
  }

  html[data-tema='editorial'] .pliego-programa:not(.con-foto) .pliego-titulo {
    grid-column: 1 / 6;
  }

  html[data-tema='editorial'] .pliego-programa:not(.con-foto) .tarjeta-programa {
    grid-column: 6 / 11;
    padding-top: 12px;
  }

  html[data-tema='editorial'] .forro .vegetal-otros {
    margin-top: 0;
  }

  /* Al mismo margen que el texto de las demás partes (una columna adentro) */
  html[data-tema='editorial'] .forro {
    padding-inline: calc(var(--margen) + (min(100vw, 1360px) - 2 * var(--margen)) / 12);
  }

  /* En pantalla ancha cuelgan en el margen, por encima de la parte */
  html[data-tema='editorial'] .lamina-arriba {
    top: -200px;
    right: -1%;
    width: clamp(170px, 15vw, 260px);
  }

  html[data-tema='editorial'] .lamina-lado {
    top: -150px;
    left: -5%;
    width: clamp(150px, 13vw, 230px);
  }
}

/* ---------- El álbum: las fotos de la pareja después de la tarjeta ---------- */

/*
 * Va justo después de la portada. Jerárquico: la primera foto grande en el
 * centro y las otras dos más chicas a los lados (en el teléfono, debajo). Cada
 * tema lo viste a su manera (el Victoriano, en assets/victoriano.css, como una
 * página de álbum con ventanas ovaladas).
 */
.album {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 1180px);
  margin: var(--entre-pliegos) auto 0;
  text-align: center;
}

.album[hidden] {
  display: none;
}

.album-encabezado {
  display: grid;
  justify-items: center;
  margin-bottom: clamp(28px, 5vh, 48px);
}

.album-frase {
  margin: 0;
  font-family: var(--f-texto);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  color: var(--salvia-clara);
}

.album-titulo {
  margin: 0.1em 0 0;
  font-family: var(--f-mano);
  font-weight: 400;
  font-size: calc(clamp(3.2rem, 2rem + 6vw, 6.4rem) * var(--escala-mano));
  line-height: 1.05;
  color: var(--tinta-sobre);
}

.album-titulo i {
  font-style: normal;
  color: var(--salvia);
}

.album-fecha {
  margin: 0.5em 0 0;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.98rem);
  letter-spacing: 0.22em;
  color: var(--salvia-clara);
}

.album-fecha[hidden] {
  display: none;
}

.album-pagina {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.album-ventana {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.album-ventana[hidden] {
  display: none;
}

.album-principal {
  grid-column: 1 / -1;
}

/* Con una sola foto de las chicas, va centrada debajo de la grande */
.album[data-cuantas='2'] .album-secundaria {
  grid-column: 1 / -1;
  justify-self: center;
  width: 60%;
}

/* La foto llena su ventana: sin el marco de algodón ni los esquineros */
.album-ventana .foto {
  height: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

/* La ventana manda: la foto deja su proporción (3:2 o 4:5) y la llena */
.album-ventana .foto[data-forma] .foto-marco {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.album-ventana .esquina {
  display: none;
}

.album-flor {
  position: absolute;
  z-index: 2;
  height: auto;
  pointer-events: none;
}

.album .seccion-pendiente {
  margin-top: 20px;
}

@media (min-width: 900px) {
  .album-pagina {
    grid-template-columns: 1fr minmax(0, 1.55fr) 1fr;
    align-items: center;
    column-gap: clamp(20px, 3vw, 44px);
  }

  .album-principal {
    grid-column: 2;
    grid-row: 1;
  }

  .album-secundaria:nth-of-type(2) {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .album-secundaria:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }

  .album[data-cuantas='2'] .album-secundaria {
    grid-column: 1;
    width: auto;
  }
}

/* ---------- El gran día: el calendario del mes ---------- */

.tarjeta-calendario {
  padding: 34px 22px 54px;
  text-align: center;
  transform: rotate(-0.6deg);
}

.calendario-mes {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-cifras);
  font-variant-numeric: lining-nums tabular-nums;
}

.calendario-mes caption {
  margin-bottom: 16px;
  font-family: var(--f-grabada);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  color: var(--tinta);
}

.calendario-mes caption .cifra {
  font-family: var(--f-cifras);
}

.calendario-mes th {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.calendario-mes td {
  position: relative;
  height: 42px;
  padding: 0;
  text-align: center;
  font-size: 1.02rem;
  color: var(--tinta-suave);
}

.calendario-mes tbody tr:first-child td {
  padding-top: 8px;
}

.calendario-el-dia {
  font-weight: 700;
}

.calendario-el-dia .cifra {
  position: relative;
  z-index: 1;
  color: var(--tinta);
}

/* El día encerrado a mano, una vuelta y un poco más */
.calendario-anillo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -46%) rotate(-10deg);
  overflow: visible;
  pointer-events: none;
}

.calendario-anillo path {
  fill: none;
  stroke: var(--polen-hondo);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.calendario-pie {
  margin: 20px 0 0;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--tinta-suave);
}

.calendario-pendiente {
  margin: 0;
}

/* ==========================================================================
   Compartido por todos los temas (2026-11-06): lo nuevo del tema Vino & Marfil
   que también aparece en los otros (vestimenta, regalos, visor, música) y lo
   que en los otros va oculto (intro, camafeo, iconos del itinerario).
   ========================================================================== */

.niebla,
.intro-textos,
.intro-nombres,
.sobre-abrir,
.dia-icono,
.calendario-corazon,
.remite-camafeo,
.remite-frase,
.remite-gracias,
.remite-pie {
  display: none;
}

/* La música: un botón redondo abajo a la derecha, con ondas que se mueven
   mientras suena. */
.musica {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--algodon) 60%, transparent);
  border-radius: 50%;
  color: var(--algodon);
  background: color-mix(in srgb, var(--polen-hondo, #4a0a12) 92%, transparent);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.musica[hidden] {
  display: none;
}

.musica-ondas {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.musica-ondas i {
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
}

.musica[data-sonando='si'] .musica-ondas i {
  height: 100%;
  animation: onda 1.1s ease-in-out infinite;
}

.musica[data-sonando='si'] .musica-ondas i:nth-child(2) { animation-delay: -0.4s; }
.musica[data-sonando='si'] .musica-ondas i:nth-child(3) { animation-delay: -0.75s; }
.musica[data-sonando='si'] .musica-ondas i:nth-child(4) { animation-delay: -0.2s; }

@keyframes onda {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* El visor pasa de una foto a otra del mismo grupo. */
.visor-paso {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--tinta);
  background: color-mix(in srgb, var(--algodon) 88%, transparent);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.visor[data-varias='si'] .visor-paso {
  display: grid;
  place-items: center;
}

.visor-antes { left: 8px; }
.visor-despues { right: 8px; }

.visor-paso svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Regalos: los datos de la cuenta detrás de «Ver datos». */
.cuenta-datos {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 14px;
}

.cuenta-datos[hidden] {
  display: none;
}

.silueta {
  width: 58px;
  height: 145px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cuánto se mueve la invitación (Diseño → Tema → Animaciones). «Suaves»
   deja una sola vuelta de lo que se repite sin fin; «Ninguna», como con
   «reducir movimiento», todo quieto y legible. */
html[data-animacion='suaves'] *,
html[data-animacion='suaves'] *::before,
html[data-animacion='suaves'] *::after {
  animation-iteration-count: 1 !important;
}

html[data-animacion='suaves'] .destellos {
  opacity: 0.55;
}

html[data-animacion='ninguna'] *,
html[data-animacion='ninguna'] *::before,
html[data-animacion='ninguna'] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay: 0s !important;
}

html[data-animacion='ninguna'] .destellos,
html[data-animacion='ninguna'] .mariposa {
  display: none;
}