/* ==========================================================
   Invitación de boda · Janeth & Víctor
   Concepto: jardín otoñal sobre papel marfil, una sola columna
   pensada para teléfono. Terracota como acento, dorado champán
   para filos finos, verde oliva solo en detalles.
   ========================================================== */
:root {
  --marfil: #F8F2E8;
  --marfil-2: #F1E8D9;
  --arena: #D1B69D;
  --terracota: #A2481B;
  --terracota-osc: #7F3512;
  --oliva: #6E7B52;
  --oro: #A98448;
  --oro-claro: #EBD6A8;
  --tinta: #4A3427;
  --tinta-suave: #6A5444;
  --linea: rgba(162, 72, 27, .22);

  --serif: "Cormorant Garamond", "Cormorant", "Palatino Linotype", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --nombre: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif; /* solo nombres de los novios */

  --gutter: 24px;
  --col: 520px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: #E4D3B8;
  background-image: linear-gradient(rgba(233,221,203,.55), rgba(233,221,203,.55)), url("../img/lino.webp");
  background-size: auto, 420px;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.bloqueado { overflow: hidden; height: 100%; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Columna principal ---------- */
.inv {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  background-color: #F1E3CB;
  /* lino cálido + bandas de crema, champán y beige: sin blanco dominante */
  background-image:
    linear-gradient(180deg,
      rgba(248,238,220,.58) 0%, rgba(240,224,196,.46) 14%, rgba(248,238,220,.54) 30%,
      rgba(238,220,190,.50) 48%, rgba(246,235,214,.54) 64%, rgba(236,216,184,.52) 82%, rgba(244,232,210,.56) 100%),
    url("../img/lino.webp");
  background-size: auto, 420px;
  box-shadow: 0 0 60px rgba(74, 52, 39, .16);
  overflow: hidden;
}
.sec { position: relative; padding: 72px var(--gutter) 0; text-align: center; }

/* ---------- Tipografía de apoyo ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terracota);
}
.titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 9.4vw, 46px);
  line-height: 1.08;
  color: var(--tinta);
  text-wrap: balance;
  margin-top: 10px;
}
.rama { display: block; width: 124px; height: 22px; margin: 18px auto 0; color: var(--oro); }
.parrafo { font-size: 20px; line-height: 1.55; color: var(--tinta); text-wrap: pretty; }
.script { font-family: var(--script); font-weight: 400; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  border: 1px solid var(--terracota);
  border-radius: 999px;
  background: transparent;
  color: var(--terracota-osc);
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), opacity .35s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover, .btn:active { background: var(--terracota); color: #FBF4E8; }
.btn--solido { background: var(--terracota); color: #FBF4E8; box-shadow: 0 10px 24px -12px rgba(127,53,18,.7); }
.btn--solido:hover, .btn--solido:active { background: var(--terracota-osc); }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: none; }

/* ---------- Revelado suave ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-foto { opacity: 0; transform: scale(1.04); transition: opacity 1.6s var(--ease), transform 2.4s var(--ease); transition-delay: var(--d, 0s); }
.js .rv-foto.in { opacity: 1; transform: none; }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px;
  gap: clamp(22px, 5svh, 46px);
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  background-color: var(--marfil);
  /* escenario: paisaje de jardín detrás del sobre (sin deformar; cubre móvil y escritorio) */
  background-image:
    linear-gradient(rgba(248,242,232,.22), rgba(248,242,232,.06) 45%, rgba(248,242,232,.30)),
    url("../img/fondo-sobre.webp");
  background-size: auto, cover;
  background-position: 0 0, 50% 55%;
  background-repeat: no-repeat;
  text-align: center;
  transition: opacity 1.1s var(--ease) .0s, visibility 0s linear 1.1s;
}
.sobre.fuera { opacity: 0; visibility: hidden; pointer-events: none; }
.sobre__sup { transition: opacity .8s ease; }
.sobre__sup .eyebrow { display: block; margin-bottom: 14px; color: var(--tinta); letter-spacing: .34em; }
.sobre__nombres {
  font-family: var(--nombre); font-weight: 500;
  font-size: clamp(20px, 5.6vw, 30px); letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; line-height: 1.1;
  color: var(--tinta);
}
.sobre__nombres i { font-style: normal; font-family: var(--script); text-transform: none; font-size: 1.45em; line-height: 0; color: var(--terracota); padding: 0 .1em; letter-spacing: 0; vertical-align: -.08em; }

.env {
  position: relative; display: block;
  width: min(88vw, 430px);
  aspect-ratio: 1171 / 712;
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 22px 22px rgba(74, 52, 39, .28));
  transition: transform 1.2s var(--ease), opacity 1s ease;
  animation: flota 5.5s ease-in-out infinite;
}
.env:focus-visible { outline-offset: 10px; border-radius: 6px; }
.env > * { position: absolute; }
.env__interior {
  left: 0; top: 0; width: 100%; height: 94.38%;
  clip-path: polygon(0 0, 100% 0, 100% 35.2%, 50% 101.6%, 0 35.2%);
  /* forro otoñal: mismo terracota del exterior (#AC5640), con el bosque integrado */
  background: url("../img/forro-interior.webp") center / cover no-repeat, #8F4430;
  z-index: 0;
}
.env__interior::after {            /* sombras: bajo la solapa y junto a las paredes del sobre */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(38,12,6,.55) 0, rgba(38,12,6,.18) 14%, rgba(38,12,6,0) 30%),
    linear-gradient(90deg, rgba(38,12,6,.38) 0, rgba(38,12,6,0) 12%, rgba(38,12,6,0) 88%, rgba(38,12,6,.38) 100%);
}
.env__foto {
  left: 29%; width: 42%; top: 6%; height: 86.4%;
  z-index: 2; margin: 0;
  padding: clamp(4px, 1.1vw, 7px);
  background: #FBF6EC;
  box-shadow: 0 8px 20px rgba(30, 10, 4, .58), 0 1px 3px rgba(30, 10, 4, .5);
  opacity: 0;
  transition: transform 2.2s cubic-bezier(.45, .05, .3, 1), opacity .5s ease;
}
.env__foto::after { content: ""; position: absolute; inset: clamp(4px, 1.1vw, 7px); box-shadow: inset 0 0 0 1px rgba(169, 132, 72, .55); pointer-events: none; }
.env__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.env__cuerpo { inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.env__solapa {
  left: 0; top: 0; width: 100%; height: 94.38%;
  z-index: 5;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.45, .05, .25, 1) .15s;
}
.env__solapa img, .env__solapa .rev { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env__solapa .rev {
  transform: rotateY(180deg); /* cara interior: mira hacia atrás, y al girar la solapa queda con la punta hacia arriba */
  clip-path: polygon(0 0, 100% 0, 100% 33.5%, 50% 100%, 0 33.5%);
  /* cara interior de la solapa: continuación del mismo forro (sin zonas blancas) */
  background: url("../img/forro-solapa.webp") center / cover no-repeat, #8F4430;
}
.env__solapa .rev::after {         /* pliegue en la bisagra y leve brillo hacia la punta */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38,12,6,.42) 0, rgba(38,12,6,0) 20%, rgba(255,225,190,0) 70%, rgba(255,225,190,.10) 100%);
}
.sello {
  left: 50%; top: 76.47%; width: 22%; z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(45, 18, 6, .55)) drop-shadow(0 8px 8px rgba(45, 18, 6, .25));
  transition: opacity .7s ease, transform .9s var(--ease);
}
.sello img { display: block; width: 100%; height: auto; }
.sello::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.38), rgba(255,255,255,0) 46%), radial-gradient(circle at 50% 50%, rgba(80,30,10,0) 64%, rgba(80,30,10,.16) 100%); }

