/* Secciones de la invitación Azul Porcelana. Cada una es una composición de papelería sobre la mesa de lino. */
.seccion{position:relative;padding:16vh 20px;display:flex;flex-direction:column;align-items:center;overflow:clip}
.seccion + .seccion{padding-top:6vh}
.titulo-sec{text-align:center;margin:0 0 6vh}
.titulo-sec small{display:block;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:10px}
.titulo-sec h2{font-family:var(--f-firma);font-weight:400;font-size:clamp(46px,12vw,72px);line-height:1;margin:0;color:var(--tinta)}
.titulo-sec .filete{display:block;width:64px;height:1px;margin:18px auto 0;background:linear-gradient(90deg,transparent,var(--oro),transparent)}

/* Papel genérico: algodón marfil con textura y sombra de apoyo */
.papel{position:relative;background:var(--marfil);color:var(--tinta);
  box-shadow:0 1px 1px rgba(var(--sombra-rgb),.12),0 14px 28px -12px rgba(var(--sombra-rgb),.28)}
.papel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .57 0 0 0 0 .5 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E")}
.papel > *{position:relative}
.filete-doble{position:absolute!important;inset:10px;border:1px solid rgba(var(--oro-rgb),.55);pointer-events:none}
.filete-doble::after{content:"";position:absolute;inset:3px;border:.5px solid rgba(var(--oro-rgb),.35)}
/* papel vegetal (vellum) translúcido */
.vegetal{background:rgba(250,252,255,.78);backdrop-filter:blur(1.2px);-webkit-backdrop-filter:blur(1.2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 12px 26px -14px rgba(var(--noche-rgb),.35)}

/* Botón de papelería (píldora fina) */
.boton{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 26px;border-radius:999px;cursor:pointer;
  font-family:var(--f-serif);font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  color:var(--tinta);background:transparent;border:1px solid rgba(var(--tinta-rgb),.55);transition:background .3s,color .3s,transform .2s}
.boton.lleno{background:var(--tinta);color:var(--marfil);border-color:var(--tinta)}
.boton:active{transform:scale(.97)}
/* Confirmar siempre a la vista (se oculta en la sección de confirmar y tras confirmar) */
.confirmar-fijo{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));translate:-50% 0;z-index:40;box-shadow:0 8px 22px -8px rgba(var(--noche-rgb),.5);
  opacity:0;pointer-events:none;transition:opacity .6s var(--suave),translate .6s var(--suave)}
.abierto .confirmar-fijo{opacity:1;pointer-events:auto;transition-delay:1.6s}
.abierto .confirmar-fijo.oculto{opacity:0;pointer-events:none;translate:-50% 14px;transition-delay:0s}
@media (max-width:700px){.confirmar-fijo{left:max(16px,env(safe-area-inset-left));translate:none;bottom:calc(16px + env(safe-area-inset-bottom));min-height:42px;padding:10px 20px}
  .abierto .confirmar-fijo.oculto{translate:0 14px}}
@media (hover:hover){.boton:hover{background:var(--tinta);color:var(--marfil)}.boton.lleno:hover{background:var(--tinta-osc)}}

/* Aparición al bajar: cada pieza se posa sobre la mesa */
.aparece{opacity:0;transform:translateY(34px) rotate(var(--giro,0deg)) scale(.98);transition:opacity 1.2s var(--suave),transform 1.4s var(--suave);transition-delay:var(--d,0s)}
.aparece.visto{opacity:1;transform:translateY(0) rotate(var(--giro,0deg))}

