/* Propuesta 1 · «Tu lugar en nuestra mesa»
   Mantel de lino, gasa salvia, bajoplato de cristal con perlitas doradas, copas verde olivo y oro.
   Todo visto desde arriba. «Elegante, pero no extravagante» (ella, 11-nov). */
:root {
  --lino: #E5DCCB;
  --marfil: #F8F4EA;
  --tinta: #3A4531;
  --tinta-2: #5B654F;
  --olivo: #6E7C50;
  --salvia: #93A487;
  --salvia-2: #C7D0BB;
  --oro: #9C7B45;
  --oro-2: #C7A970;
  --ratan: #B68B55;
  --rubor: #E7D2C8;
  --sombra-tarjeta: 0 1px 1px rgba(60, 46, 26, .08), 0 6px 14px -6px rgba(60, 46, 26, .28), 0 24px 44px -22px rgba(60, 46, 26, .35);
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --script: 'Corinthia', 'Snell Roundhand', cursive;
  --caps: 'Marcellus SC', 'Bodoni Moda', serif;
  color-scheme: light;
}
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--lino) url(../img/lino.webp) repeat;
  background-size: 256px;
  color: var(--tinta);
  font: 400 16px/1.55 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.cerrada { overflow: hidden; height: 100svh; }
button { font: inherit; color: inherit; }
a { color: inherit; }
svg { display: block; }

.rotulo { font-family: var(--caps); font-size: 14px; letter-spacing: .16em; color: var(--oro); margin: 0; }
.script { font-family: var(--script); font-weight: 400; line-height: .95; margin: 0; color: var(--tinta); word-spacing: .1em; }
.titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 7.4vw, 32px); line-height: 1.15; margin: .2em 0 0; letter-spacing: -.005em; }
.titulo em { font-style: italic; color: var(--olivo); }
.sub { font-family: var(--caps); font-size: 14px; letter-spacing: .14em; color: var(--oro); margin: 1.1em 0 .25em; }
.hojita { width: 120px; height: 16px; color: var(--oro-2); margin: 0 auto; }
.separa { margin: 14px 0 12px; }

/* ---------- botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 10px 22px; border-radius: 999px;
  border: 1px solid var(--olivo); background: var(--olivo); color: #F7F3E8;
  font-family: var(--caps); font-size: 14px; letter-spacing: .12em; text-decoration: none;
  cursor: pointer; transition: transform .2s, background-color .2s, opacity .2s;
  box-shadow: 0 6px 14px -8px rgba(60, 70, 40, .6);
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.97); }
.boton.suave { background: transparent; color: var(--olivo); box-shadow: none; }
.boton:disabled { opacity: .45; cursor: default; }
.enlace { background: none; border: 0; padding: 4px 2px; color: var(--olivo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-style: italic; }

/* ---------- escenas ---------- */
.escena {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 64px 16px;
  overflow: hidden; overflow: clip;
  text-align: center;
}
.deco { position: absolute; pointer-events: none; opacity: 0; translate: 0 26px; transition: opacity 1.1s ease .25s, translate 1.5s cubic-bezier(.2, .7, .2, 1) .25s; }
.vista .deco { opacity: 1; translate: 0 0; }

/* sombra de ramas que se mece sobre toda la mesa (una sola capa, sin mezcla) */
.sombras { position: fixed; inset: -10% -24%; z-index: 60; pointer-events: none; background: url(../img/sombra-hojas.webp) center / cover no-repeat; transform-origin: 30% -30%; animation: mece 11s ease-in-out infinite alternate; }
@keyframes mece { from { transform: rotate(-1.1deg) translate(-8px, 0); } to { transform: rotate(1.3deg) translate(10px, 6px); } }
.deco svg { width: 100%; height: auto; }

.tarjeta {
  position: relative; width: min(100%, 400px);
  padding: 32px 26px;
  background: var(--marfil) url(../img/papel.webp);
  background-size: 256px;
  box-shadow: var(--sombra-tarjeta);
  border-radius: 2px;
  transform: rotate(var(--r, 0deg));
}
.tarjeta::before {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(156, 123, 69, .42);
}
.tarjeta p { margin: 0; }

