@font-face {
  font-family:'Cinema Sunday';
  src:url("../fonts/cinema sunday.ttf") format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Paleta e identidad tipográfica compartidas por todo el sitio (sobre +
   web de información): --primary es el #911723 exacto al que se imprime
   la ilustración de la pareja en los marcasitios físicos, así que la web
   queda calibrada con el material impreso en vez de a ojo. El resto de la
   paleta se deriva de ese mismo rojo (más oscuro para titulares, más claro
   para acentos suaves). El mostaza sigue viniendo del propio sello postal,
   sin tocar. El rosa (--blush) sí se ha retocado: con el ciruela anterior
   quedaba lejos del rojo del sobre y diferenciaba con claridad "Ceremonia"
   de "Parking" en las fichas de ubicación y el mapa; con este rojo tan
   saturado como --primary, el tono viejo casi se le superponía (el mismo
   choque de "dos rojos oscuros casi iguales" que ya evitaba el código del
   mapa). Se ha girado hacia un coral más cálido, a igual distancia de
   --primary que del mostaza, para que las tres categorías se sigan
   distinguiendo de un vistazo. */
:root {
  --primary:#911723;
  --primary-dark:#5a0e16;
  --primary-light:#bf787f;
  --paper:#fbf5ec;
  --canvas:#f3ead9;
  --ink:#241c18;
  --muted:#83766b;
  --accent:#d9a441;
  --blush:#d4aba1;
  --font-display:'Cinema Sunday','Cormorant Garamond',serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.72,.19,1);
  /* Textura de papel del sobre: fibra fina (líneas diagonales) + un
     barrido de luz superior — dos capas de gradiente, sin ninguna imagen,
     que se combinan encima del color base de cada cara del sobre. */
  --paper-grain:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px),
    radial-gradient(140% 100% at 14% -12%, rgba(255,255,255,.24), transparent 55%);
  color-scheme:light only;
}


* { box-sizing:border-box; }
html { background:var(--canvas); }
body {
  min-width:320px;
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',serif;
  line-height:1.6;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.92) 0, transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(145,23,35,.08) 0, transparent 28%),
    linear-gradient(135deg, #ede8de 0%, #e5ddd0 100%);
  pointer-events:none;
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg, rgba(255,255,255,.22), transparent 45%, rgba(145,23,35,.05));
  pointer-events:none;
}
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
a { color:inherit; }