.abriendo .env { animation: none; }
.abriendo .sello { opacity: 0; transform: translate(-50%, -78%) scale(1.14) rotate(-8deg); }
.abriendo .sobre__sup, .abriendo .sobre__hint { opacity: 0; }
.solapa-abierta .env__solapa { transform: rotateX(180deg); }
.solapa-atras .env__solapa { z-index: 1; }
.solapa-abierta .env__foto { opacity: 1; transition-delay: .5s, .5s; }
.carta-sube .env__foto { transform: translateY(-86%) rotate(-2deg); }
.fuera .env { transform: translateY(26px) scale(.97); opacity: 0; }

.sobre__hint {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--tinta);
  animation: late 2.8s ease-in-out infinite;
  transition: opacity .6s ease;
}
@keyframes flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes late { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* =========================================================
   PORTADA
   ========================================================= */
.portada { position: relative; padding-bottom: 72px; text-align: center; }
.guirnalda { position: relative; width: 100%; aspect-ratio: 533 / 297; }
.guirnalda > img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
  mask-image: linear-gradient(#000 62%, transparent 100%);
  transform: translateY(calc(var(--sy, 0) * .1px));
}
.guirnalda .mono-wrap { position: absolute; left: 50%; top: 61%; width: 23%; margin: -11.5% 0 0 -11.5%; color: var(--terracota); }
.mono { display: block; width: 100%; height: auto; }


.hojas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hoja { position: absolute; top: -8%; animation: caer linear infinite; will-change: transform; }
.hoja > svg { display: block; animation: mecer ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes caer { from { transform: translate3d(0, -6vh, 0); } to { transform: translate3d(var(--dx, 24px), 112%, 0); } }
@keyframes mecer { from { transform: rotate(-24deg) translateX(-8px); } to { transform: rotate(24deg) translateX(8px); } }

.portada__cuerpo { position: relative; z-index: 2; padding: 0 var(--gutter); }
.portada .eyebrow { display: block; margin-top: 4px; }
.nombres { margin-top: 12px; line-height: 1.05; font-weight: 500; color: var(--tinta); }
.nombres span { display: block; font-family: var(--nombre); font-weight: 500; font-size: clamp(38px, 11.8vw, 60px); letter-spacing: .08em; text-indent: .08em; text-transform: uppercase; }
.nombres i { display: block; font-style: normal; font-family: var(--script); font-size: clamp(44px, 13vw, 64px); color: var(--terracota); line-height: .9; margin: 4px 0 0; }
.fecha { margin-top: 22px; font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); }
.fecha b { font-weight: 500; color: var(--terracota); }

.arco-foto { position: relative; width: min(74%, 330px); margin: 48px auto 0; }
.arco-foto::before, .arco-foto::after { content: ""; position: absolute; border: 1px solid var(--oro); border-radius: 999px 999px 4px 4px; pointer-events: none; }
.arco-foto::before { inset: -10px; opacity: .85; }
.arco-foto::after { inset: -17px; opacity: .45; }
.arco-foto__marco { position: relative; aspect-ratio: 4 / 5.3; overflow: hidden; border-radius: 999px 999px 4px 4px; background: var(--marfil-2); box-shadow: 0 24px 40px -22px rgba(74, 52, 39, .6); }
.arco-foto__marco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; animation: deriva 26s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.09) translateY(-1.5%); } }