/* ---------- Historia: fotos impresas y video ---------- */
.historia{width:min(92vw,880px);display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.fotos-mesa{position:relative;height:min(100vw,560px);width:min(100%,460px);margin:0 auto}
.impresa{position:absolute;background:#fff;padding:3.2%;padding-bottom:10%;box-shadow:0 1px 1px rgba(var(--sombra-rgb),.15),0 16px 30px -14px rgba(var(--sombra-rgb),.35)}
.impresa img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92) contrast(.98)}
.impresa figcaption{position:absolute;left:0;right:0;bottom:2.6%;text-align:center;font-family:var(--f-firma);font-size:clamp(16px,4.4vw,22px);color:var(--tinta-suave)}
.f1{width:50%;left:4%;top:3%;--giro:-5deg}
.f2{width:48%;right:2%;top:12%;--giro:4deg;z-index:2}
.f3{width:42%;left:22%;bottom:0;--giro:-1.5deg;z-index:3}
.fotos-mesa .h-hortensia{width:34%;right:-6%;bottom:2%;z-index:4}
.nota-historia{padding:12% 10% 11%;text-align:center}
.nota-historia p{margin:0;font-style:italic;font-size:clamp(19px,4.8vw,22px);line-height:1.5;color:var(--tinta-suave)}
.nota-historia .firma{display:block;margin-top:18px;font-family:var(--f-firma);font-style:normal;font-size:34px;color:var(--tinta)}
.video-tarjeta{display:flex;align-items:center;gap:16px;margin:22px auto 0;padding:10px 22px 10px 10px;border-radius:999px;border:1px solid rgba(var(--tinta-rgb),.3);background:rgba(var(--marfil-rgb),.7);cursor:pointer;color:var(--tinta);font:inherit}
.video-tarjeta .play{width:44px;height:44px;border-radius:50%;background:var(--tinta);color:var(--marfil);display:grid;place-items:center}
.video-tarjeta span{font-size:14px;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
@media (min-width:860px){.historia{grid-template-columns:1.15fr 1fr;gap:56px}.fotos-mesa{height:560px}}

/* ---------- Cuenta regresiva sobre forro de porcelana ---------- */
.cuenta-mesa{position:relative;width:min(88vw,520px);aspect-ratio:1.45}
.cuenta-mesa .forro{position:absolute;inset:6% 4% 0 8%;background:url(assets/forro-porcelana.jpg) center/cover;--giro:-3deg;
  box-shadow:0 1px 1px rgba(var(--noche-rgb),.15),0 16px 30px -14px rgba(var(--noche-rgb),.35)}
.cuenta-mesa .vegetal{position:absolute;inset:0 6% 10% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;--giro:1.5deg}
.reloj{display:flex;gap:clamp(12px,4vw,30px);align-items:flex-start}
.reloj div{text-align:center;min-width:3ch}
.reloj b{display:block;font-size:clamp(40px,11vw,62px);font-weight:500;line-height:1;color:var(--tinta);font-variant-numeric:lining-nums tabular-nums}
.reloj small{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-suave)}
.cuenta-mesa .c-sello{position:absolute;width:20%;right:0;top:-4%;z-index:3}
.cuenta-pie{font-style:italic;font-size:18px;color:var(--tinta-suave);margin:0}

/* ---------- Lugares: acuarela de la hacienda y tarjetas de cada momento ---------- */
.lugares{width:min(92vw,760px);display:flex;flex-direction:column;align-items:center}
.acuarela{width:100%;padding:3% 3% 10%;--giro:-1deg}
.acuarela img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 60%,transparent 100%)}
.acuarela .nombre-lugar{position:absolute;left:0;right:0;bottom:3.5%;text-align:center}
.acuarela .nombre-lugar b{display:block;font-size:clamp(20px,5vw,26px);font-weight:600;letter-spacing:.05em}
.acuarela .nombre-lugar span{font-style:italic;color:var(--tinta-suave)}
.momentos{display:grid;grid-template-columns:1fr;gap:22px;width:100%;margin-top:34px;padding:0 2%}
.momento{padding:30px 22px 26px;text-align:center}
.momento h3{font-family:var(--f-firma);font-weight:400;font-size:44px;line-height:1;margin:0 0 8px}
.momento .hora{display:block;font-size:13px;letter-spacing:.38em;text-transform:uppercase;margin-bottom:10px}
.momento p{margin:0 0 18px;font-size:18px;line-height:1.4}
.momento p small{display:block;font-style:italic;color:var(--tinta-suave);font-size:.9em}
.momento:nth-child(1){--giro:-1.2deg}.momento:nth-child(2){--giro:1deg}
.momento.oscuro{background:var(--tarjeta-oscura);color:var(--marfil)}
.momento.oscuro::before{opacity:.35}
.momento.oscuro .boton{color:var(--marfil);border-color:rgba(var(--marfil-rgb),.6)}
.momento.oscuro .filete-doble{border-color:rgba(var(--marfil-rgb),.35)}.momento.oscuro .filete-doble::after{border-color:rgba(var(--marfil-rgb),.2)}
.calendarios{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:12px}
.enlace-cal{background:none;border:0;font:inherit;font-style:italic;font-size:16px;color:var(--tinta-suave);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px}
@media (min-width:700px){.momentos{grid-template-columns:1fr 1fr;gap:26px}}