/* algo que se pone sobre la mesa al llegar */
.pone { opacity: 0; transform: translateY(46px) rotate(calc(var(--r, 0deg) - 5deg)); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .75, .2, 1); }
.pone.visto { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

/* nombre escrito a mano: una máscara que avanza */
.escribe { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 14%), transparent calc(var(--p) + 1%)); mask-image: linear-gradient(90deg, #000 calc(var(--p) - 14%), transparent calc(var(--p) + 1%)); }
.vista .escribe { animation: escribe 2.1s cubic-bezier(.45, .1, .4, 1) var(--retraso, .35s) forwards; }
@keyframes escribe { to { --p: 118%; } }

/* ================= APERTURA ================= */
.apertura {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2svh;
  background: var(--lino) url(../img/lino.webp) repeat; background-size: 256px;
  cursor: pointer; overflow: hidden;
  transition: opacity .8s ease .1s;
}
.ap-arriba { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ap-nombres { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--tinta-2); }
.ap-escena { position: relative; width: min(74vw, 46svh, 380px); aspect-ratio: 1; margin-bottom: max(64px, 9svh); transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity .8s ease .15s; }
.ap-escena > div { position: absolute; }
.ap-bajoplato { inset: 0; }
.ap-tenedor { width: 5.6%; left: -13.5%; top: 15%; }
.ap-cuchillo { width: 5.6%; right: -12.5%; top: 13%; }
.ap-copa { width: 15%; right: -11%; top: -10%; }
.ap-tenedor svg, .ap-cuchillo svg, .ap-copa svg { width: 100%; height: auto; }
.ap-plato { width: 74%; left: 13%; top: 13%; }
.ap-servilleta { width: 104%; left: -2%; top: 19.5%; transform: rotate(-28deg); transform-origin: 50% 47.6%; transition: transform 1s cubic-bezier(.5, 0, .3, 1), opacity .7s ease .3s; }
.ap-aro { width: 17.5%; left: 41.25%; top: 34.8%; transform: rotate(-28deg); transition: transform .75s cubic-bezier(.6, 0, .3, 1), opacity .5s ease .25s; }
.ap-euc { width: 52%; left: 46%; top: 14%; transform: rotate(-38deg); transition: transform 1s cubic-bezier(.5, 0, .3, 1), opacity .7s ease .3s; }
.ap-flor { width: 21%; left: 58%; top: 25%; transition: transform .8s cubic-bezier(.6, 0, .3, 1), opacity .5s ease .2s; }
.ap-tarjeta {
  left: 8%; width: 84%; top: 72%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 12px 9px; background: var(--marfil) url(../img/papel.webp); background-size: 256px;
  box-shadow: 0 2px 2px rgba(60, 46, 26, .1), 0 10px 18px -8px rgba(60, 46, 26, .35);
  transform: rotate(-4deg); transition: transform .9s cubic-bezier(.3, .6, .2, 1);
}
.ap-tarjeta .script { font-size: clamp(24px, 7vw, 30px); font-weight: 700; line-height: 1.05; text-wrap: balance; text-align: center; }
.ap-tarjeta .rotulo { font-size: 14px; letter-spacing: .12em; }
.ap-monograma {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  opacity: 0; transform: scale(.85); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.ap-monograma .script { font-size: clamp(52px, 15vw, 70px); color: var(--oro); line-height: .9; }
.ap-monograma .script i { font-style: normal; font-size: .62em; margin: 0 .06em; color: var(--salvia); }
.ap-monograma .rotulo { font-size: 14px; letter-spacing: .14em; }
.ap-pista {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 10px 12px; cursor: pointer;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--tinta-2);
  animation: respira 2.6s ease-in-out infinite;
}
.ap-pulso { width: 12px; height: 12px; border-radius: 50%; background: var(--olivo); box-shadow: 0 0 0 0 rgba(110, 124, 80, .5); animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(110, 124, 80, .55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(110, 124, 80, 0); } }
@keyframes respira { 50% { opacity: .6; } }

.apertura.abre1 .ap-aro { transform: translate(190%, -95%) rotate(-28deg); opacity: 0; }
.apertura.abre1 .ap-flor { transform: translate(130%, -40%) rotate(40deg); opacity: 0; }
.apertura.abre1 .ap-pista { opacity: 0; animation: none; transition: opacity .3s; }
.apertura.abre2 .ap-servilleta { transform: translate(-70%, 70%) rotate(-62deg); opacity: 0; }
.apertura.abre2 .ap-euc { transform: translate(55%, -80%) rotate(-10deg); opacity: 0; }
.apertura.abre3 .ap-monograma { opacity: 1; transform: none; }
.apertura.abre3 .ap-tarjeta { transform: translateY(14%) rotate(-1.5deg); }
.apertura.abre4 .ap-escena { transform: scale(2.6); opacity: 0; }
.apertura.abre4 .ap-arriba { opacity: 0; transition: opacity .4s; }
.apertura.abre4 { opacity: 0; pointer-events: none; }

/* ================= PORTADA ================= */
.portada .t-portada { padding: 36px 28px 30px; }
.intro { font-style: italic; font-size: 16px; line-height: 1.55; color: var(--tinta-2); margin: 0 0 18px !important; text-wrap: balance; }
.nombres { font-size: clamp(46px, 13.6vw, 64px); margin: 4px -.2em 0; padding: 0 .2em; white-space: nowrap; }
.nombres i { font-style: normal; color: var(--oro); font-size: .7em; }
.bebe { font-size: clamp(46px, 13vw, 60px); margin: 4px -.2em 0; padding: 0 .2em; }
.fechas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px !important; font-family: var(--caps); font-size: 15px; letter-spacing: .18em; color: var(--tinta); }
.fechas .pleca { width: 1px; height: 18px; background: var(--oro-2); }
.d-euc1 { width: 210px; left: calc(50% - 235px); top: calc(50% - 300px); transform: rotate(28deg); }
.d-euc2 { width: 170px; right: calc(50% - 241px); bottom: calc(50% - 300px); transform: rotate(200deg); }
.d-flor1 { width: 92px; right: calc(50% - 193px); top: calc(50% - 292px); }
.d-flor2 { width: 64px; left: calc(50% - 189px); bottom: calc(50% - 280px); }
.desliza { position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; font-style: italic; font-size: 15px; color: var(--tinta-2); opacity: 0; transition: opacity 1s 3s; }
.desliza::after { content: ''; display: block; width: 1px; height: 26px; margin: 6px auto 0; background: linear-gradient(var(--oro), transparent); animation: baja 2s ease-in-out infinite; transform-origin: top; }
.portada.vista .desliza { opacity: 1; }
@keyframes baja { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ================= CALENDARIO ================= */
.t-cal { padding: 30px 22px 26px; }
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; margin: 16px 0 18px; font-variant-numeric: lining-nums tabular-nums; }
.mes span { position: relative; height: 38px; display: grid; place-items: center; font-size: 15px; color: var(--tinta-2); }
.mes .dsem { height: 26px; font-family: var(--caps); font-size: 14px; color: var(--oro); }
.mes .marcado b { position: relative; z-index: 1; font-weight: 600; font-size: 17px; color: var(--tinta); }
.leyenda { display: flex; justify-content: center; gap: 18px; margin: -6px 0 0 !important; font-style: italic; font-size: 15px; color: var(--tinta-2); flex-wrap: wrap; }
.leyenda i { display: inline-block; width: 14px; height: 12px; margin-right: 6px; border-radius: 50%; border: 1.6px solid var(--olivo); vertical-align: -1px; }
.ley-bautizo i { border-color: var(--oro-2); }
.circulo { position: absolute; inset: -3px -6px; width: calc(100% + 12px); height: calc(100% + 6px); overflow: visible; }
.circulo path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.5, .1, .3, 1) .4s; }
.boda .circulo path { stroke: var(--olivo); }
.bautizo .circulo path { stroke: var(--oro-2); }
.mes .boda .circulo path { transition-delay: 1.4s; }
.vista .circulo path { stroke-dashoffset: 0; }
.cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 26px 0 18px; }
.cuenta div { position: relative; padding: 10px 0 8px; background: #FDFBF6; box-shadow: 0 1px 1px rgba(60, 46, 26, .1), 0 6px 10px -6px rgba(60, 46, 26, .3); border-radius: 2px; }
.cuenta div::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(156, 123, 69, .16); }
.cuenta b { display: block; font-weight: 500; font-size: clamp(25px, 7.4vw, 30px); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.cuenta span { font-family: var(--caps); font-size: 14px; letter-spacing: .08em; color: var(--oro); }
.agendar-op { display: none; margin: 0; flex-direction: column; gap: 8px; align-items: center; }
.agendar-op .boton { min-height: 44px; width: min(100%, 250px); background: #FDFBF6; }
.agendar.abierto > .boton { display: none; }
.agendar.abierto .agendar-op { display: flex; }
.d-euc3 { width: 180px; left: calc(50% - 245px); bottom: calc(50% - 340px); transform: rotate(-24deg); }

/* ================= HISTORIA ================= */
.cab { max-width: 400px; }
.cab .titulo { font-size: clamp(24px, 6.6vw, 30px); }
.mesa-h { position: relative; width: min(78vw, 36svh, 320px); aspect-ratio: 1; margin: 6px 0; }
.mesa-h .mesa-svg, .mesa-r .mesa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-lugar, .lugar { position: absolute; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--a)); }
.h-lugar > span, .lugar > span { position: absolute; }
.l-bajo { inset: 0; }
.l-plato { inset: 13%; }
.l-serv { left: 33%; top: 18%; width: 34%; height: 64%; border-radius: 3px;
  background: url(../img/gasa-salvia.webp) 0 0 / 96px; box-shadow: 0 3px 5px -2px rgba(60, 46, 26, .35);
}
.l-serv::after { content: ''; position: absolute; left: -6%; right: -6%; top: 41%; height: 18%; border-radius: 3px; background: linear-gradient(#8E6D3B, #E9D6A4 40%, #C6A66B 60%, #8A6936); box-shadow: inset 0 0 0 1px rgba(126, 96, 48, .6); }
.h-bebe { width: 21%; }
.h-cuchara { width: 9%; left: 46%; top: 20%; }
.h-cuchara svg { width: 100%; height: auto; }
.h-bebe { opacity: 0; transform: translate(-50%, -120%) rotate(var(--a)) scale(.6); transition: opacity .8s ease, transform 1.2s cubic-bezier(.2, .9, .3, 1.2); }
.historia.llega .h-bebe { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)); }
.h-centro { position: absolute; width: 22%; left: 39%; top: 39%; }
.h-centro svg { width: 100%; height: auto; }
.frase { margin: 0; min-height: 3.2em; font-style: italic; font-size: 18px; line-height: 1.5; max-width: 330px; }
.frase span { display: block; transition: opacity 1s ease, transform 1s ease; }
.frase .f1 { opacity: 0; transform: translateY(8px); }
.frase .f2 { opacity: 0; transform: translateY(8px); }
.historia.vista .f1 { opacity: 1; transform: none; transition-delay: .5s; }
.historia.llega .f2 { opacity: 1; transform: none; transition-delay: .6s; }
.frase b { font-weight: 500; color: var(--olivo); }