.frase { margin: 56px auto 0; max-width: 20em; font-size: clamp(24px, 6.6vw, 30px); line-height: 1.25; font-style: italic; font-weight: 500; color: var(--tinta); text-wrap: balance; }

.verso { position: relative; width: min(80%, 322px); margin: 52px auto 0; aspect-ratio: 468 / 783; filter: drop-shadow(0 22px 22px rgba(74, 52, 39, .3)); }
.verso > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.verso__texto { position: absolute; inset: 21% 13% 17%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #FBF3E5; }
.verso blockquote { margin: 0; font-size: clamp(21px, 6vw, 26px); line-height: 1.28; font-style: italic; font-weight: 500; text-wrap: balance; text-shadow: 0 1px 1px rgba(80,25,5,.35); }
.verso cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-claro); }
.verso .sep { width: 54px; height: 1px; margin: 26px 0 8px; background: linear-gradient(90deg, transparent, var(--oro-claro), transparent); }
.verso .siempre { white-space: nowrap; font-family: var(--script); font-size: clamp(36px, 11vw, 46px); line-height: 1.1; color: var(--oro-claro); text-shadow: 0 1px 1px rgba(80,25,5,.4); }

/* =========================================================
   CEREMONIA Y UBICACIÓN
   ========================================================= */
.triptico { position: relative; margin: 36px auto 0; width: min(100%, 392px); perspective: 1500px; filter: drop-shadow(0 20px 20px rgba(74, 52, 39, .26)); }
.carta {
  position: relative; padding: 40px 28px 38px;
  background-color: #F6EFDF;
  background-image: linear-gradient(rgba(250,245,234,.66), rgba(250,245,234,.66)), url("../img/papel-relieve.webp");
  background-size: auto, 300px;
  clip-path: polygon(0.00% 0.37%, 2.00% 0.43%, 4.00% 0.29%, 6.00% 0.28%, 8.00% 0.22%, 10.00% 0.55%, 12.00% 0.16%, 14.00% 0.08%, 16.00% 0.14%, 18.00% 0.14%, 20.00% 0.18%, 22.00% 0.15%, 24.00% 0.06%, 26.00% 0.18%, 28.00% 0.17%, 30.00% 0.31%, 32.00% 0.11%, 34.00% 0.04%, 36.00% 0.11%, 38.00% 0.30%, 40.00% 0.21%, 42.00% 0.40%, 44.00% 0.44%, 46.00% 0.23%, 48.00% 0.05%, 50.00% 0.40%, 52.00% 0.42%, 54.00% 0.22%, 56.00% 0.36%, 58.00% 0.16%, 60.00% 0.50%, 62.00% 0.46%, 64.00% 0.44%, 66.00% 0.52%, 68.00% 0.13%, 70.00% 0.30%, 72.00% 0.40%, 74.00% 0.44%, 76.00% 0.21%, 78.00% 0.08%, 80.00% 0.34%, 82.00% 0.06%, 84.00% 0.39%, 86.00% 0.00%, 88.00% 0.25%, 90.00% 0.26%, 92.00% 0.07%, 94.00% 0.26%, 96.00% 0.28%, 98.00% 0.20%, 100.00% 0.49%, 99.76% 2.00%, 99.76% 5.00%, 99.93% 8.00%, 99.99% 11.00%, 99.90% 14.00%, 99.97% 17.00%, 99.81% 20.00%, 99.93% 23.00%, 99.96% 26.00%, 99.92% 29.00%, 99.89% 32.00%, 99.80% 35.00%, 99.87% 38.00%, 99.92% 41.00%, 99.81% 44.00%, 99.99% 47.00%, 99.94% 50.00%, 99.81% 53.00%, 99.79% 56.00%, 99.97% 59.00%, 99.98% 62.00%, 99.86% 65.00%, 99.82% 68.00%, 100.00% 71.00%, 99.88% 74.00%, 99.92% 77.00%, 99.98% 80.00%, 99.95% 83.00%, 99.92% 86.00%, 99.87% 89.00%, 99.97% 92.00%, 99.83% 95.00%, 99.76% 98.00%, 100.00% 99.62%, 98.00% 99.96%, 96.00% 99.64%, 94.00% 99.65%, 92.00% 100.00%, 90.00% 99.79%, 88.00% 99.64%, 86.00% 99.48%, 84.00% 99.49%, 82.00% 99.69%, 80.00% 99.68%, 78.00% 99.47%, 76.00% 99.88%, 74.00% 99.72%, 72.00% 99.97%, 70.00% 99.57%, 68.00% 99.64%, 66.00% 99.88%, 64.00% 99.89%, 62.00% 99.71%, 60.00% 99.59%, 58.00% 99.93%, 56.00% 99.82%, 54.00% 99.72%, 52.00% 99.86%, 50.00% 99.51%, 48.00% 99.60%, 46.00% 99.47%, 44.00% 99.65%, 42.00% 99.63%, 40.00% 99.84%, 38.00% 99.72%, 36.00% 99.76%, 34.00% 99.74%, 32.00% 99.97%, 30.00% 99.53%, 28.00% 99.92%, 26.00% 99.75%, 24.00% 99.49%, 22.00% 99.72%, 20.00% 99.52%, 18.00% 99.86%, 16.00% 99.74%, 14.00% 99.79%, 12.00% 99.82%, 10.00% 99.80%, 8.00% 99.76%, 6.00% 99.54%, 4.00% 99.47%, 2.00% 99.95%, 0.00% 99.63%, 0.15% 98.00%, 0.11% 95.00%, 0.01% 92.00%, 0.10% 89.00%, 0.09% 86.00%, 0.10% 83.00%, 0.16% 80.00%, 0.10% 77.00%, 0.08% 74.00%, 0.08% 71.00%, 0.27% 68.00%, 0.11% 65.00%, 0.27% 62.00%, 0.05% 59.00%, 0.18% 56.00%, 0.15% 53.00%, 0.20% 50.00%, 0.14% 47.00%, 0.24% 44.00%, 0.16% 41.00%, 0.01% 38.00%, 0.19% 35.00%, 0.17% 32.00%, 0.07% 29.00%, 0.20% 26.00%, 0.23% 23.00%, 0.08% 20.00%, 0.04% 17.00%, 0.08% 14.00%, 0.16% 11.00%, 0.12% 8.00%, 0.02% 5.00%, 0.12% 2.00%);
}
.carta .eyebrow { display: block; }
.hora { margin-top: 8px; font-size: clamp(50px, 15vw, 66px); line-height: 1; font-weight: 500; color: var(--terracota); letter-spacing: .01em; white-space: nowrap; }
.hora small { font-size: .5em; font-style: italic; letter-spacing: 0; margin-left: .12em; }
.carta .dia { margin-top: 10px; font-size: 21px; font-style: italic; }
.carta .linea { display: block; margin-left: auto !important; margin-right: auto !important; width: 70px; height: 1px; margin: 22px auto; background: linear-gradient(90deg, transparent, var(--oro), transparent); }
.carta .lugar { font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--tinta); text-wrap: balance; }
.carta .salon { margin-top: 8px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-suave); }
.carta .salon b { display: block; margin-top: 4px; font-weight: 500; font-size: 14px; color: var(--terracota); letter-spacing: .2em; }