/* ---------- Itinerario: tarjeta angosta con borla ---------- */
.itinerario{position:relative;width:min(80vw,380px);padding:64px 34px 40px;--giro:1deg;--hw:84px;--sep:36px;--eje:calc(var(--hw) + var(--sep) / 2)}
.itinerario .borla{position:absolute;width:34px;right:22px;top:-26px;z-index:2;rotate:-8deg;filter:drop-shadow(0 6px 6px rgba(var(--noche-rgb),.25))}
.itinerario .ojal{position:absolute;right:34px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--lino-osc);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.itinerario ol{list-style:none;margin:0;padding:0;position:relative}
.itinerario ol::before{content:"";position:absolute;left:var(--eje,92px);top:6px;bottom:6px;width:1px;background:rgba(var(--oro-rgb),.6)}
.itinerario li{display:grid;grid-template-columns:var(--hw) 1fr;gap:var(--sep);padding:12px 0;position:relative}
.itinerario li::after{content:"";position:absolute;left:var(--eje,92px);top:50%;width:7px;height:7px;translate:-50% -50%;rotate:45deg;background:var(--marfil);border:1px solid var(--oro)}
.itinerario .h{text-align:right;white-space:nowrap;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave);align-self:center}
.itinerario .q{font-size:19px;font-style:italic}

/* ---------- Código de vestimenta: muestras de tela ---------- */
.vestimenta{width:min(88vw,560px);padding:46px 30px 40px;text-align:center;--giro:-.8deg}
.vestimenta .tipo{font-family:var(--f-firma);font-size:58px;line-height:1;margin:0}
.vestimenta p{margin:10px auto 0;font-size:18px;max-width:28ch;line-height:1.45}
.vestimenta .reservado{font-style:italic;color:var(--tinta-suave)}
.telas{display:flex;justify-content:center;gap:clamp(8px,3vw,16px);margin:26px 0 6px}
.tela{width:clamp(40px,11vw,56px);aspect-ratio:1;border-radius:50%;position:relative;box-shadow:0 2px 4px rgba(40,40,40,.15),inset 0 0 0 3px rgba(255,255,255,.5)}
.tela::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .4 0 0 0 0 .4 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E")}
.telas-pie{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-suave)}

/* ---------- Regalos: sobre pequeño ---------- */
.regalo{position:relative;width:min(84vw,460px)}
.mini-sobre{position:relative;width:100%;aspect-ratio:1.55;background:var(--acero);border-radius:2px;--giro:-2deg;box-shadow:0 1px 1px rgba(var(--noche-rgb),.15),0 18px 30px -14px rgba(var(--noche-rgb),.4)}
.mini-sobre::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 58%);background:url(assets/forro-porcelana.jpg) center top/cover}
.mini-sobre::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,0 100%,100% 100%,100% 0,50% 58%);background:linear-gradient(180deg,var(--sobre-solapa),var(--sobre-abajo))}
.regalo .tarjeta-regalo{position:relative;width:86%;margin:-40% auto 0;padding:30px 24px 28px;text-align:center;z-index:2;--giro:1.5deg}
.tarjeta-regalo h3{font-family:var(--f-firma);font-weight:400;font-size:44px;margin:0 0 8px;line-height:1}
.tarjeta-regalo p{margin:0;font-size:18px;line-height:1.45}
.cuenta-datos{margin-top:16px;font-size:16px;line-height:1.6}
.copiado{display:block;height:20px;font-size:13px;font-style:italic;color:var(--tinta-suave);margin-top:6px}

/* ---------- Confirmación ---------- */
.rsvp{position:relative;padding:56px 30px 46px;text-align:center;--giro:.8deg}
.rsvp h3{font-family:var(--f-firma);font-weight:400;font-size:clamp(52px,14vw,68px);margin:0;line-height:1}
.rsvp p{margin:10px 0 24px;font-style:italic;font-size:19px;color:var(--tinta-suave)}
.rsvp-mesa{position:relative;width:min(86vw,480px)}
.rsvp-mesa .rsvp{width:100%;position:relative;z-index:1}
.rsvp-mesa .r-flores{position:absolute;width:52%;left:-30%;bottom:-30%;z-index:0}
.rsvp-mesa .r-sello{position:absolute;width:20%;right:-5%;top:-9%;z-index:2}

