/* Boda de Sofía y Rogelio · limones, rayas mantequilla, azul celeste y tinta azul rey */
:root {
  --crema: #fbf7ea;
  --mantequilla: #f7e7a6;
  --mantequilla-2: #f2d978;
  --limon: #f2c94c;
  --celeste: #bcd4ee;
  --celeste-2: #dbe8f6;
  --rey: #2a4fbf;
  --tinta: #1f3c8f;
  --fondo: var(--crema);
  --suave: var(--celeste-2);
  --texto: var(--tinta);
  --linea: rgba(42, 79, 191, .25);
  --acento: var(--rey);
  --sobre-acento: #fff;
  --fuente-display: "Fraunces", Georgia, serif;
  --fuente-script: "Homemade Apple", cursive;
  --fuente-texto: "Jost", system-ui, sans-serif;
  --radio-foto: 18px;
}
body { background: var(--crema); color: var(--tinta); font: 400 17px/1.7 var(--fuente-texto); }
.angosto { width: min(600px, 100% - 36px); }
.titulo { font: 500 clamp(30px, 8vw, 46px)/1.1 var(--fuente-display); letter-spacing: .06em; text-transform: uppercase; color: var(--rey); }
.eyebrow { font: 600 12px/1.6 var(--fuente-texto); letter-spacing: .26em; color: var(--rey); }
.etiqueta { font: 600 11px var(--fuente-texto); letter-spacing: .24em; text-transform: uppercase; color: #6f86c9; margin-bottom: 6px; }
.texto { max-width: 46ch; margin: 14px auto 0; }
.texto--suave { color: #5a6fae; font-size: 15px; }
.script { font: 400 26px/1.6 var(--fuente-script); color: var(--limon); text-shadow: 0 1px 0 #d9a92a; margin-top: 10px; }
.boton { font: 600 12px/1 var(--fuente-texto); letter-spacing: .16em; border-radius: 999px; }
.boton--linea { border: 1.6px solid var(--limon); color: var(--rey); background: #fffbe7; }

/* Dibujos a tinta */
svg[class^="deco"], .deco, .dibujo, .dibujos-fila svg, .hero__mono, .corazon { color: var(--rey); }
.dibujo { width: 74px; height: 50px; display: block; margin: 0 auto 10px; }
.corazon { width: 22px; height: 20px; display: block; margin: 0 auto 10px; }
.dibujos-fila { display: flex; justify-content: center; gap: 26px; margin-top: 26px; }
.dibujos-fila svg { width: 56px; height: 48px; }
.deco { position: absolute; left: var(--x, 0); top: var(--y, 0); transform: rotate(var(--r, 0deg)); pointer-events: none; }
.deco--rebanada { width: 66px; height: 66px; filter: drop-shadow(0 4px 6px rgba(160, 120, 20, .25)); animation: girar-suave 14s linear infinite; }
.deco--limon { width: 70px; height: 62px; }
@keyframes girar-suave { to { transform: rotate(calc(var(--r, 0deg) + 360deg)); } }

/* Fondos: rayas, cuadros y celeste */
.celeste { background: var(--celeste-2); }
.cuadros { background:
  repeating-linear-gradient(45deg, rgba(242, 201, 76, .22) 0 14px, transparent 14px 28px),
  repeating-linear-gradient(-45deg, rgba(242, 201, 76, .22) 0 14px, transparent 14px 28px), #fff5cf; }
.rayas-azules { background: repeating-linear-gradient(90deg, var(--celeste) 0 26px, var(--crema) 26px 56px); }
.hero__rayas { position: absolute; inset: 0 0 38%; background: repeating-linear-gradient(90deg, var(--mantequilla-2) 0 30px, var(--crema) 30px 64px); }

/* Tarjetas con orilla ondulada (como papel recortado) */
.tarjeta-onda { position: relative; background: var(--crema); padding: 40px 24px 36px; border-radius: 28px; outline: 2.5px solid var(--rey); outline-offset: -10px;
  box-shadow: 0 0 0 6px var(--crema), 0 14px 30px rgba(31, 60, 143, .12); }
.tarjeta-onda--azul { outline-color: var(--rey); }
.marco-amarillo { position: relative; padding: 40px 26px 44px; border: 3px solid var(--limon); border-radius: 36px 20px 40px 24px / 22px 40px 26px 38px; background: #fffbe7; }

/* Portada */
.hero { position: relative; display: grid; justify-items: center; padding: calc(56px + env(safe-area-inset-top, 0px)) 18px 40px; overflow: hidden; }
.hero__marco { position: relative; z-index: 1; width: min(420px, 100%); text-align: center; background: var(--crema); padding: 34px 22px 30px;
  border-radius: 40px; outline: 2.5px solid var(--limon); outline-offset: -12px; box-shadow: 0 0 0 7px var(--crema), 0 0 0 9px var(--limon), 0 18px 36px rgba(31, 60, 143, .14); }
.hero__pre { font: 500 15px var(--fuente-display); letter-spacing: .4em; text-transform: uppercase; color: var(--rey); padding-left: .4em; }
.hero__nombres { font: 400 clamp(38px, 11vw, 54px)/1.35 var(--fuente-script); color: var(--rey); margin: 14px 0 0; }
.hero__nombres span { display: block; font: italic 400 .55em var(--fuente-display); color: var(--limon); line-height: 1; margin: -4px 0; }
.hero__mono { width: 70px; height: 46px; display: block; margin: 8px auto 4px; }
.hero__fecha { font: 500 26px var(--fuente-display); letter-spacing: .12em; color: var(--rey); }
.hero__lugar { font: 600 11px var(--fuente-texto); letter-spacing: .24em; text-transform: uppercase; color: #6f86c9; margin-top: 4px; }
.hero__foto { position: relative; z-index: 1; margin: 30px 0 0; width: min(620px, 100%); }
.hero__foto img { border-radius: 24px; border: 6px solid #fff; box-shadow: 0 0 0 2px var(--rey), 0 18px 40px rgba(31, 60, 143, .2); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.hero__foto .deco--limon { --x: calc(100% - 52px); --y: -30px; --r: 14deg; }
.hero__agendar { position: relative; z-index: 1; margin-top: 22px; }

/* ¡Por fin! */
.frase { font: italic 400 clamp(19px, 4.6vw, 22px)/1.6 var(--fuente-display); margin-top: 16px; }

/* Papás */
.padres-grid { margin-top: 20px; }
.padres__nombre { font: 400 22px/1.45 var(--fuente-display); }

/* Cuenta */
.cuenta__item { background: #fff; border: 2px solid var(--rey); border-radius: 16px; }
.cuenta__num { color: var(--rey); font-family: var(--fuente-display); }
.cuenta__lbl { color: #6f86c9; }

/* Banda */
.banda { height: 52svh; min-height: 320px; overflow: hidden; border-top: 10px solid var(--mantequilla-2); border-bottom: 10px solid var(--mantequilla-2); }
.banda img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* Historia */
.historia { margin-top: 30px; }
.hito { background: #fff; border-radius: 24px; padding: 26px 20px; box-shadow: 0 0 0 2px var(--celeste); }
.hito__num { display: none; }
.hito__fecha { font: 400 15px var(--fuente-script); letter-spacing: 0; text-transform: none; color: var(--limon); opacity: 1; }
.hito__titulo { font: 500 26px var(--fuente-display); color: var(--rey); }

/* Lugar */
.lugar__nombre { font: 500 28px/1.2 var(--fuente-display); margin-top: 6px; }
.lugar__dir { font-size: 15px; color: #5a6fae; margin: 10px 0 20px; }

/* Cronograma */
.crono { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.crono li { display: grid; gap: 2px; }
.crono__hora { font: 500 44px/1 var(--fuente-display); color: var(--rey); }
.crono__hora small { font-size: .38em; margin-left: 4px; letter-spacing: .08em; }
.crono__que { font: 500 13px var(--fuente-texto); letter-spacing: .2em; text-transform: uppercase; color: #6f86c9; }

/* Vestimenta */
.dress__codigo { font: 400 34px/1.2 var(--fuente-script); color: var(--limon); margin-top: 10px; }
#dress .boton { margin-top: 22px; }

/* Galería */
.galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
.gal__item { border-radius: 20px; border: 5px solid #fff; box-shadow: 0 0 0 2px var(--celeste); }

/* Regalos, hospedaje y preguntas */
.regalo { background: #fff; border-radius: 22px; box-shadow: 0 0 0 2px var(--celeste); }
.regalo__tienda { font: 500 26px var(--fuente-display); color: var(--rey); }
.hotel { background: #fff; border-radius: 22px; box-shadow: 0 0 0 2px var(--mantequilla-2); }
.hotel__nombre { font: 500 22px/1.25 var(--fuente-display); color: var(--rey); }
.hotel .boton { border: 1.6px solid var(--rey); }
.pregunta summary { font: 500 19px/1.35 var(--fuente-display); color: var(--rey); }

/* Pie */
.pie { background: var(--mantequilla); border-top: 10px solid var(--mantequilla-2); }
.pie__mono { width: min(220px, 58vw); margin: 0 auto; }
.rsvp-flotante { background: var(--rey); border-color: var(--rey); }

@media (prefers-reduced-motion: reduce) { .deco--rebanada { animation: none; } }