.puerta { position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 3; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 1.7s cubic-bezier(.5,.05,.2,1), opacity .6s ease 1.2s; overflow: hidden; }
.puerta img { width: 100%; height: 100%; object-fit: cover; }
.puerta--izq { left: 0; transform-origin: 0 50%; border-radius: 3px 0 0 3px; }
.puerta--der { right: 0; transform-origin: 100% 50%; border-radius: 0 3px 3px 0; }
.puerta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60,20,8,.0), rgba(60,20,8,.22)); }
.puerta--der::after { background: linear-gradient(270deg, rgba(60,20,8,0), rgba(60,20,8,.22)); }
.triptico.abierto .puerta--izq { transform: rotateY(-112deg); opacity: 0; }
.triptico.abierto .puerta--der { transform: rotateY(112deg); opacity: 0; }
.triptico.abierto .puerta { pointer-events: none; }
.js .triptico .carta > * { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .triptico.abierto .carta > * { opacity: 1; transform: none; }
.js .triptico.abierto .carta > *:nth-child(1) { transition-delay: .7s; }
.js .triptico.abierto .carta > *:nth-child(2) { transition-delay: .9s; }
.js .triptico.abierto .carta > *:nth-child(3) { transition-delay: 1.1s; }
.js .triptico.abierto .carta > *:nth-child(4) { transition-delay: 1.25s; }
.js .triptico.abierto .carta > *:nth-child(5) { transition-delay: 1.4s; }
.js .triptico.abierto .carta > *:nth-child(6) { transition-delay: 1.55s; }

.placa { position: relative; display: grid; place-items: center; width: min(88%, 330px); aspect-ratio: 960 / 376; margin: 34px auto 0; filter: drop-shadow(0 12px 12px rgba(74, 52, 39, .28)); }
.placa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.placa p { position: relative; width: 66%; text-align: center; font-size: clamp(20px, 5.6vw, 24px); line-height: 1.12; font-style: italic; font-weight: 600; color: #FBF1E2; text-shadow: 0 1px 1px rgba(70, 20, 5, .5); text-wrap: balance; }
.mapa-acciones { margin-top: 32px; display: grid; justify-items: center; gap: 14px; }
.nota-pequena { max-width: 26em; font-size: 16.5px; line-height: 1.4; color: var(--tinta-suave); font-style: italic; }

/* ---------- Dos fotos ---------- */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; padding: 76px 30px 0; }
.par figure { position: relative; aspect-ratio: 3 / 4; }
.par figure::before, .par figure::after { content: ""; position: absolute; border: 1px solid var(--oro); border-radius: 999px 999px 4px 4px; pointer-events: none; }
.par figure::before { inset: -7px; opacity: .85; }
.par figure::after { inset: -13px; opacity: .42; }
.par figure:nth-child(2) { margin-top: 46px; }
.par img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 4px 4px; box-shadow: 0 20px 34px -20px rgba(74,52,39,.55); background: var(--marfil-2); }
.par figure:nth-child(1) img { object-position: 50% 30%; }
.par figure:nth-child(2) img { object-position: 50% 40%; }

/* =========================================================
   NUESTRA HISTORIA
   ========================================================= */