/* Hoja del formulario: como una tarjeta que sube */
.hoja{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(var(--noche-rgb),.4);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .4s}
.hoja.abierta{opacity:1;pointer-events:auto}
.hoja-caja{width:min(100%,520px);max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:var(--marfil);border-radius:14px 14px 0 0;padding:34px 24px calc(28px + env(safe-area-inset-bottom));position:relative;transform:translateY(40px);transition:transform .5s var(--suave)}
.hoja.abierta .hoja-caja{transform:none}
@media (min-width:600px){.hoja{align-items:center}.hoja-caja{border-radius:4px}}
.hoja h3{font-family:var(--f-firma);font-weight:400;font-size:46px;text-align:center;margin:0 0 4px}
.hoja .sub{text-align:center;font-style:italic;color:var(--tinta-suave);margin:0 0 22px}
.cerrar{position:absolute;right:14px;top:10px;width:44px;height:44px;border:0;background:none;font-size:28px;color:var(--tinta);cursor:pointer}
.campo{margin-bottom:16px}
.campo > label,.campo > .etq{display:block;font-size:12px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:7px;color:var(--tinta)}
.campo input,.campo textarea,.campo select{width:100%;font:inherit;font-size:17px;color:var(--tinta);background:#fff;border:1px solid rgba(var(--tinta-rgb),.28);border-radius:6px;padding:12px 14px}
.campo textarea{min-height:84px;resize:vertical}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opciones label{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid rgba(var(--tinta-rgb),.3);border-radius:6px;cursor:pointer;font-size:17px;background:#fff}
.opciones input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opciones input:checked + span{font-weight:600}
.opciones label:has(input:checked){background:var(--tinta);color:var(--marfil);border-color:var(--tinta)}
.cantidad{display:flex;align-items:center;gap:16px}
.cantidad button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--tinta-rgb),.4);background:#fff;font-size:22px;color:var(--tinta);cursor:pointer}
.cantidad output{font-variant-numeric:lining-nums;font-size:24px;min-width:2ch;text-align:center}
.hoja .boton{width:100%;margin-top:6px}
.error-form{color:var(--rojo);font-size:15px;margin:6px 0 0;text-align:center}.error-form:empty{display:none}
.gracias{text-align:center;padding:20px 0}
.gracias h3{margin-bottom:10px}