.experience {
  position:relative;
  isolation:isolate;
  display:grid;
  min-height:100svh;
  place-items:center;
  overflow:hidden;
  padding:1.5rem;
  background:transparent;
}
.experience::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,250,244,.38));
  pointer-events:none;
}
.sr-only,.status-message { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.action-hint {
  margin:0;
  color:rgba(90,14,22,.75);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
/* El texto de ayuda espera a que el sobre haya aterrizado del todo y
   entra con calma, en vez de sumarse al vuelo. */
@keyframes hint-arrive {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.envelope-hint {
  animation:hint-arrive .55s var(--ease) 1s backwards;
}
.action-hint::after {
  content:'';
  display:block;
  width:24px;
  height:1px;
  margin:.65rem auto 0;
  background:currentColor;
  animation:breathe 2.2s ease-in-out infinite;
}

/* Sobre postal — la pista (stage) ya no fuerza la altura del sobre: así el
   "toca para abrir/continuar" vive debajo, en flujo normal, fuera del
   propio sobre y sobre el fondo neutro de la página, en vez de superpuesto
   encima de su superficie (donde su legibilidad dependía del color que se
   le pusiera al sobre). */
.envelope-stage {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
  width:min(92vw,560px);
  perspective:1600px;
  transition:opacity .35s ease;
}
.envelope-stage[hidden] { display:none; }
/* Llegada mágica al cargar la página: el sobre entra desde "el fondo"
   (pequeño, desenfocado, girado y desplazado, como si viniera de lejos) y
   se posa en su sitio con un ligero rebote. Sin animation-fill-mode
   forwards/both a propósito: en cuanto termina, el elemento vuelve a la
   declaración estática de abajo (transform:rotateY(0deg)), que es
   idéntica al último fotograma — así la transition del flip (más abajo)
   recupera el control sin que la animación de entrada se quede "por
   encima" bloqueándola en el cascade. */
@keyframes envelope-arrive {
  0% {
    opacity:0;
    filter:blur(9px);
    transform:rotateY(0deg) translate(-7%,-24%) scale(.45) rotate(-16deg);
  }
  30% {
    opacity:1;
    filter:blur(0);
  }
  72% {
    transform:rotateY(0deg) translate(.5%,1.5%) scale(1.035) rotate(2deg);
  }
  100% {
    opacity:1;
    filter:blur(0);
    transform:rotateY(0deg) translate(0,0) scale(1) rotate(0deg);
  }
}
.envelope {
  position:relative;
  width:100%;
  aspect-ratio:1.47;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition:transform 900ms var(--ease);
  animation:envelope-arrive 1.15s cubic-bezier(.22,.61,.36,1);
}
.envelope:focus-visible { outline:2px solid var(--primary-dark); outline-offset:8px; }
/* La solapa y el bolsillo frontal se recortan con clip-path: polygon(),
   que no admite radios — así que sus vértices (que caen justo en las
   esquinas superiores del sobre cuando está abierto) siempre son
   perfectamente afilados. Este parche "borra" ese triángulo sobrante con
   el color de fondo de la página, con el mismo radio (8px) que ya usa
   .envelope__face, para restaurar la esquina redondeada real del sobre. */
.envelope::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    radial-gradient(circle at 100% 100%, transparent 8px, var(--canvas) 8.5px) top left / 8px 8px no-repeat,
    radial-gradient(circle at 0% 100%, transparent 8px, var(--canvas) 8.5px) top right / 8px 8px no-repeat;
}
/* La sombra se queda invisible mientras el sobre "está en el aire" (fill
   backwards cubre el hueco antes de que arranque su propio delay) y crece
   justo en el instante en que aterriza, para vender el peso del golpe.
   Sin forwards: al terminar, vuelve a la declaración estática (opacity
   implícita 1, sin transform) y la transition de abajo sigue mandando
   con normalidad para el flip. */
@keyframes shadow-arrive {
  from { opacity:0; transform:scale(.45,.35); }
  to { opacity:1; transform:scale(1,1); }
}
.envelope__shadow {
  position:absolute;
  left:8%;
  right:8%;
  bottom:-9%;
  height:24%;
  border-radius:50%;
  background:rgba(36,28,24,.26);
  filter:blur(20px);
  transition:transform 900ms var(--ease),opacity 900ms var(--ease);
  animation:shadow-arrive .5s ease-out .58s backwards;
}
.envelope-stage.is-flipped .envelope__shadow {
  transform:scale(.86,.7);
  opacity:.7;
}

/* Caras del sobre: la trasera está pre-girada 180º para que, al girar
   el botón completo, quede orientada correctamente en vez de en espejo.
   La rotación es controlada únicamente por .is-flipped (persistente) para
   que no "rebote" mientras las siguientes fases (.is-open) se encadenan. */
.envelope-stage.is-flipped .envelope { transform:rotateY(180deg); }

.envelope__face {
  position:absolute;
  inset:0;
  border-radius:8px;
  backface-visibility:hidden;
  box-shadow:0 20px 40px rgba(36,28,24,.2);
}
/* Textura de papel: --paper-grain (fibra fina + barrido de luz) por
   encima del color de cada cara; el resto del box-shadow apila un filo
   claro arriba, una leve viñeta abajo (grosor del propio papel) y la
   sombra de conjunto que la separa de la página. */
.envelope__face--front {
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8%;
  background-image:var(--paper-grain), linear-gradient(125deg,#911723 0%,#a94a53 48%,#500d13 100%);
  background-repeat:no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -22px 26px -22px rgba(0,0,0,.28),
    0 20px 40px rgba(36,28,24,.22);
}
.envelope__face--front::after {
  content:'';
  position:absolute;
  inset:9px;
  border:1px solid rgba(250,248,244,.28);
  pointer-events:none;
}
.envelope__stamp {
  position:absolute;
  top:8%;
  right:8%;
  width:15%;
  aspect-ratio:1;
  filter:drop-shadow(0 2px 6px rgba(24,16,12,.35));
}
.envelope__stamp img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.envelope__guest {
  position:relative;
  z-index:1;
  max-width:82%;
  text-align:center;
  color:#faf8f4;
  transition:opacity 220ms ease;
}
.envelope__guest small {
  display:block;
  margin-bottom:.4rem;
  color:rgba(250,248,244,.7);
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.envelope__guest strong {
  display:block;
  font-family:'Cinema Sunday','Cormorant Garamond',serif;
  font-size:clamp(1.2rem,3.5vw,1.8rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.03em;
  color:#faf8f4;
  text-shadow:
    0 2px 8px rgba(30,4,6,.4),
    -1px -1px 1px rgba(30,4,6,.5);
}
.envelope-stage.is-flipped .envelope__guest,
.envelope-stage.is-flipped .envelope__stamp {
  opacity:0;
  transition:opacity 260ms ease;
}
/* Red de seguridad: en algunas GPUs/navegadores de escritorio,
   backface-visibility:hidden no basta para ocultar del todo la cara
   frontal (y su marco interior en ::after) una vez girada 180º — se ve
   como una fina línea clara superpuesta a la tarjeta. Al llegar a
   "is-open" (la vuelta ya ha terminado del todo) se oculta también por
   opacidad, sin depender sólo del 3D. */
.envelope-stage.is-open .envelope__face--front {
  opacity:0;
}

.envelope__face--back {
  transform:rotateY(180deg);
  z-index:1;
  /* Más oscuro que la tapa (mismo tono que el bolsillo frontal): así se
     lee con claridad qué parte es la tapa y qué parte es el cuerpo del
     sobre, en vez de una única superficie plana de un solo color. */
  background-image:var(--paper-grain), linear-gradient(125deg,#7b141e 0%,#911723 48%,#3a090e 100%);
  background-repeat:no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -22px 26px -22px rgba(0,0,0,.32),
    0 20px 40px rgba(36,28,24,.2);
}

/* La tapa es un único triángulo cuya silueta se anima con clip-path: en
   vez de girarla en 3D (lo que la hacía superponerse o desvanecerse de
   forma imprevisible), la "volteamos" en 2D. La base del triángulo queda
   siempre fija en el borde superior del sobre; sólo se mueve el vértice:
   abajo (dentro del sobre) cuando está cerrada, arriba (como un tejado,
   por encima del propio sobre) cuando se abre. Va detrás de todo lo demás.
   La base se define con un "calc(41.8% + 2px)": el +2px es un solape fijo
   a propósito, no la línea real de la costura. Sin él, el redondeo a
   píxeles de dos elementos clipeados por separado (la tapa y el cuerpo)
   no siempre cae en el mismo píxel físico, y se filtra una línea clara
   del fondo de la página justo en la unión. */
.envelope__flap {
  position:absolute;
  left:0;
  right:0;
  top:-46%;
  height:110%;
  z-index:1;
  clip-path:polygon(0% calc(41.8% + 2px),100% calc(41.8% + 2px),50% 100%);
  /* La franja clara justo en el 41.8% es el pliegue del papel captando
     la luz — la misma coordenada que usa el clip-path para la costura,
     así que la cresta de luz cae exactamente sobre el doblez real. */
  background-image:
    linear-gradient(to bottom, transparent calc(41.8% - 5px), rgba(255,255,255,.4) calc(41.8% - 1px), rgba(255,255,255,.08) calc(41.8% + 3px), transparent calc(41.8% + 14px)),
    var(--paper-grain),
    linear-gradient(125deg,#911723 0%,#a94a53 48%,#500d13 100%);
  background-repeat:no-repeat;
  box-shadow:0 14px 22px rgba(36,28,24,.2);
  transition:clip-path 680ms var(--ease) 120ms,box-shadow 680ms var(--ease) 120ms;
}
.envelope-stage.is-open .envelope__flap {
  /* El vértice pasa de abajo (50% 100%) a arriba (50% 0%): la tapa queda
     como un tejado triangular por encima del cuerpo del sobre. */
  clip-path:polygon(0% calc(41.8% + 2px),100% calc(41.8% + 2px),50% 0%);
  box-shadow:0 8px 16px rgba(36,28,24,.16);
  /* El brillo del pliegue sólo tiene sentido con la solapa cerrada/
     cerrándose: una vez abierta convive con la tarjeta asomando y se ve
     superpuesto a la propia invitación, así que aquí se retira esa capa. */
  background-image:var(--paper-grain), linear-gradient(125deg,#911723 0%,#a94a53 48%,#500d13 100%);
}

/* Ventana hacia el interior: la tarjeta puede asomar por ENCIMA del propio
   sobre (bleed superior vía clip-path negativo), pero su parte inferior
   queda recortada justo donde empieza el cuerpo del sobre, como si
   quedara metida dentro. */
.envelope__pocket {
  position:absolute;
  inset:8% 9% 18%;
  z-index:2;
  clip-path:inset(-85% 0 0 0);
  opacity:0;
  transition:opacity 480ms ease 200ms;
}
.envelope__pocket::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 74%,rgba(36,28,24,.32) 100%);
  pointer-events:none;
}
.envelope__card {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  aspect-ratio:4/5;
  background:#fdfbf7;
  transform:translateY(100%);
  box-shadow:0 14px 30px rgba(36,28,24,.4), inset 0 0 0 1px rgba(36,28,24,.05);
  transition:transform 680ms var(--ease) 480ms;
}
.envelope__card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.envelope-stage.is-open .envelope__pocket { opacity:1; }
.envelope-stage.is-open .envelope__card { transform:translateY(-28%); }

/* Una vez lista, al pasar el ratón por encima la invitación asoma un
   poco más, y al retirarlo vuelve a su sitio; con una transición propia,
   más rápida y sin el retraso inicial de apertura. */
.envelope-stage.is-ready .envelope__card {
  transition:transform 320ms var(--ease),box-shadow 320ms var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .envelope-stage.is-ready .envelope:hover .envelope__card {
    transform:translateY(-50%);
    box-shadow:0 20px 36px rgba(36,28,24,.45);
  }
}

/* Bolsillo frontal: el mismo hueco en V que en un sobre real, delante de
   la tarjeta. Sus "hombros" agarran la tarjeta por los lados/abajo, así
   que la sensación es la de sacarla de dentro del sobre y no la de una
   tarjeta que simplemente aparece flotando por encima. */
.envelope__pocket-front {
  position:absolute;
  inset:0;
  z-index:3;
  clip-path:polygon(0% 0%,50% 46%,100% 0%,100% 100%,0% 100%);
  background-image:var(--paper-grain), linear-gradient(125deg,#7b141e 0%,#911723 48%,#3a090e 100%);
  background-repeat:no-repeat;
  box-shadow:0 10px 22px rgba(36,28,24,.22);
  opacity:0;
  /* Sin retraso y muy rápido: debe cubrir la tapa desde el primer
     instante de la apertura, antes de que se le vea moverse al
     descubierto por detrás. */
  transition:opacity 140ms ease;
}
.envelope-stage.is-open .envelope__pocket-front { opacity:1; }

.envelope__seal {
  position:absolute;
  left:50%;
  top:55%;
  z-index:4;
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:50%;
  box-shadow:0 8px 16px rgba(36,28,24,.3), inset 0 2px 3px rgba(255,255,255,.4);
  border:2px solid rgba(255,255,255,.85);
  transform:translate(-50%,-50%);
  transition:opacity 300ms ease,transform 360ms var(--ease);
}
/* La imagen trae bastante margen en blanco alrededor de "M&A" y la fecha:
   se recorta el sobrante ampliándola con transform (la máscara circular de
   .envelope__seal, que ya tiene overflow:hidden, se encarga de recortar lo
   que sobresalga) en vez de tocar el propio archivo, así el texto se lee
   más grande dentro del mismo círculo. */
.envelope__seal img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.4);
}
.envelope-stage.is-open .envelope__seal {
  opacity:0;
  transform:translate(-50%,-50%) translateY(-16px) scale(.5);
}

.envelope-stage.is-flipped .envelope-hint { opacity:0; }
.envelope-stage.is-ready .envelope-hint { opacity:1; }

/* Web de información — sistema tipográfico propio, distinto del sobre:
   Fraunces (con carácter, italic) para nombres y títulos, Instrument Sans
   para el cuerpo de lectura, e IBM Plex Mono para fechas, horas y
   etiquetas — el lenguaje de un resguardo de embarque, no de una tarjeta
   de boda al uso. */
.details {
  position:relative;
  display:none;
  width:min(100%,720px);
  margin:auto;
  padding:clamp(2.75rem,7vw,4.75rem) clamp(1.15rem,4.5vw,1.75rem) clamp(4rem,9vw,5.5rem);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
}

/* Iconos de línea (SVG en img/icons, un único trazo por dibujo) recoloreados
   con mask-image: el archivo sólo aporta la silueta, así que un mismo icono
   puede reaparecer en distintos sitios (agenda, fichas de ubicación, mapa,
   contacto) tomando en cada uno el color que le corresponda al fondo donde
   vive, en vez de quedarse fijo en el color con el que se exportó el SVG. */
.icon-mask {
  display:block;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.icon-ermita { -webkit-mask-image:url('../img/icons/ermita.svg'); mask-image:url('../img/icons/ermita.svg'); }
.icon-coctail { -webkit-mask-image:url('../img/icons/coctail.svg'); mask-image:url('../img/icons/coctail.svg'); }
.icon-comida { -webkit-mask-image:url('../img/icons/comida.svg'); mask-image:url('../img/icons/comida.svg'); }
.icon-fiesta { -webkit-mask-image:url('../img/icons/fiesta.svg'); mask-image:url('../img/icons/fiesta.svg'); }
.icon-resopon { -webkit-mask-image:url('../img/icons/resopon.svg'); mask-image:url('../img/icons/resopon.svg'); }
.icon-fin-bus { -webkit-mask-image:url('../img/icons/fin-bus.svg'); mask-image:url('../img/icons/fin-bus.svg'); }
.icon-parking { -webkit-mask-image:url('../img/icons/parking.svg'); mask-image:url('../img/icons/parking.svg'); }
.icon-novio-corazones { -webkit-mask-image:url('../img/icons/novio-corazones.svg'); mask-image:url('../img/icons/novio-corazones.svg'); }
.icon-novia-corazones { -webkit-mask-image:url('../img/icons/novia-corazones.svg'); mask-image:url('../img/icons/novia-corazones.svg'); }

/* Motivos florales: recoloreados con mask-image (el PNG original es tinta
   negra sobre transparente) para que sigan la paleta de esta página en vez
   de quedarse en negro puro sobre el nuevo fondo cálido. */
.details__motif {
  position:absolute;
  top:0;
  z-index:0;
  width:clamp(64px,17vw,150px);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:top center;
  mask-position:top center;
  -webkit-mask-size:contain;
  mask-size:contain;
  background-color:var(--primary);
  opacity:.14;
  pointer-events:none;
}
.details__motif--left {
  left:0;
  aspect-ratio:562/1862;
  -webkit-mask-image:url('../img/motivo_floral_izquierda.png');
  mask-image:url('../img/motivo_floral_izquierda.png');
}
.details__motif--right {
  right:0;
  aspect-ratio:472/2175;
  -webkit-mask-image:url('../img/motivo_floral_derecha.png');
  mask-image:url('../img/motivo_floral_derecha.png');
}

/* Mismo motivo y técnica que .details__motif, pero en la pantalla del
   sobre: al cargar la página, cada lado "florece" creciendo desde el
   borde hacia el centro (clip-path animado), en vez de aparecer con scroll
   como el resto de .reveal — aquí no hay scroll que lo dispare. */
.envelope-motif {
  position:absolute;
  top:0;
  z-index:0;
  width:clamp(56px,14vw,130px);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:top center;
  mask-position:top center;
  -webkit-mask-size:contain;
  mask-size:contain;
  background-color:var(--primary);
  opacity:.16;
  pointer-events:none;
  animation-duration:1.8s;
  animation-timing-function:var(--ease);
  animation-delay:.3s;
  animation-fill-mode:both;
}
.envelope-motif--left {
  left:0;
  aspect-ratio:562/1862;
  -webkit-mask-image:url('../img/motivo_floral_izquierda.png');
  mask-image:url('../img/motivo_floral_izquierda.png');
  clip-path:inset(0 100% 0 0);
  animation-name:bloom-in-left;
}
.envelope-motif--right {
  right:0;
  aspect-ratio:472/2175;
  -webkit-mask-image:url('../img/motivo_floral_derecha.png');
  mask-image:url('../img/motivo_floral_derecha.png');
  clip-path:inset(0 0 0 100%);
  animation-name:bloom-in-right;
}
/* Esquinas inferiores: mismos dos recursos que las de arriba, girados
   180º (así el motivo "derecha" — que crece hacia abajo — pasa a crecer
   hacia arriba desde la esquina inferior IZQUIERDA, y viceversa) para
   envolver el sobre por las cuatro esquinas en vez de solo las de arriba.
   El giro invierte también el sentido visual del crecimiento, así que cada
   una usa la animación "contraria" a la de su gemela de arriba para que
   siga leyéndose como "crece desde el borde hacia el centro". */
.envelope-motif--bottom-left {
  top:auto;
  bottom:0;
  left:0;
  aspect-ratio:472/2175;
  -webkit-mask-image:url('../img/motivo_floral_derecha.png');
  mask-image:url('../img/motivo_floral_derecha.png');
  transform:rotate(180deg);
  clip-path:inset(0 0 0 100%);
  animation-name:bloom-in-right;
}
.envelope-motif--bottom-right {
  top:auto;
  bottom:0;
  right:0;
  aspect-ratio:562/1862;
  -webkit-mask-image:url('../img/motivo_floral_izquierda.png');
  mask-image:url('../img/motivo_floral_izquierda.png');
  transform:rotate(180deg);
  clip-path:inset(0 100% 0 0);
  animation-name:bloom-in-left;
}
@keyframes bloom-in-left {
  from { clip-path:inset(0 100% 0 0); }
  to { clip-path:inset(0 0 0 0); }
}
@keyframes bloom-in-right {
  from { clip-path:inset(0 0 0 100%); }
  to { clip-path:inset(0 0 0 0); }
}

.details-visible body { overflow:auto; background:var(--canvas); }
.details-visible .experience {
  display:block;
  min-height:0;
  overflow:visible;
  padding:0;
  background:transparent;
}
.details-visible .details { display:block; animation:details-in .75s var(--ease) both; }
/* Las flores del sobre están ancladas a .experience (no a .envelope-stage),
   así que sin esto se quedarían fijas arriba, solapando la cabecera de la
   web de información una vez abierto el sobre. */
.envelope-motif--left,
.envelope-motif--right { transition:opacity .4s ease; }
.details-visible .envelope-motif--left,
.details-visible .envelope-motif--right { opacity:0; }
.details__back {
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 2.5rem;
  padding:.6rem 1.05rem;
  border:1px solid rgba(36,28,24,.14);
  border-radius:999px;
  background:rgba(251,245,236,.9);
  color:var(--primary);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease;
}
.details__back::before { content:'←'; font-family:var(--font-body); }
.details__back:hover,.details__back:focus-visible { transform:translateY(-1px); box-shadow:0 8px 18px rgba(36,28,24,.1); }
.details__header { position:relative; z-index:1; text-align:center; }
.details__header:focus { outline:none; }
.details__header::before {
  content:'';
  display:block;
  width:88px;
  height:1px;
  margin:0 auto 1.2rem;
  background:linear-gradient(90deg, transparent, rgba(145,23,35,.5), transparent);
}
.eyebrow {
  margin:0 0 .7rem;
  color:var(--primary);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
}
/* La fecha grande de cabecera es una clase aparte (no ".eyebrow"), para
   que agrandarla no afecte a los kickers pequeños de cada sección. */
.eyebrow--hero {
  font-size:clamp(.95rem,2.6vw,1.15rem);
  letter-spacing:.3em;
}
.celebration-name {
  display:block;
  margin:.5rem auto 0;
  color:var(--primary-dark);
  font-family:var(--font-display);
  font-size:clamp(2.4rem,8vw,3.6rem);
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.15;
}

/* Ilustración de la pareja bajo el nombre: reproduce, ya dentro de la web
   de información, la misma escena que asoma al abrir el sobre. El PNG es
   sólo tinta negra sobre transparente, así que se "recolorea" con un
   mask-image (sin depender de editar el propio archivo) para que combine
   con la paleta en vez de quedar en negro puro. */
.celebration-illustration {
  width:min(48%,260px);
  aspect-ratio:2480/2498;
  margin:1.75rem auto 0;
  background-color:var(--primary);
  -webkit-mask-image:url('../img/ilustracion_pareja.png');
  mask-image:url('../img/ilustracion_pareja.png');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.9;
}
.details__welcome {
  max-width:34rem;
  margin:1.75rem auto 0;
  font-size:clamp(1.05rem,2.2vw,1.2rem);
  font-style:normal;
  line-height:1.75;
  color:var(--muted);
}
.details__welcome span[data-guest-name] { color:var(--primary-dark); font-weight:600; }

/* Cuenta atrás como resguardo de billete: el borde arriba/abajo queda
   troquelado (los círculos "recortan" contra el fondo de página) y una
   línea de puntos separa la etiqueta de los dígitos, como en el talón de
   un billete de embarque — continúa, ya en la web de información, el
   propio lenguaje postal del sello que lleva el sobre. */
.countdown {
  position:relative;
  z-index:1;
  margin-top:clamp(2.75rem,6vw,3.75rem);
  padding:1.9rem 1.5rem 1.6rem;
  background:rgba(217,164,65,.09);
  border-radius:1.1rem;
  text-align:center;
}
.countdown::before,
.countdown::after {
  content:'';
  position:absolute;
  left:8px;
  right:8px;
  height:16px;
  background-image:radial-gradient(circle at 10px 50%, var(--paper) 8px, transparent 8.5px);
  background-size:20px 16px;
  background-repeat:repeat-x;
}
.countdown::before { top:-8px; }
.countdown::after { bottom:-8px; }
.countdown .eyebrow {
  position:relative;
  margin-bottom:1.1rem;
  padding-bottom:1.1rem;
}
.countdown .eyebrow::after {
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:70%;
  height:1px;
  transform:translateX(-50%);
  background-image:repeating-linear-gradient(to right, rgba(145,23,35,.35) 0 6px, transparent 6px 11px);
}
.countdown__units {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.countdown__units span {
  position:relative;
  display:grid;
  gap:.3rem;
  padding:0 .4rem;
}
.countdown__units span + span::before {
  content:'';
  position:absolute;
  left:0;
  top:12%;
  bottom:12%;
  width:1px;
  background:rgba(145,23,35,.18);
}
.countdown__units strong {
  display:block;
  color:var(--primary-dark);
  font-family:var(--font-mono);
  font-size:clamp(1.7rem,6.5vw,2.6rem);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.countdown__units small {
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.calendar-cta {
  position:relative;
  z-index:1;
  margin-top:1.85rem;
  text-align:center;
}

/* Bloques de contenido: cada uno con una etiqueta de color propia en vez
   de una numeración 01/02/03 — sólo el Timing es una secuencia real (y ya
   la cuenta la hora de cada fila); el resto son categorías, no pasos.
   Entre bloques, una línea trazada a mano sustituye al hairline recto. */
.details__content { position:relative; z-index:1; }
.detail-block { padding-block:clamp(2.25rem,6vw,3.25rem); }
.details__content .detail-block:not(:first-child),
.story {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7 Q15 1 30 7 T60 7 T90 7 T120 7' fill='none' stroke='%23241c18' stroke-width='1.4' stroke-linecap='round' opacity='.32'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:top center;
  background-size:48px 14px;
}
/* .story vive fuera de .details__content (tras el CTA de RSVP y el álbum),
   así que a diferencia de los demás bloques necesita su propio margen
   superior para separar la onda de la caja de "Álbum compartido". */
.story { margin-top:1.75rem; }
.details__content .detail-block:first-child { padding-top:clamp(2.75rem,6vw,3.75rem); }
.detail-block__head { margin-bottom:1.7rem; }
.detail-block__head .eyebrow {
  display:inline-flex;
  padding:.3rem .8rem;
  border-radius:999px;
  margin-bottom:.7rem;
}
.timing .detail-block__head .eyebrow { background:rgba(145,23,35,.1); color:var(--primary-dark); }
.places .detail-block__head .eyebrow { background:rgba(217,164,65,.22); color:#7a531c; }
.dresscode .detail-block__head .eyebrow { background:rgba(212,171,161,.24); color:#8a4c3c; }
.story .detail-block__head .eyebrow { background:rgba(36,28,24,.07); color:var(--ink); }
.detail-block__head h2 { margin:0; }
.detail-block__head h2,
.rsvp h2,
.credits p { text-wrap:balance; }
h2 {
  margin:.1rem 0 .8rem;
  color:var(--primary-dark);
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.8vw,2.15rem);
  font-weight:400;
  letter-spacing:.01em;
}

/* El día — agenda como línea de tiempo vertical; las horas en mono
   refuerzan la lectura de itinerario, no tarjetas repetidas. Punto y línea
   comparten las mismas dos variables (--agenda-dot/--agenda-gutter), así
   que la línea siempre pasa por el centro exacto del punto — incluida la
   versión móvil, donde el punto encoge — en vez de dos números sueltos que
   había que mantener sincronizados a mano. */
.agenda-list {
  --agenda-dot:2.85rem;
  --agenda-gutter:3.5rem;
  position:relative;
  display:grid;
  gap:1.85rem;
  margin:0;
  padding:0 0 0 var(--agenda-gutter);
  list-style:none;
}
/* Línea discontinua tipo "trayecto" (mismo lenguaje de billete/franqueo que
   el resto de la web) en vez de un hairline sólido: le da textura a la
   columna sin añadir peso visual, y el mask-image reproduce el mismo
   desvanecido en los extremos que tenía el gradiente sólido anterior. */
.agenda-list::before {
  content:'';
  position:absolute;
  left:calc(var(--agenda-dot) / 2 - 1px);
  top:.3rem;
  bottom:.3rem;
  width:2px;
  background-image:repeating-linear-gradient(to bottom, rgba(145,23,35,.45) 0 5px, transparent 5px 11px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.agenda-item { position:relative; }
.agenda-item__dot {
  position:absolute;
  left:calc(-1 * var(--agenda-gutter));
  top:-.2rem;
  display:grid;
  width:var(--agenda-dot);
  height:var(--agenda-dot);
  place-items:center;
  border:1px solid rgba(145,23,35,.25);
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 6px 14px rgba(36,28,24,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
/* El icono escala con --agenda-dot (que ya cambia en el media query móvil
   más abajo), así el hueco de aire alrededor se mantiene proporcional en
   vez de necesitar su propio ajuste de tamaño para pantallas pequeñas. */
.agenda-item__icon {
  width:calc(var(--agenda-dot) * 1.0);
  height:calc(var(--agenda-dot) * 1.0);
  background-color:var(--primary);
}
.agenda-item__time {
  display:block;
  margin-bottom:.25rem;
  color:var(--primary);
  font-family:var(--font-mono);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.agenda-item__body h3 {
  margin:0 0 .2rem;
  color:var(--primary-dark);
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:400;
}
.agenda-item__body h3:last-child { margin-bottom:0; }
.agenda-item__body p { margin:0; color:var(--muted); font-size:1.02rem; }

/* Unas palabras — bloque editorial con capitular, sin caja. El texto de
   esta sección reutiliza la clase .rsvp__gift (misma que en "Confirma tu
   asistencia"), así que sus estilos de color viven dentro de .rsvp; aquí
   sólo se añaden tipografía y capitular, válidos en cualquier fondo. */
.story .rsvp__gift { position:relative; margin-top:2.2rem; text-align:left; }
/* Tarjeta tipo nota de papel: gris cálido, sin textura ni sombra, a juego
   con el resto de bloques destacados de la página (álbum, RSVP). */
.story div.rsvp__gift {
  padding:1.5rem 1.75rem 2.1rem;
  border-radius:1.4rem;
  background:rgba(36,28,24,.07);
}
/* El primer bloque de texto es el único que va envuelto en un <div> (el
   segundo es un <p> suelto): esa diferencia de etiqueta, ya presente en el
   marcado, es lo que distingue "el párrafo que abre la cita" del resto. */
.story div.rsvp__gift::before,
.story div.rsvp__gift::after {
  position:absolute;
  color:var(--primary-light);
  font-family:var(--font-display);
  font-size:4.2rem;
  line-height:1;
  opacity:.55;
}
.story div.rsvp__gift::before { content:'“'; top:.65rem; left:1.1rem; }
.story div.rsvp__gift::after { content:'”'; bottom:-2.2rem; right:1.35rem; }
.story .rsvp__gift,
.story .rsvp__gift p {
  color:var(--ink);
  font-size:1.1rem;
  line-height:1.85;
}
.story div.rsvp__gift p::first-letter {
  float:left;
  margin:-.2rem .4rem -.3rem 0;
  color:var(--primary-dark);
  font-family:var(--font-display);
  font-size:3.2rem;
  line-height:.78;
}

/* Cómo llegar — cuadrícula de fichas con color propio por lugar, en la
   misma paleta ciruela / mostaza / rosa que el resto de la página. */
.place-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
.place-chip {
  position:relative;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  gap:.3rem;
  padding:1.5rem 1.25rem 1.3rem;
  border-radius:1.1rem;
  color:inherit;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(36,28,24,.05);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.place-chip:hover,.place-chip:focus-visible {
  transform:translateY(-4px) rotate(-.5deg);
  box-shadow:0 16px 30px rgba(36,28,24,.12);
}
.place-chip__icon {
  display:grid;
  width:3.4rem;
  height:3.4rem;
  margin-bottom:.5rem;
  place-items:center;
  border-radius:50%;
}
.place-chip__icon-mask {
  width:3.2rem;
  height:3.2rem;
}
.place-chip__title { color:var(--ink); font-family:var(--font-display); font-size:1.18rem; font-weight:400; }
.place-chip__desc { color:var(--muted); font-size:.93rem; line-height:1.45; }
.place-chip__time {
  justify-self:start;
  margin-top:.5rem;
  padding:.25rem .7rem;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.02em;
}
.place-chip__cta {
  margin-top:.1rem;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.place-chip__cta::after { content:'→'; margin-left:.3rem; }

.places .detail-block__body p {
  margin:0 0 1.5rem;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.75;
}

.place-chip--parking { background:rgba(145,23,35,.09); }
.place-chip--parking .place-chip__icon,
.place-chip--parking .place-chip__time { background:rgba(145,23,35,.16); color:var(--primary-dark); }
.place-chip--parking .place-chip__icon-mask { background-color:var(--primary-dark); }

.place-chip--ceremony { background:rgba(212,171,161,.22); }
.place-chip--ceremony .place-chip__icon,
.place-chip--ceremony .place-chip__time { background:rgba(212,171,161,.4); color:#7a3726; }
.place-chip--ceremony .place-chip__icon-mask { background-color:#7a3726; }

.place-chip--party { background:rgba(185,121,63,.18); }
.place-chip--party .place-chip__icon,
.place-chip--party .place-chip__time { background:rgba(185,121,63,.34); color:#5c3617; }
.place-chip--party .place-chip__icon-mask { background-color:#5c3617; }

/* Mapa — marco fino, sin sombra pesada; sigue directamente a las fichas,
   sin línea separadora, como parte de la misma sección. */
.map-shell {
  border:1px solid rgba(145,23,35,.14);
  border-radius:.9rem;
  overflow:hidden;
}
#wedding-map {
  width:100%;
  height:340px;
  background:#f6ecd8;
}
.leaflet-container {
  font-family:inherit;
}

/* El resto del mapa sigue la paleta ciruela/papel del sitio; sin esto, los
   controles de Leaflet (cuadrados blancos de esquina afilada, sombra dura)
   desentonan con las esquinas redondeadas y las sombras cálidas del resto
   de la página. */
.leaflet-control-zoom {
  border:0!important;
  border-radius:999px!important;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(36,28,24,.18)!important;
}
.leaflet-control-zoom a {
  width:34px!important;
  height:34px!important;
  background:var(--paper)!important;
  color:var(--primary-dark)!important;
  font-family:var(--font-body)!important;
  font-weight:600;
  border-bottom:1px solid rgba(145,23,35,.12)!important;
  transition:background-color .2s ease,color .2s ease;
}
.leaflet-control-zoom a:last-child { border-bottom:0!important; }
.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus-visible {
  background:var(--primary)!important;
  color:#fbf5ec!important;
}
.leaflet-control-attribution {
  border-radius:999px .6rem 0 0!important;
  background:rgba(251,245,236,.85)!important;
  color:var(--muted)!important;
  font-family:var(--font-mono);
  font-size:.62rem!important;
}
.leaflet-control-attribution a { color:var(--primary)!important; }

.leaflet-popup-content-wrapper {
  border-radius:1rem;
  background:var(--paper)!important;
  box-shadow:0 14px 30px rgba(36,28,24,.22)!important;
}
.leaflet-popup-content {
  margin:.85rem 1.1rem;
  line-height:1.5;
}
.leaflet-popup-tip {
  background:var(--paper)!important;
  box-shadow:0 6px 12px rgba(36,28,24,.12)!important;
}
.leaflet-popup-close-button {
  color:var(--muted)!important;
  font-size:1.1rem!important;
  transition:color .2s ease;
}
.leaflet-popup-close-button:hover { color:var(--primary-dark)!important; }

.dresscode .detail-block__body { max-width:36rem; }
.dresscode .detail-block__body p { margin:0; color:var(--muted); font-size:1.06rem; line-height:1.75; }

.story .detail-block__body { margin-top:1.6rem; }
.story .detail-block__body p { margin:0; color:var(--muted); font-size:1.06rem; line-height:1.75; }
/* Cierre ilustrado del bloque "Unas palabras" — mismo SVG monocromo y misma
   técnica de recoloreado por mask-image que el resto de iconos de la web
   (así sigue el rojo exacto de --primary en vez del color con el que se
   exportó el archivo). El ancho es un único número a propósito: para
   cambiarlo basta con tocar este "width". */
.story__illustration {
  width:85%;
  max-width:100%;
  aspect-ratio:299.5/121.8;
  margin:2rem auto 0;
  background-color:var(--primary);
  -webkit-mask-image:url('../img/novios-y-anillos.svg');
  mask-image:url('../img/novios-y-anillos.svg');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:.85;
}

/* Información bancaria — <details> nativo, cerrado por defecto para no
   agobiar con el IBAN a la vista; se abre bajo demanda de quien sí quiera
   contribuir. Card de papel discreta, coherente con .map-shell/.place-chip
   en vez de un tercer color de acento nuevo. */
.bank-info {
  margin:1.5rem 0 0;
  width:100%;
  border:1px solid rgba(145,23,35,.16);
  border-radius:1rem;
  background:var(--paper);
  overflow:hidden;
}
.bank-info__summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.95rem 1.25rem;
  color:var(--primary-dark);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  list-style:none;
  transition:background-color .2s ease;
}
.bank-info__summary::-webkit-details-marker { display:none; }
.bank-info__summary::marker { content:''; }
.bank-info__summary:hover,.bank-info__summary:focus-visible { background:rgba(145,23,35,.05); }
.bank-info__toggle-icon {
  position:relative;
  width:.8rem;
  height:.8rem;
  flex-shrink:0;
}
.bank-info__toggle-icon::before,
.bank-info__toggle-icon::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  background:var(--primary);
  transition:transform .3s var(--ease);
}
.bank-info__toggle-icon::before { width:100%; height:2px; transform:translate(-50%,-50%); }
.bank-info__toggle-icon::after { width:2px; height:100%; transform:translate(-50%,-50%); }
.bank-info.is-open .bank-info__toggle-icon::after { transform:translate(-50%,-50%) scaleY(0); }
.bank-info__body {
  display:grid;
  justify-items:center;
  gap:.65rem;
  padding:.2rem 1.25rem 1.5rem;
  border-top:1px solid rgba(145,23,35,.12);
  text-align:center;
}
.bank-info__logo { width:104px; height:auto; margin-top:.75rem; }
.bank-info__iban {
  margin:0;
  padding:.55rem 1rem;
  border-radius:.6rem;
  background:rgba(145,23,35,.06);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.9rem;
  letter-spacing:.03em;
}
.bank-info__beneficiaries-label {
  margin:.4rem 0 0;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.bank-info__beneficiaries {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.2rem;
}
.bank-info__beneficiaries li {
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.83rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* Confirma tu asistencia — fusiona la llamada a la acción principal con el
   contacto telefónico en una sola sección con peso propio: fondo ciruela
   sólido, para que destaque con claridad como el siguiente paso a dar. */
.rsvp {
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:.9rem;
  margin-top:clamp(2.75rem,6vw,3.75rem);
  padding:clamp(2.5rem,6vw,3.25rem) clamp(1.5rem,5vw,2.5rem);
  border-radius:1.4rem;
  background:var(--primary);
  color:#fbf5ec;
  text-align:center;
}
.rsvp .eyebrow { color:rgba(251,245,236,.75); }
.rsvp h2 { margin:.2rem 0 .3rem; color:#fbf5ec; }
.rsvp .rsvp__gift {
  max-width:32rem;
  margin:.6rem 0 .75rem;
  color:rgba(251,245,236,.82);
  font-size:1.05rem;
  line-height:1.75;
}
.rsvp .rsvp__gift strong { color:#fbf5ec; }
.rsvp__contacts {
  width:100%;
  margin-top:.75rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(251,245,236,.2);
}
.rsvp .contact-list a { color:rgba(251,245,236,.9); }
.rsvp .contact-list a:hover,.rsvp .contact-list a:focus-visible { color:#fbf5ec; }
.rsvp .contact-list span { color:rgba(251,245,236,.6); }
.primary-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  min-width:min(100%,19rem);
  padding:1.05rem 1.5rem;
  border-radius:999px;
  background:var(--primary);
  color:#fbf5ec;
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  box-shadow:0 8px 18px rgba(145,23,35,.22);
  transition:transform .25s ease,box-shadow .25s ease;
}
.primary-link:hover,.primary-link:focus-visible {
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(145,23,35,.28);
}
.rsvp .primary-link {
  background:#fbf5ec;
  color:var(--primary-dark);
  box-shadow:0 8px 18px rgba(36,28,24,.18);
}
.rsvp .primary-link:hover,.rsvp .primary-link:focus-visible {
  box-shadow:0 10px 22px rgba(36,28,24,.24);
}

/* Álbum compartido — sección propia y destacada tras el CTA principal. */
.album {
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:.6rem;
  margin-top:1.75rem;
  padding:2.25rem 1.5rem;
  border-radius:1.4rem;
  background:rgba(217,164,65,.14);
  text-align:center;
}
.album__icon { font-size:2.3rem; }
.album h2 { margin:.2rem 0 0; }
.album p { max-width:26rem; margin:0; color:var(--muted); font-size:1.02rem; line-height:1.7; }
.album .primary-link { margin-top:.5rem; }

.contact-list {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem 2.5rem;
  margin-top:.6rem;
}
.contact-list a {
  display:grid;
  justify-items:center;
  gap:.2rem;
  color:inherit;
  text-decoration:none;
}
.contact-list a:hover,.contact-list a:focus-visible { color:var(--primary-dark); }
/* Vive únicamente sobre el fondo ciruela sólido de .rsvp, así que el icono
   se recolorea directamente en el mismo tono claro que el resto del texto
   de esta sección, sin necesitar una variante "genérica" que hoy no existe. */
.contact-list__icon {
  width:5.0rem;
  height:5.0rem;
  margin-bottom:.15rem;
  background-color:rgba(251,245,236,.85);
  transition:background-color .2s ease;
}
.contact-list a:hover .contact-list__icon,
.contact-list a:focus-visible .contact-list__icon { background-color:#fbf5ec; }
.contact-list span {
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-list b { font-family:var(--font-mono); font-size:1rem; font-weight:600; }

/* Créditos — hueco discreto para dar visibilidad a la diseñadora. */
.credits {
  position:relative;
  z-index:1;
  margin-top:clamp(2.5rem,5vw,3.25rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(36,28,24,.09);
  text-align:center;
}
.credits p { margin:0; color:var(--muted); font-size:.8rem; }
.credits a {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--primary-dark);
  text-decoration:none;
  font-weight:600;
  vertical-align:middle;
}
.credits a:hover,.credits a:focus-visible { text-decoration:underline; }
.credits__icon { width:.95rem; height:.95rem; border-radius:.3rem; }

/* Aparición suave al hacer scroll; si el navegador no soporta
   IntersectionObserver o hay preferencia de movimiento reducido, el JS
   marca todo como visible de inmediato (ver src/app.js). */
.reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.reveal.is-visible { opacity:1; transform:none; }

@keyframes breathe { 50% { transform:scaleX(.55); opacity:.45; } }
@keyframes details-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

@media (max-width:560px) {
  .experience { padding:.8rem; }
  .envelope-stage { width:min(92vw,450px); }
  .envelope__seal { width:45px; height:45px; }
  .agenda-list { --agenda-dot:2.5rem; --agenda-gutter:3.05rem; }
  .place-grid { grid-template-columns:1fr; }
  .action-hint { bottom:.7rem; }
}

@media (min-width:561px) and (max-width:760px) {
  .place-grid { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:1ms!important;
    animation-delay:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
}