/* Boda de Grace y Pablo · papelería en collage: azul, verde y blanco */
:root {
  --azul: #2f5d8c;
  --azul-oscuro: #1f3d5e;
  --azul-claro: #e1e9f1;
  --verde: #5d7a4c;
  --verde-claro: #e5ebdc;
  --papel: #fdfcf9;
  --piedra: #e4e9ee;
  --fondo: var(--papel);
  --suave: var(--azul-claro);
  --texto: #24384f;
  --linea: rgba(47, 93, 140, .22);
  --acento: var(--azul);
  --sobre-acento: #fff;
  --fuente-display: "Cormorant Garamond", Georgia, serif;
  --fuente-script: "Pinyon Script", cursive;
  --fuente-texto: "Jost", system-ui, sans-serif;
  --radio-foto: 2px;
  --sombra: 0 1px 2px rgba(31, 61, 94, .08), 0 10px 26px rgba(31, 61, 94, .12);
}
html { background: var(--piedra); }
body {
  font: 300 17px/1.7 var(--fuente-texto); color: var(--texto);
  /* Fondo de piedra azulada con grano */
  background: var(--piedra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .24 0 0 0 0 .34 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* La invitación es una tira de papel larga sobre la piedra */
.tira {
  width: min(560px, 100% - 20px); margin: 10px auto 0; background: var(--papel);
  box-shadow: 0 2px 4px rgba(31, 61, 94, .08), 0 24px 60px rgba(31, 61, 94, .14);
  overflow: hidden;
}
.contenedor { width: min(480px, 100% - 32px); }
.seccion { padding-block: 34px; }

/* Tipografía */
.script-titulo { font: 400 clamp(44px, 12vw, 58px)/1.1 var(--fuente-script); color: var(--azul); margin-bottom: 6px; }
.script-chico { font: 400 26px/1 var(--fuente-script); color: var(--verde); }
.texto-mayus { font: 500 12px/1.7 var(--fuente-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--azul); }
.etiqueta { font: 500 11px/1.6 var(--fuente-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--verde); margin-top: 16px; }
.texto { max-width: 38ch; margin: 14px auto 0; }
.boton { font: 500 12px/1 var(--fuente-texto); letter-spacing: .2em; min-height: 46px; padding: 12px 26px; }
.boton--linea { background: transparent; }
.boton--claro { background: #fff; color: var(--azul); border-color: #fff; }
.boton--chico { min-height: 36px; padding: 8px 18px; font-size: 11px; background: transparent; color: var(--azul); border-color: var(--azul); }

/* Papeles del collage */
.papel {
  position: relative; background: #fff; padding: 40px 24px 34px; box-shadow: var(--sombra);
  border: 1px solid rgba(47, 93, 140, .1);
}
.papel::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--linea); pointer-events: none; }
.papel--verde { background: var(--verde-claro); }
.papel--verde::before { border-color: rgba(93, 122, 76, .3); }
.papel--azul { background: var(--azul); color: #fff; }
.papel--azul::before { border-color: rgba(255, 255, 255, .35); }
.papel--azul .texto-mayus, .papel--azul .script-titulo { color: #fff; }
.papel--azul-claro { background: var(--azul-claro); }
.papel--chico { width: min(340px, 100%); margin-inline: auto; padding-block: 30px; }
.inclinado-izq { transform: rotate(-1.2deg); }
.inclinado-der { transform: rotate(1deg); }

/* Sellos de cera */
.sello { display: block; width: 62px; height: 62px; filter: drop-shadow(0 3px 3px rgba(40, 40, 40, .25)); }
.sello--arriba { position: absolute; left: 50%; top: -30px; transform: translateX(-50%) rotate(-8deg); }
.sello--blanco { --cera: url(#g-cera-blanca); }
.papel--verde .sello, .sello--azul { --cera: url(#g-cera-azul); --cera-linea: rgba(255, 255, 255, .35); --cera-brillo: rgba(255, 255, 255, .25); --cera-letra: #f4f7fb; }

/* Portada */
.portada { padding: calc(42px + env(safe-area-inset-top, 0px)) 16px 36px; text-align: center; }
.sobre-portada { position: relative; width: min(400px, 100%); margin: 0 auto; }
.sobre-portada__sobre { display: block; width: 88%; margin: 0 auto; filter: drop-shadow(0 12px 18px rgba(31, 61, 94, .25)); }
.tarjeta-portada {
  position: relative; z-index: 2; width: 76%; margin: -40% auto 0; background: #fff; padding: 34px 20px 30px;
  box-shadow: 0 14px 30px rgba(31, 61, 94, .22);
  /* esquinas recortadas como tarjeta de papelería */
  -webkit-mask: radial-gradient(circle 16px at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle 16px at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle 16px at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 16px at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle 16px at 0 0, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle 16px at 100% 0, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle 16px at 0 100%, transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 16px at 100% 100%, transparent 98%, #000) bottom right / 51% 51% no-repeat;
  animation: salir-sobre 1.4s cubic-bezier(.2, .7, .2, 1) both .2s;
}
.tarjeta-portada::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--azul); opacity: .55;
  border-radius: 14px; pointer-events: none; }
.tarjeta-portada__pre { font: 500 10.5px/1.7 var(--fuente-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--azul); max-width: 24ch; margin: 0 auto; }
.tarjeta-portada__nombres { display: grid; font: 400 clamp(52px, 15vw, 70px)/1 var(--fuente-script); color: var(--azul-oscuro); margin: 14px 0 6px; }
.tarjeta-portada__nombres em { font-style: normal; font-size: .55em; color: var(--verde); line-height: .9; }
.tarjeta-portada__fecha { font: 500 20px/1 var(--fuente-display); letter-spacing: .24em; color: var(--azul); margin-top: 8px; }
.tarjeta-portada__lugar { font: italic 400 17px/1.4 var(--fuente-display); margin-top: 8px; }
.rama--portada { position: absolute; z-index: 3; width: 96px; height: 176px; left: -6px; bottom: -34px; transform: rotate(-14deg); animation: mecer 6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.sello--portada { width: 58px; height: 58px; margin: -10px auto 10px; transform: rotate(-10deg); --cera: url(#g-cera-azul); --cera-linea: rgba(255,255,255,.35); --cera-brillo: rgba(255,255,255,.25); --cera-letra: #f4f7fb; }
@keyframes salir-sobre { from { transform: translateY(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mecer { from { transform: rotate(-16deg); } to { transform: rotate(-10deg); } }

/* Reproductor de la canción */
.reproductor { width: min(320px, 100%); margin: 56px auto 0; background: #fff; padding: 18px 20px 14px; box-shadow: var(--sombra); transform: rotate(.8deg); }
.reproductor__pre { font: italic 400 16px/1.3 var(--fuente-display); }
.reproductor__cancion { font: 500 11px/1.5 var(--fuente-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--azul); margin-top: 4px; }
.reproductor__barra { height: 2px; background: var(--linea); margin: 12px 6px; position: relative; }
.reproductor__barra span { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: var(--azul); }
.reproductor__barra span::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.reproductor.sonando .reproductor__barra span { animation: avanzar 200s linear infinite; }
@keyframes avanzar { from { width: 0; } to { width: 100%; } }
.reproductor__botones { display: flex; align-items: center; justify-content: center; gap: 26px; color: var(--azul-oscuro); }
.reproductor__botones > svg { width: 16px; height: 16px; opacity: .7; }
.reproductor__play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--azul); background: #fff; color: var(--azul); display: grid; place-items: center; cursor: pointer; padding: 0; }
.reproductor__play svg { width: 18px; height: 18px; }
.reproductor__play .ico-pausa, .reproductor.sonando .ico-play { display: none; }
.reproductor.sonando .ico-pausa { display: block; }

/* Papás y fecha */
#padres { padding-top: 54px; }
.padres-grid { gap: 4px; margin-top: 10px; }
.padres__nombre { font-size: 22px; }
.fecha-bloque { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 300px; margin: 18px auto 0; }
.fecha-bloque__mes { grid-column: 1 / -1; font: 500 13px var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--verde); }
.fecha-bloque__lado { font: 500 13px var(--fuente-texto); letter-spacing: .2em; text-transform: uppercase; padding-block: 6px; border-block: 1px solid var(--linea); }
.fecha-bloque__dia { font: 400 64px/1 var(--fuente-display); color: var(--azul); }

/* Fotos impresas con cinta y esquina doblada */
.impresa { position: relative; margin: 0 auto; background: #fff; padding: 10px 10px 12px; box-shadow: var(--sombra); width: min(380px, 92%); }
.impresa img { width: 100%; height: auto; }
.impresa::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px;
  background: linear-gradient(315deg, var(--papel) 48%, #dfe5ea 50%, #fff 64%); box-shadow: -3px -3px 6px rgba(31, 61, 94, .12); }
.impresa figcaption { font: 400 24px/1.2 var(--fuente-script); color: var(--azul); padding-top: 8px; }
.impresa--grande img { aspect-ratio: 2 / 3; object-fit: cover; object-position: bottom; }
.cinta { position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(205, 221, 196, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.cuenta-papel { width: min(380px, 96%); margin: -22px auto 0; z-index: 2; padding-top: 46px; }
.cuenta-papel .sello--arriba { left: 16%; }
.cuenta { margin-top: 10px; gap: 2px; }
.cuenta__item { padding: 6px 2px; }
.cuenta__num { font-size: 40px; color: #fff; }
.cuenta__lbl { font-size: 10px; letter-spacing: .14em; }
.cuenta-papel .boton { margin-top: 16px; }

/* Historia */
.dibujo { display: block; color: var(--azul); margin: 0 auto 6px; }
.dibujo--eiffel { width: 44px; height: 74px; }
.historia { margin-top: 18px; gap: 22px; text-align: center; }
.hito__num { display: none; }
.hito__fecha { font-size: 11px; letter-spacing: .2em; color: var(--verde); opacity: 1; font-weight: 500; }
.hito__titulo { font-size: 26px; color: var(--azul-oscuro); font-weight: 500; }
.hito__texto { font-size: 16px; max-width: 34ch; margin: 0 auto; }
.historia .hito + .hito { padding-top: 22px; border-top: 1px dashed var(--linea); }
.impresa--horizontal { margin-top: 30px; width: min(420px, 96%); }

/* Lugares */
.lugares { display: grid; gap: 30px; margin-top: 18px; }
.lugar { display: grid; justify-items: center; gap: 4px; }
.dibujo--lugar { width: 140px; height: 92px; margin-bottom: 8px; }
.lugar__hora { font: 500 30px/1.1 var(--fuente-display); color: var(--azul); margin-top: 4px; }
.lugar__nombre { font: 500 25px/1.2 var(--fuente-display); color: var(--azul-oscuro); }
.lugar__dir { font-size: 15px; max-width: 32ch; margin-bottom: 12px; }
.insignia { position: absolute; right: -8px; top: 16px; width: 70px; height: 84px; border-radius: 35px; white-space: nowrap; background: #eef1f4; border: 1px solid #fff;
  box-shadow: 0 6px 14px rgba(31, 61, 94, .2); display: grid; place-items: center; font: 400 22px/1 var(--fuente-display); color: var(--azul); transform: rotate(6deg); }
.insignia i { font: 400 18px var(--fuente-script); color: var(--verde); margin: 0 1px; }

/* Itinerario */
.crono { list-style: none; padding: 0; margin: 16px auto 0; display: grid; gap: 0; max-width: 300px; }
.crono li { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 16px; text-align: left; padding: 12px 0; position: relative; }
.crono li + li { border-top: 1px dashed rgba(93, 122, 76, .4); }
.crono svg { grid-row: 1 / 3; width: 42px; height: 42px; color: var(--azul); align-self: center; }
.crono__hora { font: 500 22px/1.1 var(--fuente-display); color: var(--azul); }
.crono__que { font-size: 15px; letter-spacing: .04em; }

/* Padrinos */
.corazon { width: 20px; height: 18px; color: var(--azul); display: block; margin: 0 auto 8px; }
.padrinos { margin-top: 0; }
.padrino__nombre { white-space: pre-line; font-size: 22px; }
.padrino__rol { color: var(--verde); font-weight: 500; }

/* Dress code en arco */
.arco { background: var(--azul-claro); border-radius: 200px 200px 6px 6px; padding: 46px 22px 34px; position: relative; box-shadow: var(--sombra); }
.arco::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--linea); border-radius: 190px 190px 4px 4px; pointer-events: none; }
.arco__dibujos { display: flex; justify-content: center; gap: 34px; margin-top: 8px; }
.arco__dibujos svg { width: 78px; height: 96px; color: var(--azul-oscuro); }
.dress__codigo { font: 500 30px/1.2 var(--fuente-display); color: var(--azul); margin-top: 14px; letter-spacing: .08em; text-transform: uppercase; }
.dress__evitar { margin-top: 18px; }
.muestras { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 6px; }
.muestra { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.muestra i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(31, 61, 94, .3); position: relative; overflow: hidden; }
.muestra i::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; background: #b4462f; transform: rotate(-45deg); }
.dress__clima { margin-top: 18px; font: italic 400 18px/1.4 var(--fuente-display); max-width: 32ch; margin-inline: auto; }

/* Galería: fotos impresas sueltas */
.galeria { gap: 16px 12px; margin-top: 14px; }
.gal__item { background: #fff; padding: 6px 6px 18px; border-radius: 0; box-shadow: var(--sombra); aspect-ratio: auto; }
.gal__item img { aspect-ratio: 3 / 4; height: auto; }
.gal__item:nth-child(odd) { transform: rotate(-2deg); }
.gal__item:nth-child(even) { transform: rotate(1.6deg); }
.gal__item:last-child { grid-column: 1 / -1; }
.gal__item:last-child img { aspect-ratio: 3 / 2; }

/* Regalos */
.tira-titulo { background: var(--azul-claro); padding: 16px 16px 6px; margin-bottom: 18px; box-shadow: var(--sombra); }
.tira-titulo svg { width: 46px; height: 34px; color: var(--azul-oscuro); display: block; margin: 0 auto; }
.tira-titulo .script-titulo { font-size: 42px; }
.regalos__lista { gap: 12px; margin-top: 18px; }
.regalo { min-width: 0; width: 100%; padding: 18px; background: #fff; }
.regalo__tienda { font-weight: 500; color: var(--azul-oscuro); }
.regalo .boton { min-height: 38px; font-size: 11px; padding: 8px 18px; }

/* Hospedaje */
.hospedaje { margin-top: 12px; }
.hotel { background: #fff; box-shadow: var(--sombra); padding: 26px 20px; }
.hotel__nombre { color: var(--azul-oscuro); font-weight: 500; }

/* Preguntas */
.faq { margin-top: 10px; }
.pregunta summary { font-size: 19px; font-weight: 500; color: var(--azul-oscuro); padding-block: 14px; }
.pregunta p { font-size: 15px; }

/* Confirmación: la tarjeta asoma del sobre */
.sobre-rsvp { position: relative; width: min(400px, 100%); margin: 0 auto; padding-top: 10px; }
.sobre-rsvp__tarjeta { position: relative; z-index: 1; width: 84%; margin: 0 auto; background: #fff; padding: 30px 20px 120px; box-shadow: 0 8px 24px rgba(31, 61, 94, .16); display: grid; justify-items: center; gap: 10px; }
.sobre-rsvp__tarjeta::before { content: ""; position: absolute; inset: 8px 8px 0; border: 1px solid var(--linea); border-bottom: 0; }
.sobre-rsvp__tarjeta .texto { margin-top: 0; font-size: 15px; }
.sobre-rsvp__tarjeta .script-titulo { font-size: 44px; }
.sobre-rsvp__tarjeta .boton { width: 100%; max-width: 260px; position: relative; z-index: 3; }
.sobre-rsvp__frente { position: relative; z-index: 2; display: block; width: 100%; height: 170px; margin-top: -100px; filter: drop-shadow(0 -2px 6px rgba(31, 61, 94, .18)); }
.sello--rsvp { position: absolute; z-index: 3; left: 50%; bottom: 52px; width: 64px; height: 64px; transform: translateX(-50%) rotate(8deg); }
.rama--rsvp { position: absolute; z-index: 4; right: -14px; bottom: 26px; width: 80px; height: 148px; transform: scaleX(-1) rotate(-12deg); }
.cierre { margin: 26px auto 0; max-width: 32ch; font: italic 400 19px/1.5 var(--fuente-display); }
.cierre strong { font-style: normal; font-weight: 600; color: var(--azul); }

/* Pie */
.pie { padding-top: 40px; }
.sello--pie { margin: 0 auto 10px; width: 70px; height: 70px; --cera: url(#g-cera-azul); --cera-linea: rgba(255,255,255,.35); --cera-brillo: rgba(255,255,255,.25); --cera-letra: #f4f7fb; }
.pie__nombres { font: 400 40px/1.1 var(--fuente-script); color: var(--azul); }
.pie__fecha { font: 500 14px var(--fuente-texto); letter-spacing: .28em; color: var(--verde); margin-top: 4px; }

/* Capturas sin animación */
.estatico *, .estatico *::before, .estatico *::after { animation: none !important; transition: none !important; }