/* ---------- Fotos de los invitados (QR) ---------- */
.compartir{width:min(88vw,520px);display:grid;grid-template-columns:1fr;gap:22px;align-items:center;padding:40px 28px;text-align:center;--giro:-1deg}
.compartir h3{font-family:var(--f-firma);font-weight:400;font-size:48px;margin:0;line-height:1}
.compartir p{margin:8px 0 0;font-size:18px;line-height:1.45}
.qr-marco{width:150px;margin:0 auto;padding:10px;background:#fff;box-shadow:0 0 0 1px rgba(var(--oro-rgb),.5)}
.qr-marco svg{display:block;width:100%;height:auto}
@media (min-width:640px){.compartir{grid-template-columns:auto 1fr;text-align:left}.qr-marco{margin:0}}
.compartir.solo-texto{grid-template-columns:1fr;text-align:center}

/* ---------- Cierre ---------- */
.cierre{text-align:center;padding-bottom:22vh;position:relative;overflow:hidden}
/* Pareja de papel calado sobre un arco azul noche: se levanta como tarjeta desplegable y luego se mece */
.arco-pareja{position:relative;z-index:1;width:min(74vw,330px);aspect-ratio:3/4;margin:0 auto 30px;border-radius:999px 999px 6px 6px;
  background:radial-gradient(ellipse at 50% 30%,var(--noche-claro),var(--noche) 75%);box-shadow:0 26px 40px -22px rgba(var(--noche-rgb),.6);perspective:900px;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;translate:0 30px;transition:opacity 1s var(--suave),translate 1.2s var(--suave)}
.filete-arco{position:absolute;inset:9px;border-radius:inherit;border:1px solid rgba(var(--oro-claro-rgb),.55);pointer-events:none}
.arco-pareja img{width:88%;margin-bottom:9%;transform-origin:50% 100%;transform:rotateX(78deg);opacity:0;filter:drop-shadow(0 6px 5px rgba(0,0,0,.35));
  transition:transform 1.8s cubic-bezier(.2,1.25,.4,1) .5s,opacity .6s ease .5s}
.arco-pareja.visto{opacity:1;translate:0 0}
.arco-pareja.visto img{transform:rotateX(0);opacity:1}
.arco-pareja.mece img{animation:mece 7s ease-in-out infinite}
@keyframes mece{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.lluvia{position:absolute;inset:0;pointer-events:none;z-index:2;--cae:1200px}
.lluvia img{position:absolute;top:-60px;left:var(--x);width:var(--t);opacity:.95;filter:drop-shadow(0 4px 4px rgba(40,40,40,.18));
  animation:cae var(--dur) linear var(--ret) infinite}
@keyframes cae{0%{transform:translate(0,0) rotate(var(--g0))}25%{transform:translate(var(--v),calc(var(--cae) * .25)) rotate(calc(var(--g0) + 80deg))}50%{transform:translate(calc(var(--v) * -.6),calc(var(--cae) * .5)) rotate(calc(var(--g0) + 170deg))}75%{transform:translate(var(--v),calc(var(--cae) * .75)) rotate(calc(var(--g0) + 260deg))}100%{transform:translate(0,var(--cae)) rotate(calc(var(--g0) + 340deg))}}
@media (prefers-reduced-motion:reduce){.lluvia{display:none}.arco-pareja.mece img{animation:none}}
.cierre .monograma{width:min(30vw,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:26px auto 0;
  background:radial-gradient(circle at 35% 30%,#fff,var(--lino));box-shadow:inset 0 0 0 6px rgba(255,255,255,.7),inset 0 0 0 7px rgba(var(--oro-rgb),.45),0 18px 30px -16px rgba(var(--sombra-rgb),.4)}
.cierre .monograma{container-type:inline-size}
.cierre .monograma span{font-family:var(--f-firma);font-size:29cqw;white-space:nowrap;color:var(--tinta);line-height:1;padding:0 .12em 0 0}
.cierre h2{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(34px,9vw,52px);margin:0;padding:0 16px;overflow-wrap:anywhere}
.cierre p{font-size:18px;color:var(--tinta-suave);font-style:italic;margin:10px 0 0}

/* Video a pantalla completa */
.cine{position:fixed;inset:0;z-index:70;background:rgba(var(--oscuro-rgb),.92);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s}
.cine.abierta{opacity:1;pointer-events:auto}
.cine .cine-fondo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.38);pointer-events:none;z-index:0;animation:kb-fondo 22s ease-out both}
@keyframes kb-fondo{from{transform:scale(1.12)}to{transform:scale(1.02)}}
.cine .cine-video{position:relative;z-index:1;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.cine video,.cine .carrusel{max-width:min(92vw,520px);max-height:84dvh;width:100%;aspect-ratio:4/5;object-fit:cover;background:#000}
.cine .carrusel{position:relative;overflow:hidden}
.cine .carrusel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.cine .carrusel img.on{opacity:1;animation:kb 6s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.cine .cerrar{color:#fff;right:12px;top:12px;position:fixed;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* Las flechas no tapan contenido: en celular quedan pequeñas y abajo a la derecha */
@media (max-width:700px){body .flechas{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));translate:none;flex-direction:row}body .flechas button{width:42px;height:42px}}
.reloj b,.fecha .num,.itinerario .h{font-variant-numeric:lining-nums tabular-nums}
.boton{letter-spacing:.18em}
[hidden]{display:none!important}
body{font-variant-numeric:lining-nums}

/* Mínimos de lectura en celular */
.titulo-sec small,.reloj small,.telas-pie,.momento .hora,.itinerario .h{font-size:max(12px,1em)}
@media (max-width:420px){.momento p,.vestimenta p,.tarjeta-regalo p,.compartir p{font-size:18px}.nota-historia p{font-size:19px}.boton{font-size:14px;padding:12px 20px}}

.momento.oscuro p small{color:var(--cielo-osc)}
/* Computador: aprovechar el espacio, todo más grande */
@media (min-width:900px){
  .seccion{padding:14vh 40px}
  .titulo-sec small{font-size:15px}
  .titulo-sec h2{font-size:96px}
  .historia{width:min(92vw,1140px)}
  .fotos-mesa{height:680px;width:min(100%,620px)}
  .nota-historia p{font-size:26px}.nota-historia .firma{font-size:44px}
  .cuenta-mesa{width:760px}
  .reloj b{font-size:92px}.reloj small{font-size:14px}.cuenta-pie{font-size:24px}
  .lugares{width:min(92vw,1080px)}
  .acuarela .nombre-lugar b{font-size:34px}.acuarela .nombre-lugar span{font-size:22px}
  .momento{padding:44px 34px 38px}.momento h3{font-size:62px}.momento .hora{font-size:16px}.momento p{font-size:23px}
  .boton{font-size:16px;min-height:54px;padding:14px 32px}
  .itinerario{width:600px;padding:80px 60px 56px;--hw:130px;--sep:56px;--eje:calc(var(--hw) + var(--sep) / 2)}
  .itinerario .h{font-size:16px}.itinerario .q{font-size:27px}.itinerario li{padding:18px 0}
  .itinerario .borla{width:46px}
  .vestimenta{width:760px;padding:64px 50px 54px}.vestimenta .tipo{font-size:82px}.vestimenta p{font-size:24px}
  .tela{width:76px}.telas-pie{font-size:14px}
  .regalo{width:660px}.tarjeta-regalo h3{font-size:62px}.tarjeta-regalo p{font-size:24px}
  .rsvp-mesa{width:680px}.rsvp{padding:76px 50px 60px}.rsvp h3{font-size:96px}.rsvp p{font-size:25px}
  .compartir{width:760px;padding:54px 46px;gap:40px}.compartir h3{font-size:68px}.compartir p{font-size:23px}.qr-marco{width:200px}
  .cierre .monograma{width:150px}.cierre h2{font-size:68px}.cierre p{font-size:24px}
}

/* ---------- Álbum de fotos que se hojea ---------- */
.album{position:relative;z-index:1;width:min(84vw,400px,calc(70dvh * .72));margin-bottom:56px;aspect-ratio:.72;perspective:1800px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer}
.album .lomo{position:absolute;left:-10px;top:-6px;bottom:-6px;right:-6px;border-radius:4px 10px 10px 4px;background:var(--noche);box-shadow:0 34px 60px -24px rgba(0,0,0,.8)}
.hoja-album{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.35,.6,.2,1),opacity .35s ease .8s}
.hoja-album.vuelta{transform:rotateY(-178deg);opacity:0}
.hoja-album:not(.vuelta){transition:transform 1.15s cubic-bezier(.35,.6,.2,1),opacity 0s}
.album .cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 8px 8px 2px;overflow:hidden}
.album .dorso{transform:rotateY(180deg);background:url(assets/forro-porcelana.jpg) center/cover}
.pag{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9% 10% 12%}
.pag.interior{background:var(--marfil) url(assets/tarjeta-algodon.webp) center/cover;color:var(--tinta)}
.pag.interior::before{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(90deg,rgba(var(--sombra-rgb),.22),transparent);pointer-events:none}
.pag.tapa{color:var(--oro-claro);background:radial-gradient(ellipse at 40% 30%,var(--noche-tapa),var(--noche-tapa-osc) 80%);gap:6px}
.pag.tapa::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.pag.tapa .marco{position:absolute;inset:7%;border:1px solid rgba(var(--oro-claro-rgb),.6);outline:1px solid rgba(var(--oro-claro-rgb),.3);outline-offset:5px}
.pag.tapa small{font-size:13px;letter-spacing:.38em;text-transform:uppercase}
.pag.tapa b{font-family:var(--f-firma);font-weight:400;font-size:clamp(60px,19vw,92px);line-height:1.15;margin:4px 0;padding-right:.1em}
.pag.tapa em{position:absolute;bottom:11%;font-size:14px;letter-spacing:.1em;opacity:.8}
.foto-album{position:relative;margin:0 0 7%;width:82%;rotate:var(--g);background:#fff;padding:3.5%;box-shadow:0 10px 18px -10px rgba(40,40,40,.45)}
.foto-album img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.foto-album i{position:absolute;width:18%;aspect-ratio:1;background:linear-gradient(135deg,var(--tinta) 50%,transparent 50%);opacity:.9}
.foto-album i:nth-of-type(1){left:-3%;top:-3%}
.foto-album i:nth-of-type(2){right:-3%;top:-3%;rotate:90deg}
.foto-album i:nth-of-type(3){right:-3%;bottom:-3%;rotate:180deg}
.foto-album i:nth-of-type(4){left:-3%;bottom:-3%;rotate:270deg}
.pag h4{font-family:var(--f-firma);font-weight:400;font-size:clamp(30px,8.5vw,42px);line-height:1.1;margin:0}
.pag p{font-style:italic;font-size:clamp(15px,4vw,18px);line-height:1.4;color:var(--tinta-suave);margin:6px 0 0}
.pag .num{position:absolute;bottom:4.5%;font-size:13px;letter-spacing:.2em;color:var(--tinta-suave)}
.video-album{width:90%;margin-bottom:7%;background:#000;box-shadow:0 10px 18px -10px rgba(40,40,40,.5)}
.cine .video-album video{display:block;width:100%;max-width:none;max-height:none;aspect-ratio:4/5;object-fit:cover}
.album-nav{position:absolute;left:0;right:0;bottom:calc(-1 * clamp(52px,8dvh,64px));display:flex;align-items:center;justify-content:center;gap:22px;color:#fff;font-size:14px;letter-spacing:.2em;cursor:default}
.album-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.album-nav button:disabled{opacity:.25;cursor:default}
.album-nav span{min-width:52px;text-align:center}
@media (prefers-reduced-motion:reduce){.hoja-album{transition:opacity .3s}}
@media (min-width:860px){
  .album{width:min(600px,calc(80dvh * .72));margin-bottom:64px}
  .pag h4{font-size:52px}.pag p{font-size:21px}.pag.tapa small{font-size:15px}.pag.tapa b{font-size:120px}.pag.tapa em{font-size:16px}
}
/* Dorso de las hojas: papel con las iniciales en marca de agua */
.album .papel-dorso{background:var(--marfil) url(assets/tarjeta-algodon.webp) center/cover;display:grid;place-items:center;border-radius:8px 2px 2px 8px}
.album .papel-dorso::after{content:"";position:absolute;inset:0 0 0 auto;width:9%;background:linear-gradient(270deg,rgba(var(--sombra-rgb),.22),transparent)}
.album .papel-dorso span{font-family:var(--f-firma);font-size:clamp(48px,9vw,96px);color:rgba(var(--tinta-rgb),.14);padding-right:.1em}
/* En pantallas anchas se abre como libro de dos páginas: la hoja que pasa se queda a la izquierda */
@media (min-width:700px){
  .album{width:min(600px,calc(80dvh * .72),44vw);transition:translate .9s cubic-bezier(.35,.6,.2,1)}
  .album.abierto{translate:50% 0}
  .album .lomo{transition:left .9s cubic-bezier(.35,.6,.2,1)}
  .album.abierto .lomo{left:calc(-100% - 10px);border-radius:10px}
  .hoja-album.vuelta{opacity:1}
  .album-nav{transition:left .9s,right .9s}
  .album.abierto .album-nav{left:-100%}
}
/* Página izquierda (dorso de la hoja): sombra del lomo a la derecha */
.album .dorso .pag.interior::before{inset:0 0 0 auto;background:linear-gradient(270deg,rgba(var(--sombra-rgb),.22),transparent)}
.pag .mono-album{font-family:var(--f-firma);font-weight:400;font-size:clamp(64px,10vw,110px);line-height:1.1;color:rgba(var(--tinta-rgb),.85);margin-bottom:10px;padding-right:.1em}
.pag.texto-final p{max-width:30ch;margin-top:12px}
/* Celular: no hay espacio para dos páginas; el libro se corre a la derecha y la hoja pasada queda asomada a la izquierda */
@media (max-width:699px){
  .album{width:min(76vw,400px,calc(70dvh * .72));transition:translate .9s cubic-bezier(.35,.6,.2,1)}
  .album.abierto{translate:13vw 0}
  .hoja-album.vuelta{opacity:1}
  .album .lomo{transition:left .9s cubic-bezier(.35,.6,.2,1)}
  .album.abierto .lomo{left:calc(-100% - 10px);border-radius:10px}
  .album.abierto .album-nav{translate:-13vw 0}
}
.cine{overflow:hidden}

/* =====================================================================
   CELULAR: escenas a pantalla completa (la versión de computador no cambia)
   ===================================================================== */
.solo-movil{display:none}
@media (max-width:699px){
  /* cada sección es una escena: ocupa la pantalla, su contenido va al centro y encaja al deslizar */
  html:has(body.abierto){scroll-snap-type:y proximity}
  .portada,.seccion{scroll-snap-align:start}
  .seccion,.seccion + .seccion{min-height:100svh;justify-content:center;padding:13vh 16px 15vh}
  .titulo-sec{margin-bottom:5vh;position:relative;z-index:2}
  .titulo-sec h2{font-size:clamp(56px,16vw,78px)}
  .titulo-sec small{font-size:13px}
  /* piezas más grandes, casi de borde a borde */
  .historia,.lugares{width:94vw}
  .fotos-mesa{height:min(112vw,600px)}
  .cuenta-mesa{width:88vw}
  .reloj b{font-size:clamp(46px,13vw,64px)}
  .itinerario{width:90vw;--hw:96px;--sep:34px;padding:66px 26px 44px}
  .itinerario .h{font-size:14px}.itinerario .q{font-size:22px}.itinerario li{padding:15px 0}
  .vestimenta{width:92vw;padding:52px 26px 44px}.vestimenta .tipo{font-size:68px}
  .regalo{width:92vw}
  .rsvp-mesa{width:90vw}.rsvp{padding:66px 26px 54px}
  .compartir{width:92vw}
  .arco-pareja{width:min(84vw,360px)}
  /* entradas más vistosas: las piezas se posan con giro y los títulos se escriben de izquierda a derecha */
  .aparece{transform:translateY(64px) rotate(calc(var(--giro,0deg) * 3)) scale(.92);transition:opacity 1.3s var(--suave),transform 1.6s var(--suave);transition-delay:var(--d,0s)}
  .titulo-sec.aparece h2{clip-path:inset(-30% 100% -30% 0);transition:clip-path 1.8s cubic-bezier(.6,.1,.3,1) .35s}
  .titulo-sec.aparece.visto h2{clip-path:inset(-30% -10% -30% 0)}
  /* flores que salen por los bordes de la pantalla */
  .solo-movil{display:block}
  .borde{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(var(--sombra-rgb),.18))}
  .borde.aparece{transform:translateY(30px) scale(.9) rotate(var(--rb,0deg))}
  .borde.aparece.visto{transform:rotate(var(--rb,0deg));animation:mece-borde 9s ease-in-out 2s infinite}
  @keyframes mece-borde{0%,100%{rotate:0deg}50%{rotate:1.5deg}}
  .b-itinerario{width:70vw;left:-34vw;top:-1vh;--rb:-14deg}
  .b-vestimenta{width:46vw;right:-16vw;bottom:5vh}
  .b-regalos{width:44vw;left:-15vw;top:5vh}
  .b-mensajes{width:62vw;right:-24vw;top:2vh;--rb:80deg}
  .b-lugares{width:40vw;right:-14vw;top:4vh}
  .seccion > :not(.borde):not(.lluvia){position:relative;z-index:1}
  /* historia: la foto de la pareja muy suave detrás de toda la escena */
  #s-historia::before{content:"";position:absolute;inset:0;z-index:0;background:var(--fondo-historia) center/cover;opacity:.22;filter:saturate(.8);
    -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
  /* escenas de noche: azul profundo con la porcelana apenas visible (cuenta, confirmación y cierre) */
  .seccion.noche{background:radial-gradient(ellipse 120% 80% at 50% 38%,var(--noche-claro),var(--noche) 72%);color:var(--marfil)}
  .seccion.noche::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(assets/forro-porcelana.jpg) center/460px auto repeat;opacity:.09;mix-blend-mode:screen}
  .noche .titulo-sec small{color:rgba(var(--marfil-rgb),.75)}
  .noche .titulo-sec h2{color:var(--marfil)}
  .noche .titulo-sec .filete{background:linear-gradient(90deg,transparent,var(--oro-claro),transparent)}
  .cierre.noche h2{color:var(--marfil)}
  .cierre.noche p{color:var(--oro-claro)}
  .cierre.noche .arco-pareja{box-shadow:0 0 0 1px rgba(var(--oro-claro-rgb),.45),0 30px 50px -24px rgba(0,0,0,.6)}
}