.nota-papel { position: relative; display: grid; place-items: center; width: min(88%, 340px); aspect-ratio: 416 / 353; margin: 30px auto 0; transform: rotate(-1.6deg); filter: drop-shadow(0 12px 12px rgba(74, 52, 39, .22)); }
.js .nota-papel.rv { transform: translateY(22px) rotate(-1.6deg); }
.js .nota-papel.rv.in { transform: rotate(-1.6deg); }
.nota-papel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.nota-papel p { position: relative; width: 78%; font-size: clamp(18px, 5vw, 21px); line-height: 1.3; font-style: italic; color: var(--tinta); text-wrap: balance; }
.historia-fotos { position: relative; margin: 40px auto 0; width: 100%; max-width: 410px; }
.impresa { position: relative; width: 63%; transform: rotate(-2.2deg); }
.impresa img { width: 100%; aspect-ratio: 619 / 802; object-fit: cover; }
.js .impresa.rv-foto { transform: rotate(-2.2deg) scale(1.04); }
.js .impresa.rv-foto.in { transform: rotate(-2.2deg); }
.arco-hist { position: relative; width: 66%; margin: -34% 0 0 auto; }
.arco-hist::before, .arco-hist::after { content: ""; position: absolute; border: 1px solid var(--oro); border-radius: 999px 999px 4px 4px; pointer-events: none; }
.arco-hist::before { inset: -8px; opacity: .85; }
.arco-hist::after { inset: -14px; opacity: .42; }
.arco-hist img { width: 100%; aspect-ratio: 859 / 1180; object-fit: cover; object-position: 50% 22%; border-radius: 999px 999px 4px 4px; box-shadow: 0 22px 36px -20px rgba(74,52,39,.6); }
.hortensia { position: absolute; mix-blend-mode: multiply; pointer-events: none; width: 64px; }

/* =========================================================
   PROGRAMA
   ========================================================= */
