/* Demo Herencia · bautizo de niño · Italian Heritage / Quiet Luxury en azul polvo
   Papelería italiana: marfil cálido, rosa empolvado, champán y taupe; papel de algodón, forro grabado y sello de cera. */
:root {
  --marfil: #f6f0e8;
  --papel: #f1e9df;
  --lino: #e6dbcd;
  --rosa: #d3dee6;
  --rosa-2: #6a8499;
  --champan: #e5d3b8;
  --taupe: #8d9094;
  --taupe-2: #4b5966;
  --fondo: var(--marfil);
  --texto: #4f5a63;
  --suave: var(--papel);
  --acento: #5f7a91;
  --sobre-acento: #fff;
  --linea: rgba(106, 132, 153, .32);
  --encabezado-fondo: rgba(246, 240, 232, .95);
  --encabezado-texto: var(--taupe-2);
  --menu-fondo: var(--marfil);
  --fuente-display: "Cormorant Garamond", Georgia, serif;
  --fuente-script: "Pinyon Script", "Snell Roundhand", cursive;
  --fuente-texto: "Cormorant Garamond", Georgia, serif;
  --radio: 999px;
  --radio-foto: 0;
  /* grano de papel */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { font: 500 18px/1.75 var(--fuente-texto); color: var(--texto); background: var(--marfil) var(--grano); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.angosto { width: min(500px, 100% - 40px); }
.seccion { padding-block: clamp(80px, 13vw, 130px); overflow: hidden; }
.papel { background: var(--papel) var(--grano); }
.lino { background: var(--lino) var(--grano); }
.espacio { margin-top: 30px; }
.espacio-sm { margin-top: 26px; }

/* Tipografía */
.titulo { font: italic 400 clamp(38px, 10vw, 50px)/1.15 var(--fuente-display); color: var(--rosa-2); }
.titulo--claro { color: #fff; }
.caps { font: 500 13px/1.9 var(--fuente-display); letter-spacing: .26em; text-transform: uppercase; color: var(--taupe-2); padding-left: .26em; }
.caps--fecha { font-size: 17px; letter-spacing: .22em; color: var(--rosa-2); font-weight: 600; }
.caps--chico { font-size: 11.5px; letter-spacing: .24em; color: var(--taupe); }
.caps--suave { color: var(--taupe); }
.texto { max-width: 34ch; margin: 20px auto 0; font-size: 18px; }
.texto strong { font-weight: 600; color: var(--rosa-2); }
.texto--suave { font-size: 16px; font-style: italic; color: var(--taupe); }
.nombre-script { font: 400 clamp(86px, 25vw, 120px)/1.08 var(--fuente-script); color: var(--rosa-2); margin: 4px 0 2px; }
.frase { font: italic 500 clamp(21px, 5.6vw, 25px)/1.5 var(--fuente-display); color: var(--rosa-2); max-width: 24ch; margin: 34px auto 0; }

/* Ornamentos */
.mono { width: 70px; height: 92px; color: var(--rosa-2); display: block; margin: 0 auto 16px; }
.filete { width: min(250px, 72%); height: auto; aspect-ratio: 634 / 106; display: block; margin: 12px auto 8px; }
.fleuron { width: 34px; height: 17px; color: var(--rosa-2); display: block; margin: 18px auto 6px; }
.rama { position: absolute; width: 110px; height: 200px; color: var(--rosa-2); opacity: .55; pointer-events: none; }
.rama--der { right: -18px; bottom: 10px; transform: rotate(-8deg); }
.rama--izq { left: -22px; bottom: 6px; transform: scaleX(-1) rotate(-8deg); }
.icono-sec { width: 40px; height: 40px; color: var(--rosa-2); display: block; margin: 18px auto 0; }
.icono-sec--sobre { height: 30px; }

/* Botones */
.boton { font: 600 12px/1 var(--fuente-display); letter-spacing: .24em; padding-left: calc(28px + .24em); background: var(--acento); border-color: var(--acento); }
.boton--linea { background: rgba(255, 255, 255, .35); color: var(--taupe-2); border-color: var(--taupe); }
.boton--chico { min-height: 40px; padding: 10px 22px 10px calc(22px + .24em); font-size: 11px; margin-top: 18px; }
.boton--grande { font-size: 13px; }
.boton--claro { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .8); backdrop-filter: blur(4px); }

/* Encabezado y menú */
.encabezado__mono { width: 30px; height: 40px; color: var(--rosa-2); display: block; }
.encabezado nav a:not(.boton) { font: 500 14px var(--fuente-display); letter-spacing: .14em; }
@media (max-width: 860px) {
  .encabezado nav { gap: 16px; background: var(--marfil) var(--grano); }
  .encabezado nav a:not(.boton) { font: 400 25px var(--fuente-display); letter-spacing: .02em; color: var(--taupe-2); }
}
.btn-menu { color: var(--taupe-2); }

/* Sello de cera */
.sello { display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; cursor: pointer; color: rgba(245, 249, 252, .75);
  background: radial-gradient(circle at 34% 28%, #d5e0e8 0%, #9fb3c3 38%, #738da3 72%, #5c7489 100%);
  border-radius: 48% 52% 50% 50% / 53% 47% 55% 45%;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .08), inset 0 0 0 7px rgba(50, 70, 90, .2), inset 0 -5px 10px rgba(40, 60, 80, .3), inset 0 4px 8px rgba(255, 255, 255, .3), 0 7px 14px rgba(100, 70, 60, .3); }
.sello svg { width: 50px; height: 64px; filter: drop-shadow(0 -1px 0 rgba(90, 50, 44, .45)) drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); }

/* Sobre de entrada */
.sobre { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 26px; background: var(--lino) var(--grano); transition: opacity .8s ease; }
.sobre[hidden] { display: none; }
.sobre.saliendo { opacity: 0; }
.sobre__escena { position: relative; width: min(84vw, 360px); aspect-ratio: 1.42; perspective: 1200px; filter: drop-shadow(0 18px 26px rgba(100, 80, 66, .22)); }
.sobre__fondo { position: absolute; inset: 0; background: url("../img/toile.jpg") center / cover; border-radius: 3px; }
.sobre__fondo::after { content: ""; position: absolute; inset: 0; background: rgba(225, 235, 242, .2); }
.sobre__carta { position: absolute; left: 7%; right: 7%; top: 6%; bottom: 6%; background: #fbf8f3 var(--grano); display: grid; place-content: center; justify-items: center; text-align: center;
  transition: transform 1s cubic-bezier(.3, .7, .2, 1) .75s; box-shadow: 0 2px 6px rgba(100, 80, 66, .12); }
.sobre__mono { width: 40px; height: 52px; color: var(--rosa-2); }
.sobre__nombre { font: 400 52px/1.1 var(--fuente-script); color: var(--rosa-2); }
.sobre__fecha { font: 600 11px var(--fuente-display); letter-spacing: .3em; color: var(--taupe); }
.sobre__frente { position: absolute; inset: 0; background: #f6efe6 var(--grano); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); border-radius: 3px; }
.sobre__frente::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0, 0, 0, .04), transparent 40%), linear-gradient(200deg, rgba(0, 0, 0, .04), transparent 40%); }
.sobre__solapa { position: absolute; left: 0; right: 0; top: 0; height: 62%; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform .9s ease; z-index: 3; }
.sobre__solapa-cara, .sobre__solapa-forro { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; }
.sobre__solapa-cara { background: #f3ebe1 var(--grano); }
.sobre__solapa-cara::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(100, 80, 66, .08)); }
.sobre__solapa-forro { background: url("../img/toile.jpg") center 30% / cover; transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.sobre__sello { position: absolute; z-index: 4; left: 50%; top: 62%; transform: translate(-50%, -50%); transition: opacity .4s, transform .4s; animation: latido 2.8s ease-in-out infinite; }
.sobre__ayuda { font: italic 500 18px/1.6 var(--fuente-display); color: var(--taupe-2); letter-spacing: .04em; text-align: center; transition: opacity .4s; }
.sobre__escena { margin-top: 90px; }
.sobre.abierto .sobre__sello { opacity: 0; transform: translate(-50%, -50%) scale(.7); animation: none; }
.sobre.abierto .sobre__solapa { transform: rotateX(180deg); z-index: 1; transition: transform .9s ease, z-index 0s .45s; }
.sobre.abierto .sobre__carta { transform: translateY(-58%); z-index: 2; }
.sobre.abierto .sobre__ayuda { opacity: 0; }
.sobre.abierto .sobre__frente { z-index: 2; }
@keyframes latido { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }

/* Portada */
.hero { position: relative; min-height: 100svh; display: grid; align-content: start; justify-items: center; text-align: center; overflow: hidden;
  padding: calc(78px + env(safe-area-inset-top, 0px)) 20px 110px; background: #eef1f2; isolation: isolate; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(248, 240, 234, .97) 0%, rgba(248, 240, 234, .94) 44%, rgba(248, 240, 234, .55) 58%, rgba(248, 240, 234, 0) 74%, rgba(80, 50, 40, .18) 100%); }
.hero__texto { display: grid; justify-items: center; }
.hero__mono { width: 70px; height: 92px; color: var(--rosa-2); margin-bottom: 14px; }
.hero__nombre { font: 400 clamp(92px, 28vw, 150px)/1 var(--fuente-script); color: var(--rosa-2); margin: 8px 0 10px; }
.hero__texto .caps--chico { color: var(--taupe-2); margin-top: 4px; }
.hero__ver { position: absolute; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 12px 30px 12px calc(30px + .26em); border-radius: 999px;
  background: rgba(250, 245, 239, .9); color: var(--taupe-2); font: 600 12px var(--fuente-display); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(80, 50, 40, .18); }
.hero__ver::after { content: "⌄"; position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); color: #fff; font-size: 18px; animation: bajar 2s ease-in-out infinite; }
@keyframes bajar { 50% { transform: translate(-50%, 5px); } }
.petalos i { position: absolute; z-index: 0; top: -20px; width: 10px; height: 13px; background: #dbe5ec; border-radius: 80% 0 80% 0; opacity: .8; animation: caer 17s linear infinite; }
.petalos i:nth-child(1) { left: 10%; }
.petalos i:nth-child(2) { left: 28%; animation-delay: 5s; animation-duration: 20s; width: 8px; height: 10px; }
.petalos i:nth-child(3) { left: 52%; animation-delay: 9s; }
.petalos i:nth-child(4) { left: 72%; animation-delay: 2s; animation-duration: 22s; }
.petalos i:nth-child(5) { left: 88%; animation-delay: 12s; width: 8px; height: 10px; }
.petalos i:nth-child(6) { left: 40%; animation-delay: 15s; animation-duration: 19s; }
@keyframes caer { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 50vh) rotate(160deg); } 100% { transform: translate(-10px, 105vh) rotate(320deg); opacity: 0; } }

/* Invitación: papel sobre lino */
.mesa-papel { position: relative; width: min(100%, 470px); margin: 0 auto; padding: 30px 0 40px; }
.forro { position: absolute; left: -16%; top: 0; width: 70%; height: 62%; background: url("../img/toile.jpg") center / cover; transform: rotate(-9deg); box-shadow: 0 0 0 10px #f2ebe1, 0 10px 24px rgba(90, 70, 58, .2); opacity: .95; }
.carta { position: relative; background: #fbf8f3 var(--grano); filter: drop-shadow(0 14px 24px rgba(90, 70, 58, .18)); }
.carta__in { width: auto; padding: 52px 26px 46px; }
.carta .texto { font-size: 18px; }
.sello--carta { position: absolute; left: -6px; bottom: 6px; transform: rotate(-12deg); cursor: default; }

/* Familia */
.padres { display: grid; font: italic 500 25px/1.35 var(--fuente-display); color: var(--taupe-2); margin-top: 2px; }
.padres__y { font: italic 400 20px/1.3 var(--fuente-display); color: var(--rosa-2); }
.padrinos { list-style: none; padding: 0; margin: 2px 0 0; }
.padrino__rol { display: none; }
.padrino__nombre { font: italic 500 25px/1.35 var(--fuente-display); color: var(--taupe-2); }
.retrato { margin: 44px auto 0; width: min(100%, 420px); padding: 10px; background: #fbf8f3; box-shadow: 0 16px 34px rgba(90, 70, 58, .14); }
.retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* Cuenta regresiva sobre la pista */
.cuenta-sec { position: relative; isolation: isolate; color: #fff; }
.cuenta-sec__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cuenta-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(40, 60, 78, .45); }
.cuenta { gap: 0; max-width: 440px; margin-top: 18px; }
.cuenta__item { padding: 8px 4px; position: relative; }
.cuenta__item + .cuenta__item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255, 255, 255, .5); }
.cuenta__num { font: 400 clamp(40px, 11vw, 58px)/1 var(--fuente-display); color: #fff; }
.cuenta__lbl { font: 600 10.5px var(--fuente-display); letter-spacing: .26em; color: #fff; opacity: .9; }
.cuenta__hoy { color: #fff; }

/* Ceremonia y recepción */
.dibujo { width: min(270px, 84%); height: auto; aspect-ratio: 240 / 160; color: var(--rosa-2); display: block; margin: 22px auto 22px; }
.lugar__dir { font: italic 500 19px var(--fuente-display); color: var(--taupe); }
.lugar__hora { font: 500 30px var(--fuente-display); letter-spacing: .1em; color: var(--rosa-2); margin-top: 8px; }
.arco { margin: 26px auto 24px; width: min(100%, 440px); padding: 8px; background: #fbf8f3; border-radius: 220px 220px 4px 4px; box-shadow: 0 14px 30px rgba(90, 70, 58, .14); }
.arco img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: 42% 50%; border-radius: 212px 212px 2px 2px; }

/* Itinerario */
.programa { list-style: none; padding: 0; margin: 30px auto 0; max-width: 320px; display: grid; text-align: left; }
.programa li { display: grid; grid-template-columns: 40px 20px 1fr; align-items: center; gap: 16px; padding-block: 16px; position: relative; }
.programa li:not(:last-child)::after { content: ""; position: absolute; left: 75px; top: 50%; height: 100%; width: 1px; background: var(--linea); }
.programa__icono { width: 40px; height: 40px; color: var(--rosa-2); }
.programa__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rosa-2); justify-self: center; box-shadow: 0 0 0 4px var(--papel); position: relative; z-index: 1; }
.programa__txt { display: grid; }
.programa__hora { font: 600 14px var(--fuente-display); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-2); }
.programa__que { font: italic 500 18px/1.35 var(--fuente-display); color: var(--texto); }

/* Vestimenta */
.vest { font: 400 clamp(48px, 13vw, 60px)/1.15 var(--fuente-script); color: var(--rosa-2); margin-top: 14px; }
.paleta { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.paleta span { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(110, 90, 75, .15), 0 2px 6px rgba(110, 90, 75, .12); }

/* Regalos */
.mesas { display: grid; gap: 18px; margin-top: 28px; }
.mesa { background: #fbf8f3; padding: 26px 20px; box-shadow: 0 10px 24px rgba(90, 70, 58, .1); }
.mesa__tienda { font: italic 500 28px var(--fuente-display); color: var(--rosa-2); }

/* Hospedaje */
.hoteles { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; text-align: left; }
.hotel { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; padding: 18px 18px 18px 0; text-decoration: none; background: #fbf8f3; box-shadow: 0 8px 20px rgba(90, 70, 58, .08); transition: transform .25s; }
.hotel:hover { transform: translateY(-2px); }
.hotel__num { font: italic 500 28px var(--fuente-display); color: var(--rosa-2); text-align: center; border-right: 1px solid var(--linea); align-self: stretch; display: grid; place-items: center; }
.hotel__txt { display: grid; gap: 0; }
.hotel__txt .caps { padding-left: 0; }
.hotel__nombre { font: 500 21px/1.25 var(--fuente-display); color: var(--taupe-2); }
.hotel__flecha { font: 400 30px/1 var(--fuente-display); color: var(--rosa-2); }

/* Confirmación */
.confirmar { position: relative; }

/* Carrusel */
.carrusel { position: relative; margin: 26px auto 0; max-width: 560px; }
.carrusel__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #fbf8f3; padding: 8px; gap: 8px; box-shadow: 0 14px 30px rgba(90, 70, 58, .14); }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.carrusel__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.carrusel__flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(251, 248, 243, .9); color: var(--taupe-2); font: 400 28px/1 var(--fuente-display); box-shadow: 0 4px 12px rgba(90, 70, 58, .18); }
.carrusel__flecha--ant { left: 16px; }
.carrusel__flecha--sig { right: 16px; }
.carrusel__puntos { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.carrusel__puntos button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 1px solid var(--rosa-2); background: transparent; cursor: pointer; }
.carrusel__puntos button.activo { background: var(--rosa-2); }

/* Pie */
.pie { background: var(--marfil) var(--grano); border-top: 1px solid var(--linea); padding-top: 60px; }
.pie__mono { width: 54px; height: 71px; color: var(--rosa-2); display: block; margin: 0 auto 4px; }
.pie__nombre { font: 400 60px/1.1 var(--fuente-script); color: var(--rosa-2); margin: 0; }

/* Flotantes */
.rsvp-flotante { background: var(--acento); border-color: var(--acento); }
.btn-musica { color: var(--taupe-2); background: var(--marfil); }

/* Aparición suave */
.animar .revela { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s ease; }
.animar .revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .animar .revela { opacity: 1; transform: none; }
  .petalos { display: none; }
}

.lugar__detalle { color: var(--rosa-2); margin-top: -2px; }
.hotel__codigo { font: italic 500 15px/1.4 var(--fuente-display); color: var(--texto); margin-top: 4px; }
.hotel__codigo strong { font-style: normal; font-weight: 600; color: var(--rosa-2); word-break: break-all; }
.dibujo--img { width: min(360px, 96%); aspect-ratio: 1100 / 621; height: auto; }