/* ================= LLEVAMOS JUNTOS ================= */
.llevamos { gap: 14px; }
.lj-titulo { font-size: clamp(48px, 13.5vw, 60px); margin: 2px 0 0; }
.fotos { position: relative; width: min(60vw, 31svh, 250px); aspect-ratio: .82; margin: 4px 0 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fotos:focus-visible { outline: 2px solid var(--olivo); outline-offset: 8px; }
.foto {
  position: absolute; inset: 0; margin: 0; padding: 7% 7% 0;
  display: flex; flex-direction: column;
  background: #FFFEFA; box-shadow: 0 1px 1px rgba(60, 46, 26, .1), 0 10px 18px -8px rgba(60, 46, 26, .42);
  transition: transform .65s cubic-bezier(.3, .7, .2, 1), opacity .45s ease;
}
.foto[data-pos="0"] { z-index: 3; transform: rotate(-2.5deg); }
.foto[data-pos="1"] { z-index: 2; transform: translate(9px, 6px) rotate(4deg); }
.foto[data-pos="2"] { z-index: 1; transform: translate(-10px, 9px) rotate(-8deg); }
.foto.sale { transform: translate(78%, -8%) rotate(16deg); transition: transform .48s cubic-bezier(.5, 0, .7, .4); }
.foto-img { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--oro); background: linear-gradient(160deg, #DFE6D6, #C3CEB7 70%, #B4C1A8); }
.f1 .foto-img { background: linear-gradient(160deg, #F1E7DD, #E5D3C6 70%, #DCC5B6); }
.f2 .foto-img { background: linear-gradient(160deg, #EFEADD, #DED5C1 70%, #D2C7AF); }
.foto-img::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(60, 46, 26, .06); }
.camara { width: 44px; height: 36px; }
.foto-img span { font-family: var(--caps); font-size: 14px; letter-spacing: .12em; color: var(--tinta-2); }
.foto figcaption { flex: 1; display: grid; place-items: center; font-size: clamp(26px, 7.4vw, 32px); color: var(--tinta); padding: 2px 0 4px; }
.contador { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 360px); }
.ct { position: relative; padding: 11px 4px 9px; background: var(--marfil) url(../img/papel.webp); background-size: 256px; box-shadow: 0 1px 1px rgba(60, 46, 26, .1), 0 6px 12px -6px rgba(60, 46, 26, .32); border-radius: 2px; }
.ct::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(156, 123, 69, .32); pointer-events: none; }
.ct b { display: block; font-weight: 500; font-size: clamp(23px, 6.6vw, 28px); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.ct span { font-family: var(--caps); font-size: 14px; letter-spacing: .1em; color: var(--oro); }
.ct.ancho { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 10px; }
.ct.ancho b { font-size: clamp(26px, 7.6vw, 33px); color: var(--olivo); }
.ct.ancho span { text-align: left; line-height: 1.2; letter-spacing: .08em; }

/* ================= BAUTIZO ================= */
.bautizo { gap: 10px; }
.camino { position: absolute; left: -10%; right: -10%; top: 6%; height: 46%; transform: rotate(-9deg);
  background: linear-gradient(90deg, rgba(231, 210, 200, 0), rgba(231, 210, 200, .75) 18%, rgba(236, 219, 211, .8) 50%, rgba(231, 210, 200, .75) 82%, rgba(231, 210, 200, 0));
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.pila-caja { position: relative; width: min(62vw, 30svh, 260px); aspect-ratio: 1; }
.pila { position: absolute; inset: 0; touch-action: pan-y; cursor: pointer; }
.pila-borde { position: absolute; inset: -6%; width: 112%; height: 112%; }
.agua { position: absolute; left: 12.6%; top: 12.6%; width: 74.8%; height: 74.8%; border-radius: 50%; }
.pila-luz { position: absolute; left: 12.6%; top: 12.6%; width: 74.8%; height: 74.8%; border-radius: 50%; box-shadow: inset 0 6px 14px rgba(40, 52, 36, .28), inset 0 -2px 6px rgba(255, 255, 255, .5); pointer-events: none; }
.d-concha { width: 40%; right: -14%; top: 64%; transform: rotate(-24deg); }
.d-euc4 { width: 66%; left: -40%; top: -6%; transform: rotate(52deg); }
.pista-agua { position: absolute; left: 0; right: 0; bottom: -30px; margin: 0; font-style: italic; font-size: 15px; color: var(--tinta-2); transition: opacity .6s; }
.pista-agua.ya { opacity: 0; }
.t-bautizo { padding: 26px 24px 22px; margin-top: 26px; }
.bebe2 { font-size: clamp(50px, 14vw, 62px); margin: 2px 0 0; }
.padrinos { font-size: 17px; line-height: 1.45; }
.cita { display: flex; flex-direction: column; margin: 14px 0 14px !important; }
.cita b { font-weight: 500; font-size: 17px; }
.cita span { font-style: italic; color: var(--tinta-2); }
.nota { margin-top: 14px !important; font-style: italic; font-size: 15px; color: var(--tinta-2); text-wrap: balance; }

/* ================= BODA ================= */
.t-boda { padding: 30px 22px 26px; }
.completo { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 5.4vw, 22px); line-height: 1.25; margin: 6px 0 0; text-wrap: balance; }
.y { font-size: 44px; color: var(--oro); line-height: .8; margin: 2px 0 -4px !important; }
.c-boda { margin: 12px 0 0 !important; }
.c-boda b { font-size: 16px; }
.bendicion { font-style: italic; font-size: 16px; color: var(--tinta-2); text-wrap: balance; }
.papas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center; }
.papas p:not(.sub) { font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.papas .sub { margin-top: 14px; line-height: 1.25; }
.cielo { position: relative; }
.en-cielo { display: block; margin-top: 3px; font-style: italic; font-size: 14px; color: var(--oro); text-wrap: balance; }
.cruz { font-style: normal; display: inline-block; margin-right: 2px; }
.boda.vista .en-cielo { animation: brillo 3.4s ease-in-out 1.2s 2; }
@keyframes brillo { 50% { color: var(--oro-2); text-shadow: 0 0 10px rgba(199, 169, 112, .55); } }
.velacion { font-size: 15px; line-height: 1.45; }
.d-anillos { width: 92px; right: calc(50% - 187px); top: calc(50% - 330px); transform: rotate(-14deg); }
.d-euc5 { width: 200px; left: calc(50% - 259px); bottom: calc(50% - 350px); transform: rotate(-40deg); }

/* ================= DÓNDE ================= */
.donde { gap: 14px; }
.t-lugar { padding: 22px 20px 20px; }
.t-lugar .icono { width: 44px; height: 44px; margin: 0 auto 4px; color: var(--oro); }
.t-lugar h3 { margin: 0; font-weight: 500; font-size: 21px; line-height: 1.2; }
.dir { font-style: italic; font-size: 15px; color: var(--tinta-2); margin-top: 2px !important; }
.horas { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.horas li { display: flex; flex-direction: column; }
.horas span { font-family: var(--caps); font-size: 14px; letter-spacing: .12em; color: var(--oro); }
.horas b { font-weight: 500; font-size: 16px; }
.botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.botones .boton { min-height: 44px; padding: 8px 18px; }

/* ================= PROGRAMA ================= */
.servicio { position: relative; width: min(94vw, 64svh, 420px); aspect-ratio: .86; }
.servicio > div { position: absolute; }
.s-bajo { width: 86%; left: 7%; top: 7%; }
.s-plato { width: 66%; left: 17%; top: 16.5%; }
.s-tenedor { width: 5%; left: 0; top: 18%; }
.s-cuchillo { width: 5%; right: 3.4%; top: 16%; }
.s-cuchara { width: 6%; right: -2.4%; top: 18%; }
.s-tenedor svg, .s-cuchillo svg, .s-cuchara svg { width: 100%; height: auto; }
.s-copa { width: 14%; right: 1%; top: 3%; }
.menu {
  position: absolute; left: 15%; top: 3.5%; width: 70%; aspect-ratio: .74;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10% 9% 9%; border-radius: 50%;
  background: var(--marfil) url(../img/papel.webp); background-size: 256px;
  box-shadow: 0 2px 2px rgba(60, 46, 26, .12), 0 14px 22px -10px rgba(60, 46, 26, .4);
}
.menu::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(156, 123, 69, .45); }
.m-dia { margin: 2px 0 8px; font-style: italic; font-size: 16px; color: var(--tinta-2); }
.menu ol { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.menu li { display: flex; flex-direction: column; line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(.5s + var(--i) * .22s); }
.programa.vista .menu li { opacity: 1; transform: none; }
.menu time { font-family: var(--caps); font-size: 14px; letter-spacing: .1em; color: var(--oro); }
.menu time small { font-size: 1em; }
.menu li span { font-size: 16px; }
.menu li:last-child span { font-style: italic; color: var(--olivo); }
.m-hoja { margin-top: 8px; }

/* ================= VESTIMENTA ================= */
.t-vest { padding: 30px 24px 26px; }
.siluetas { display: flex; justify-content: center; gap: 22px; margin: 14px 0 10px; color: var(--oro); }
.siluetas svg { width: 54px; height: 92px; }
.muestra { position: relative; width: 210px; margin: 8px auto 14px; }
.tela-blanca { width: 150px; margin-left: 4px; transform: rotate(-4deg); }
.etiqueta {
  position: absolute; right: -6px; top: 18px; padding: 8px 10px 8px 14px;
  background: #FDFBF6; color: var(--olivo); font-family: var(--caps); font-size: 14px; letter-spacing: .06em; line-height: 1.15; text-align: left;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  box-shadow: 0 4px 8px -4px rgba(60, 46, 26, .4);
  transform: rotate(7deg);
}
.etiqueta .hilo { position: absolute; left: 7px; top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--lino); box-shadow: inset 0 0 0 1px rgba(110, 124, 80, .5); }
.vest-nota, .t-vest .nota { margin-top: 6px !important; }
.d-euc6 { width: 200px; right: calc(50% - 261px); top: calc(50% - 330px); transform: rotate(150deg); }

/* ================= SOBRES Y ÁLBUM ================= */
.detalles { gap: 22px; }
.t-sobres, .t-album { padding: 24px 22px 20px; }
.t-sobres p:not(.rotulo), .t-album p:not(.rotulo) { font-size: 16px; line-height: 1.5; margin-top: 6px !important; text-wrap: balance; }
.caja { position: relative; display: block; width: 150px; height: 104px; margin: -4px auto 6px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.caja:active .caja-svg { transform: translateY(2px); }
.caja-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.sobres-caen { position: absolute; left: 0; right: 0; top: -50px; height: 90px; z-index: 1; }
.sobre { position: absolute; left: calc(50% - 26px + var(--x)); top: 0; width: 52px; animation: cae 1.15s cubic-bezier(.5, 0, .7, .4) forwards; }
.sobre svg { width: 100%; height: auto; }
@keyframes cae { 0% { transform: translateY(-30px) rotate(var(--g)); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(60px) rotate(calc(var(--g) * .2)); opacity: 1; } 100% { transform: translateY(78px) rotate(0); opacity: 0; } }
.polaroids { position: relative; height: 92px; margin: -2px auto 8px; width: 210px; }
.pol { position: absolute; top: 4px; width: 70px; height: 82px; padding: 6px 6px 18px; background: #FFFEFA; box-shadow: 0 2px 2px rgba(60, 46, 26, .12), 0 8px 12px -6px rgba(60, 46, 26, .35); display: grid; place-items: center; }
.pol::before { content: ''; position: absolute; inset: 6px 6px 18px; background: linear-gradient(160deg, #DCE3D2, #C2CDB5); }
.pol svg { position: relative; width: 82%; height: auto; }
.pol.p1 { left: 8px; transform: rotate(-9deg); }
.pol.p2 { left: 70px; top: 0; transform: rotate(3deg); z-index: 1; }
.pol.p2::before { background: linear-gradient(160deg, #EFE6DA, #E2D2C4); }
.pol.p3 { left: 132px; transform: rotate(11deg); }
.pol.p3::before { background: linear-gradient(160deg, #EAE5D6, #D8D0BC); }
.t-album .boton { margin-top: 12px; }

/* ================= CONFIRMAR ================= */
.confirmar { gap: 12px; }
.para { font-size: clamp(40px, 11.5vw, 54px); margin: 4px 0 2px !important; }
.reserva { margin: 0; font-size: 17px; }
.reserva b { font-weight: 600; color: var(--olivo); }
.mesa-r { position: relative; width: min(86vw, 40svh, 340px); aspect-ratio: 1; }
.lugar { width: 28%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.lugar .l-bajo, .lugar .l-plato, .lugar .l-serv, .lugar .l-copa { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1.25); }
.lugar .l-bajo { opacity: .5; }
.lugar .l-plato, .lugar .l-serv { opacity: 0; transform: scale(.6); }
.lugar .l-copa { width: 28%; right: -6%; top: -8%; opacity: 0; transform: translateY(-14px); }
.lugar .l-copa svg { width: 100%; height: auto; }
.lugar .l-marca { inset: 30%; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed rgba(110, 124, 80, .7); color: var(--olivo); font-size: 20px; line-height: 1; background: rgba(248, 244, 234, .7); transition: opacity .3s, transform .3s; transform: rotate(calc(var(--a) * -1)); }
.lugar.ocupado .l-bajo { opacity: 1; }
.lugar.ocupado .l-plato, .lugar.ocupado .l-serv { opacity: 1; transform: none; }
.lugar.ocupado .l-copa { opacity: 1; transform: none; transition-delay: .12s; }
.lugar.ocupado .l-marca { opacity: 0; transform: scale(.4); }
.lugar:focus-visible { outline: 2px solid var(--olivo); outline-offset: 2px; }
.r-centro { position: absolute; left: 36%; top: 34%; width: 28%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.r-centro svg { width: 80%; height: auto; }
.r-cuenta { margin-top: -4px; font-family: var(--caps); font-size: 14px; letter-spacing: .08em; color: var(--oro); white-space: nowrap; }
.r-cuenta b { font-family: var(--serif); font-size: 17px; color: var(--tinta); }
.pista-r { margin: 0; font-style: italic; font-size: 16px; color: var(--tinta-2); transition: color .3s; }
.pista-r.marca { color: var(--oro); }
.mesa-r.avisa .lugar:not(.ocupado) .l-marca { animation: avisa .5s ease 2; }
@keyframes avisa { 50% { transform: rotate(calc(var(--a) * -1)) scale(1.25); border-color: var(--oro); } }
.acciones { display: flex; flex-direction: column; gap: 8px; width: min(100%, 300px); }
.limite { margin: 2px 0 0; font-size: 15px; font-style: italic; color: var(--tinta-2); }
.confirmar.respondida > :not(.brindis) { opacity: .0; pointer-events: none; transition: opacity .5s; }
.brindis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; }
.brindis[hidden] { display: none; }
.copas { position: relative; width: 210px; height: 170px; }
.copas > span { position: absolute; bottom: 0; width: 92px; }
.copas > span svg { width: 100%; height: auto; }
.copa-i { left: 8px; transform-origin: 50% 100%; }
.copa-d { right: 8px; transform-origin: 50% 100%; }
.choca .copa-i { animation: copa-i 1.5s cubic-bezier(.4, 0, .2, 1) forwards; }
.choca .copa-d { animation: copa-d 1.5s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes copa-i { 0% { transform: translate(-40px, 20px) rotate(-6deg); opacity: 0; } 30% { opacity: 1; } 55% { transform: translate(12px, -6px) rotate(16deg); } 62% { transform: translate(8px, -6px) rotate(13deg); } 100% { transform: translate(4px, 0) rotate(10deg); } }
@keyframes copa-d { 0% { transform: translate(40px, 20px) rotate(6deg); opacity: 0; } 30% { opacity: 1; } 55% { transform: translate(-12px, -6px) rotate(-16deg); } 62% { transform: translate(-8px, -6px) rotate(-13deg); } 100% { transform: translate(-4px, 0) rotate(-10deg); } }
.chispas { position: absolute; left: 50%; top: 22px; width: 0; height: 0; }
.chispas i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--oro-2); box-shadow: 0 0 6px rgba(231, 205, 140, .9); animation: chispa .9s ease-out forwards; }
@keyframes chispa { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.salud { font-size: 60px; color: var(--olivo); margin-top: 6px !important; }
.b-texto { margin: 0; font-size: 18px; line-height: 1.5; max-width: 320px; }
.b-texto small { display: block; margin-top: 10px; font-size: 14px; font-style: italic; color: var(--tinta-2); }
.brindis.triste .copas { display: none; }
.brindis.triste .salud { color: var(--oro); font-size: 46px; text-wrap: balance; }

/* ================= CIERRE ================= */
.cierre .corona { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.c-euc1 { width: 210px; left: -240px; top: -260px; transform: rotate(40deg); }
.c-euc2 { width: 210px; left: 30px; top: 150px; transform: rotate(220deg); }
.c-flor1 { width: 86px; left: 90px; top: -300px; }
.c-flor2 { width: 60px; left: -170px; top: 200px; }
.t-cierre { padding: 34px 26px 30px; }
.cierre-txt { font-style: italic; font-size: 18px; line-height: 1.55; margin-top: 6px !important; text-wrap: balance; }
.con-amor { margin-top: 18px !important; font-size: 15px; color: var(--tinta-2); }
.firma { font-size: clamp(40px, 11vw, 50px); margin-top: 4px !important; }

/* ================= TUS LUGARES y MÚSICA (flotantes) ================= */
.mi-lugar, .musica {
  position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
  background: var(--marfil) url(../img/papel.webp); background-size: 256px;
  box-shadow: 0 2px 2px rgba(60, 46, 26, .1), 0 10px 18px -8px rgba(60, 46, 26, .45);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s;
  -webkit-tap-highlight-color: transparent;
}
.mi-lugar { right: 12px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border-radius: 999px; text-decoration: none; font-family: var(--caps); font-size: 14px; letter-spacing: .08em; color: var(--olivo); }
.mi-lugar::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(156, 123, 69, .4); pointer-events: none; }
.mi-lugar i { font-style: normal; font-size: 18px; line-height: 1; color: var(--oro); }
.musica { left: 12px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--oro); cursor: pointer; }
.musica svg { width: 20px; height: 20px; }
body.abierta .mi-lugar, body.abierta .musica { opacity: 1; pointer-events: auto; }
body.abierta.en-mesa .mi-lugar, body.abierta.en-mesa .musica { opacity: 0; pointer-events: none; transform: translateY(16px); }
.aviso {
  position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 30; margin: 0;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 14px;
  background: rgba(58, 69, 49, .94); color: #F7F3E8; font-style: italic; font-size: 15px; text-align: center; text-wrap: balance;
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .35s, transform .35s;
}
.aviso.ve { opacity: 1; transform: translate(-50%, 0); }

/* ================= pantallas bajitas ================= */
/* OJO: «390×844» es la pantalla entera. Dentro de WhatsApp o Safari se ven ~664-780 px de alto,
   así que casi todos los celulares caen en uno de estos dos niveles. */
@media (min-height: 741px) and (max-height: 820px) {
  .escena { padding: 52px 16px; }
  .pila-caja { width: min(58vw, 26svh, 240px); }
  .t-bautizo { margin-top: 20px; padding: 22px 22px 20px; }
  .donde { gap: 10px; }
  .t-lugar { padding: 18px 18px 16px; }
  .t-lugar .icono { width: 34px; height: 34px; margin-bottom: 2px; }
  .mi-lugar, .musica { bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (max-height: 740px) {
  .escena { padding: 46px 14px; gap: 10px; }
  .mi-lugar, .musica { bottom: calc(6px + env(safe-area-inset-bottom)); height: 36px; }
  .musica { width: 36px; }
  .mi-lugar { padding: 0 12px 0 14px; }
  .lj-titulo { font-size: 44px; }
  .fotos { width: min(56vw, 29svh, 230px); margin: 0 0 6px; }
  .ct { padding: 8px 4px 6px; }
  .ct.ancho { padding: 8px 10px; }
  .tarjeta { padding: 24px 20px; }
  .portada .t-portada { padding: 26px 22px 22px; }
  .intro { font-size: 15px; margin-bottom: 12px !important; }
  .nombres { font-size: 52px; }
  .bebe { font-size: 44px; }
  .mes span { height: 32px; }
  .mes .dsem { height: 22px; }
  .cuenta { margin: 18px 0 12px; }
  .t-bautizo { margin-top: 18px; padding: 20px 20px 18px; }
  .bebe2 { font-size: 46px; }
  .cita { margin: 10px 0 !important; }
  .nota { margin-top: 10px !important; }
  .t-boda { padding: 22px 18px 20px; }
  .papas .sub { margin-top: 8px; }
  .sub { margin-top: .7em; }
  .t-lugar { padding: 16px 16px; }
  .t-lugar .icono { width: 34px; height: 34px; }
  .horas { margin: 8px 0; }
  .siluetas svg { width: 44px; height: 76px; }
  .detalles { gap: 14px; }
  .caja { width: 120px; height: 84px; }
  .polaroids { height: 76px; transform: scale(.85); margin-bottom: 0; }
  .para { font-size: 38px; }
  .pila-caja { width: min(56vw, 23svh); }
  .pista-agua { bottom: -26px; }
  .t-bautizo { margin-top: 22px; }
  .padrinos { font-size: 16px; }
  .donde { gap: 10px; }
  .donde .cab .titulo { font-size: 24px; }
  .t-lugar .icono { display: none; }
  .t-lugar h3 { font-size: 19px; }
  .t-lugar .dir { font-size: 14px; }
  .horas b { font-size: 15px; }
  .botones .boton { min-height: 40px; padding: 6px 16px; }
  .caja { width: 96px; height: 66px; margin-bottom: 2px; }
  .sobres-caen { top: -36px; transform: scale(.75); }
  .polaroids { height: 66px; transform: scale(.72); transform-origin: 50% 0; margin: 0 auto 2px; }
  .t-sobres, .t-album { padding: 18px 18px 16px; }
  .t-sobres p:not(.rotulo), .t-album p:not(.rotulo) { font-size: 15px; }
  .t-album .boton { margin-top: 8px; min-height: 40px; }
}

@media (max-height: 660px) {
  .escena { padding: 42px 14px; }
  .mesa-r { width: min(86vw, 37svh, 340px); }
  .pila-caja { width: min(56vw, 19svh); }
  .t-bautizo { margin-top: 14px; }
}
/* nombres de familia largos (2 renglones) */
.para.largo { font-size: clamp(32px, 9.4vw, 44px); }
/* celulares muy angostos (320 px) */
@media (max-width: 340px) {
  .mes span { height: 28px; }
  .mes .dsem { height: 20px; }
  .cuenta { margin: 12px 0 10px; }
  .cuenta b { font-size: 22px; }
  .t-boda .completo { font-size: 17px; }
  .papas { gap: 8px; }
  .papas p:not(.sub) { font-size: 14px; }
  .bendicion { font-size: 15px; }
  .t-boda .sub { margin-top: .5em; }
  .mesa-r { width: min(82vw, 34svh); }
}

@media (prefers-reduced-motion: reduce) {
  .pone { opacity: 1; transform: rotate(var(--r, 0deg)); transition: none; }
  .vista .escribe { animation: none; -webkit-mask-image: none; mask-image: none; }
  .ap-pista, .ap-pulso, .desliza::after, .sombras { animation: none; }
  .deco { opacity: 1; translate: 0 0; transition: none; }
}