.banda { position: relative; width: 100%; aspect-ratio: 876 / 371; margin-top: 68px; }
.banda img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(transparent 0, #000 22%, #000 62%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 22%, #000 62%, transparent 100%); }
.programa { padding-top: 6px; }
.linea-tiempo { position: relative; margin: 38px auto 0; max-width: 380px; text-align: left; }
.linea-tiempo::before { content: ""; position: absolute; left: 118px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(transparent, var(--oro) 6%, var(--oro) 94%, transparent); opacity: .7; }
.paso { position: relative; display: grid; grid-template-columns: 100px 38px 1fr; column-gap: 0; align-items: center; min-height: 72px; }
.paso time { padding-right: 14px; text-align: right; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--terracota-osc); white-space: nowrap; }
.paso time small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.paso .ic { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; margin-left: -1px; border-radius: 50%; background: var(--marfil); border: 1px solid var(--oro); color: var(--terracota); }
.paso .ic svg { width: 20px; height: 20px; }
.paso .txt { padding-left: 18px; font-size: 21px; line-height: 1.18; font-weight: 600; color: var(--tinta); text-wrap: balance; }
.paso--fin .txt, .paso--fiesta .txt { color: var(--terracota-osc); }
.js .paso { opacity: 0; transform: translateX(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .paso.in { opacity: 1; transform: none; }

/* =========================================================
   DETALLES PARA INVITADOS
   ========================================================= */
.detalles { padding-bottom: 8px; }
.fichas { display: grid; gap: 22px; margin: 38px auto 0; max-width: 400px; }
.ficha { position: relative; padding: 34px 26px 30px; border: 1px solid var(--linea); background: rgba(250, 242, 226, .72); border-radius: 160px 160px 6px 6px / 70px 70px 6px 6px; }
.ficha:nth-child(2) { border-radius: 6px 6px 160px 160px / 6px 6px 70px 70px; padding: 30px 26px 40px; }
.ficha h3 { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--terracota); margin-bottom: 14px; }
.ficha p { font-size: 20px; line-height: 1.45; }
.muestras { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; max-width: 250px; margin: 22px auto 0; }
.muestra { display: grid; justify-items: center; gap: 7px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.muestra i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 1px solid rgba(74,52,39,.22); box-shadow: inset 0 -3px 5px rgba(74,52,39,.12); }
.ideas { margin-top: 34px; }

/* =========================================================
   Momentos (presentación de fotos)
   ========================================================= */
.momentos { padding: 76px var(--gutter) 0; text-align: center; }
.visor { position: relative; width: min(74%, 330px); margin: 0 auto; }
.visor::before, .visor::after { content: ""; position: absolute; border: 1px solid var(--oro); border-radius: 999px 999px 4px 4px; pointer-events: none; }
.visor::before { inset: -10px; opacity: .8; }
.visor::after { inset: -17px; opacity: .4; }
.visor__marco { position: relative; aspect-ratio: 4 / 5.2; overflow: hidden; border-radius: 999px 999px 4px 4px; background: var(--marfil-2); box-shadow: 0 24px 40px -22px rgba(74,52,39,.6); }
.visor__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; transition: opacity 2.2s ease; }
.visor__marco img.on { opacity: 1; animation: deriva 14s ease-in-out forwards; }
.puntos { display: flex; justify-content: center; gap: 4px; margin-top: 36px; }
.puntos button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.puntos button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--arena); transition: background .4s, transform .4s; }
.puntos button[aria-current="true"]::before { background: var(--terracota); transform: scale(1.3); }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp-sec { padding-bottom: 20px; }
.rsvp { margin: 34px auto 0; max-width: 400px; }
.rsvp fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rsvp legend { display: block; width: 100%; padding: 0; margin: 0 0 24px; font-size: clamp(26px, 7.2vw, 32px); line-height: 1.18; font-weight: 500; font-style: italic; text-align: center; color: var(--tinta); text-wrap: balance; }
.opciones { display: grid; gap: 14px; }
.op { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.op__caja { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 14px 22px; border: 1px solid var(--arena); border-radius: 40px; background: rgba(255, 252, 246, .7); text-align: left; transition: border-color .35s, background .35s, box-shadow .35s; }
.op__marca { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--oro); display: grid; place-items: center; transition: background .35s, border-color .35s; }
.op__marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--terracota); transform: scale(0); transition: transform .35s var(--ease); }
.op__txt { font-size: 21px; line-height: 1.2; font-weight: 600; color: var(--tinta); }
.op input:checked + .op__caja { border-color: var(--terracota); background: #FFF9EF; box-shadow: 0 10px 22px -14px rgba(127, 53, 18, .6); }
.op input:checked + .op__caja .op__marca { border-color: var(--terracota); }
.op input:checked + .op__caja .op__marca::after { transform: scale(1); }
.op input:focus-visible + .op__caja { outline: 2px solid var(--terracota); outline-offset: 3px; }
.rsvp .btn { width: 100%; margin-top: 26px; }
.rsvp__estado { min-height: 3.4em; margin-top: 16px; font-size: 17.5px; line-height: 1.4; font-style: italic; color: var(--tinta-suave); text-wrap: balance; }
.rsvp__estado.aviso { color: var(--terracota-osc); }

/* ---------- Pie ---------- */
.pie { position: relative; margin-top: 40px; padding: 0 var(--gutter) max(64px, env(safe-area-inset-bottom, 0px)); text-align: center; }
.pie .banda { margin-top: 0; }
.pie .banda img { -webkit-mask-image: linear-gradient(transparent 0, #000 26%, #000 66%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 26%, #000 66%, transparent 100%); }
.pie__cuerpo { position: relative; margin-top: 4px; }
.pie .mono-wrap { width: 84px; margin: 0 auto; }
.pie .n { margin-top: 12px; font-family: var(--nombre); font-size: 26px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pie .n i { font-style: normal; font-family: var(--script); text-transform: none; letter-spacing: 0; color: var(--terracota); font-size: 1.4em; line-height: 0; padding: 0 .08em; }
.pie .d { margin-top: 6px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- Música ---------- */
.musica {
  position: fixed; z-index: 90;
  top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(169,132,72,.8);
  background: rgba(248, 242, 232, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--terracota);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(74,52,39,.6);
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s;
  -webkit-tap-highlight-color: transparent;
}
.musica.visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.musica .barras { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.musica .barras i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; transform-origin: bottom; }
.musica.sonando .barras i { animation: barra 1.3s ease-in-out infinite; }
.musica.sonando .barras i:nth-child(2) { animation-delay: -.45s; animation-duration: 1.1s; }
.musica.sonando .barras i:nth-child(3) { animation-delay: -.8s; animation-duration: 1.5s; }
.musica.sonando .barras i:nth-child(4) { animation-delay: -.2s; animation-duration: 1.2s; }
@keyframes barra { 0%,100% { height: 5px; } 50% { height: 16px; } }
.musica .pausa { display: none; width: 14px; height: 14px; }
.musica:not(.sonando) .barras { display: none; }
.musica:not(.sonando) .pausa { display: block; }
.musica__aviso { position: fixed; z-index: 90; top: max(68px, calc(env(safe-area-inset-top, 0px) + 56px)); right: max(14px, env(safe-area-inset-right, 0px)); max-width: 220px; padding: 10px 14px; border-radius: 12px; background: var(--tinta); color: #FBF3E5; font-family: var(--sans); font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(-6px); transition: opacity .5s, transform .5s; pointer-events: none; }
.musica__aviso.visible { opacity: 1; transform: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv, .js .rv-foto, .js .paso { opacity: 1; transform: none; }
  .js .nota-papel.rv, .js .nota-papel.rv.in { transform: rotate(-1.6deg); }
  .js .impresa.rv-foto, .js .impresa.rv-foto.in { transform: rotate(-2.2deg); }
  .hojas { display: none; }
  .puerta { display: none; }
  .js .triptico .carta > * { opacity: 1; transform: none; }
}

@media (min-width: 560px) {
  body { font-size: 20px; }
}
@media (max-height: 640px) and (orientation: portrait) {
  .sobre { gap: 16px; }
}

/* Monograma VJ (imagen del logo): aparición suave */
.js .mono-anim .mono { opacity: 0; transform: scale(.88); transition: opacity 1.8s ease .3s, transform 2.4s var(--ease) .3s; }
.js .mono-anim.in .mono { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .mono-anim .mono { opacity: 1; transform: none; }
}

/* =========================================================
   CUENTA REGRESIVA (hora de Panamá)
   ========================================================= */
.cuenta { margin: 40px auto 0; max-width: 392px; text-align: center; }
.cuenta .script { display: block; margin-top: 2px; font-size: 40px; line-height: 1.1; color: var(--terracota); }
.cuenta__fila { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 14px; }
.cuenta__fila[hidden], .cuenta__fin[hidden] { display: none; }
.unidad { width: 72px; padding: 16px 0 12px; border: 1px solid var(--oro); border-radius: 999px 999px 8px 8px; background: rgba(255, 252, 246, .7); box-shadow: 0 12px 20px -16px rgba(74, 52, 39, .6); }
.unidad .num { display: block; font-size: 34px; line-height: 1; font-weight: 600; color: var(--terracota); font-variant-numeric: tabular-nums; }
.unidad .lab { display: block; margin-top: 9px; font-family: var(--sans); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); text-indent: .1em; }
.cuenta__sep { width: 7px; height: 7px; margin-top: 34px; background: var(--oro); transform: rotate(45deg); flex: none; }
.cuenta__fin { margin: 14px auto 0; font-size: 24px; line-height: 1.25; font-style: italic; color: var(--tinta); text-wrap: balance; }
.cuenta__fin .script { font-size: 44px; }
@media (max-width: 359px) { .unidad { width: 60px; } .unidad .lab { font-size: 8px; letter-spacing: .06em; } .unidad .num { font-size: 29px; } .cuenta__fila { gap: 5px; } }

/* =========================================================
   MAPA INTEGRADO
   ========================================================= */
.mapa { margin: 44px auto 0; max-width: 420px; }
.mapa__titulo { font-size: clamp(26px, 7vw, 31px); line-height: 1.15; font-weight: 500; font-style: italic; color: var(--tinta); text-wrap: balance; }
.mapa__marco { margin-top: 18px; padding: 9px; border: 1px solid var(--oro); border-radius: 6px; background: #F6EFDF; box-shadow: 0 18px 30px -20px rgba(74, 52, 39, .6); }
.mapa__marco iframe { display: block; width: 100%; max-width: 100%; height: 320px; border: 0; border-radius: 2px; background: var(--marfil-2); }
.mapa .nota-pequena { margin: 14px auto 0; }
@media (min-width: 560px) { .mapa__marco iframe { height: 350px; } }

/* =========================================================
   FORMULARIO RSVP: nombre, apellido y respuesta
   ========================================================= */
.rsvp__titulo { margin: 0 0 24px; font-size: clamp(26px, 7.2vw, 32px); line-height: 1.18; font-weight: 500; font-style: italic; text-align: center; color: var(--tinta); text-wrap: balance; }
.campos { display: grid; gap: 18px; text-align: left; margin-bottom: 24px; }
.campo label { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--terracota-osc); }
.campo input { width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid var(--arena); border-radius: 14px; background: rgba(255, 252, 246, .92); color: var(--tinta); font-family: var(--serif); font-size: 21px; font-weight: 600; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
.campo input:focus { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(162, 72, 27, .16); }
.campo input[aria-invalid="true"] { border-color: #B03A1E; background: #FFF6F1; }
.error { margin-top: 8px; font-size: 16.5px; line-height: 1.3; font-style: italic; text-align: left; color: #9A2F14; }
.rsvp__enlace { display: inline-block; margin-top: 2px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-osc); }

/* =========================================================
   DESPEDIDA
   ========================================================= */
.despedida { position: relative; max-width: 330px; margin: 34px auto 0; }
.despedida .rama { margin: 0 auto 18px; }
.despedida__texto { font-size: 21px; line-height: 1.5; font-style: italic; color: var(--tinta); text-wrap: balance; }
.despedida__cariño { margin-top: 20px; font-size: 38px; line-height: 1.1; color: var(--terracota); }
.despedida__firma { margin-top: 24px; font-family: var(--nombre); font-size: 22px; font-weight: 500; letter-spacing: .14em; text-indent: .14em; text-transform: uppercase; color: var(--tinta); }
.pie .d { margin-top: 34px; }
.eyebrow--nombres { font-family: var(--nombre); font-weight: 500; letter-spacing: .24em; }


/* =========================================================
   MARCO ELEGANTE (fotos rectangulares): paspartú marfil, filete
   dorado doble y esquinas con una pequeña hoja-punto
   ========================================================= */
.marco {
  position: relative; display: block; box-sizing: border-box;
  padding: clamp(9px, 3vw, 15px);
  background-color: #FBF5E9;
  background-image: linear-gradient(rgba(251,245,233,.72), rgba(251,245,233,.72)), url("../img/papel-relieve.webp");
  background-size: auto, 260px;
  border: 1px solid rgba(169, 132, 72, .6);
  box-shadow: 0 18px 28px -16px rgba(74, 52, 39, .55), 0 2px 4px rgba(74, 52, 39, .12);
}
.marco::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(169, 132, 72, .4); pointer-events: none; z-index: 2; }
.marco::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none; z-index: 3;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23A98448' stroke-width='1.2' stroke-linecap='round'><path d='M1.5 16V5.5Q1.5 1.5 5.5 1.5H16'/><circle cx='6.6' cy='6.6' r='1.1' fill='%23A98448' stroke='none'/></svg>") left top / 12px 12px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23A98448' stroke-width='1.2' stroke-linecap='round'><path d='M16.5 16V5.5Q16.5 1.5 12.5 1.5H2'/><circle cx='11.4' cy='6.6' r='1.1' fill='%23A98448' stroke='none'/></svg>") right top / 12px 12px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23A98448' stroke-width='1.2' stroke-linecap='round'><path d='M1.5 2V12.5Q1.5 16.5 5.5 16.5H16'/><circle cx='6.6' cy='11.4' r='1.1' fill='%23A98448' stroke='none'/></svg>") left bottom / 12px 12px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23A98448' stroke-width='1.2' stroke-linecap='round'><path d='M16.5 2V12.5Q16.5 16.5 12.5 16.5H2'/><circle cx='11.4' cy='11.4' r='1.1' fill='%23A98448' stroke='none'/></svg>") right bottom / 12px 12px no-repeat;
}
.marco img { display: block; width: 100%; height: auto; }
.impresa.marco img { aspect-ratio: 619 / 802; object-fit: cover; }

/* =========================================================
   FONDOS CÁLIDOS POR SECCIÓN (se leen detrás del contenido)
   ========================================================= */
.fondo { isolation: isolate; }
.fondo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none; }
.fondo--paisaje::before {
  height: 640px;
  background: linear-gradient(rgba(244,230,206,.28), rgba(244,230,206,.28)), url("../img/fondo-paisaje.webp") center top / cover no-repeat;
  opacity: .9;
  -webkit-mask-image: linear-gradient(transparent 0, #000 26%, #000 62%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 26%, #000 62%, transparent 100%);
}
.fondo--calido::before {
  bottom: 0;
  background:
    radial-gradient(ellipse 90% 38% at 100% 8%, rgba(196,120,70,.16), transparent 70%),
    radial-gradient(ellipse 80% 36% at 0% 92%, rgba(205,160,96,.18), transparent 72%);
}
.fondo--lino::before {
  bottom: 0;
  background: linear-gradient(180deg, transparent 0, rgba(214,186,150,.30) 22%, rgba(214,186,150,.30) 78%, transparent 100%);
}
.fondo--otono::before {
  bottom: 0;
  background: url("../img/fondo-otono.webp") center / cover no-repeat;
  opacity: .17;
  -webkit-mask-image: linear-gradient(transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 30%, #000 70%, transparent 100%);
}

/* =========================================================
   LLUVIA DE SOBRES
   ========================================================= */
.sobres { padding-bottom: 8px; }
.sobres__img { width: min(70%, 270px); margin: 30px auto 0; }
.sobres__img img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(74, 52, 39, .28)); }
.sobres__texto { max-width: 21em; margin: 22px auto 0; font-size: clamp(21px, 5.8vw, 24px); line-height: 1.42; font-style: italic; color: var(--tinta); text-wrap: balance; }

/* =========================================================
   GALERÍA DE FOTOS
   ========================================================= */
.galeria { padding-bottom: 12px; }
.galeria__intro { max-width: 21em; margin: 22px auto 0; font-size: clamp(20px, 5.6vw, 23px); line-height: 1.45; font-style: italic; color: var(--tinta); text-wrap: balance; }
.galeria__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; align-items: start; max-width: 430px; margin: 38px auto 0; }
.g { margin: 0; min-width: 0; }
.g--ancha { grid-column: 1 / -1; width: 76%; justify-self: center; }
.g:nth-child(3), .g:nth-child(5) { margin-top: 30px; }
.g__btn { width: 100%; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.g__btn:hover { transform: translateY(-3px); box-shadow: 0 24px 32px -16px rgba(74, 52, 39, .6), 0 2px 4px rgba(74, 52, 39, .12); }
.galeria__nota { margin: 30px auto 0; font-size: 16px; }

/* Visor ampliado */
.lb { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: 14px 6px; background: rgba(38, 24, 16, .93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: lbIn .45s ease; }
.lb[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb__fig { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.lb__marco { display: inline-block; max-width: 100%; padding: 11px; }
.lb__marco img { width: auto; max-width: 100%; max-height: calc(100svh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; }
.lb figcaption { font-family: var(--sans); font-size: 12px; letter-spacing: .24em; color: #EBD6A8; }
.lb__btn { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(235, 214, 168, .55); border-radius: 50%; background: rgba(38, 24, 16, .5); color: #F4E6C9; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s; }
.lb__btn:hover { background: rgba(162, 72, 27, .75); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__prev { grid-column: 1; justify-self: center; }
.lb__next { grid-column: 3; justify-self: center; }
.lb__cerrar { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; width: 44px; height: 44px; }
html.lb-abierto { overflow: hidden; }
@media (max-width: 420px) { .lb { grid-template-columns: 40px 1fr 40px; padding-inline: 3px; } .lb__btn { width: 38px; height: 38px; } .lb__btn svg { width: 18px; height: 18px; } }
@media (min-width: 700px) { .lb { grid-template-columns: 90px 1fr 90px; } }


/* =========================================================
   DECORACIÓN FLORAL (recortes con transparencia)
   Quedan detrás del texto y nunca sobre las fotografías
   ========================================================= */
.flor {
  position: absolute; z-index: -1; display: block;
  width: var(--w, 100px); height: auto; max-width: none;
  top: var(--t, auto); bottom: var(--b, auto); left: var(--l, auto); right: var(--r, auto);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  transform: rotate(var(--rot, 0deg)) scaleX(var(--fx, 1));
  filter: drop-shadow(0 6px 8px rgba(74, 52, 39, .16));
}
.js .flor { opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)) scaleX(var(--fx, 1)) scale(.95); transition: opacity 1.8s var(--ease), transform 2.4s var(--ease); }
.js .flor.in { opacity: .96; transform: rotate(var(--rot, 0deg)) scaleX(var(--fx, 1)); }
.pie { isolation: isolate; padding-bottom: max(112px, env(safe-area-inset-bottom, 0px)); }
.flor--centro { position: relative; z-index: 0; width: min(62%, 230px); margin: 18px auto 0; top: auto; left: auto; right: auto; bottom: auto; --rot: 0deg; }
@media (prefers-reduced-motion: reduce) { .js .flor, .js .flor.in { opacity: .96; transform: rotate(var(--rot, 0deg)) scaleX(var(--fx, 1)); } }