/* Boda de Olga y Juan · marfil, verde militar y caligrafía */
:root {
  --fondo: #f7f4ee;
  --suave: #efece3;
  --texto: #2f3224;
  --tenue: #6d705e;
  --acento: #5d6532;
  --oscuro: #3d4328;
  --salvia: #b0bd6b;
  --linea: #d9d5c6;
  --sobre-acento: #fff;
  --fuente-display: "Cormorant Garamond", Georgia, serif;
  --fuente-sc: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --fuente-script: "Pinyon Script", cursive;
  --fuente-texto: "Montserrat", system-ui, sans-serif;
  --radio-foto: 14px;
}
body { font: 500 19px/1.7 var(--fuente-display); }
.angosto { width: min(620px, 100% - 40px); }
.suave { background: var(--suave); }
.boton { font: 600 12px/1 var(--fuente-texto); letter-spacing: .16em; min-height: 46px; padding: 12px 26px; }
.boton svg { width: 16px; height: 16px; flex: none; }
.boton--grande { min-height: 54px; padding: 16px 34px; font-size: 13px; }
.boton--claro { background: var(--fondo); color: var(--acento); border-color: var(--fondo); }

/* Encabezados de sección: tres estrellas, título caligráfico y filete */
.estrellas { display: flex; justify-content: center; gap: 16px; color: var(--acento); margin-bottom: 18px; }
.estrellas svg { width: 22px; height: 22px; fill: currentColor; }
.estrellas--claras { color: var(--salvia); }
.titulo-script { font: 400 clamp(50px, 13vw, 72px)/1.15 var(--fuente-script); color: var(--acento); }
.filete { width: 64px; border: 0; border-top: 1px solid var(--salvia); margin: 22px auto 30px; }
.etiqueta { font: 500 11px/1.6 var(--fuente-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--tenue); }
.texto-intro { max-width: 46ch; margin: 0 auto; }

/* Portada */
.hero { position: relative; min-height: 100svh; display: grid; place-items: start center; overflow: hidden; color: var(--oscuro); }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247, 244, 238, .85) 0%, rgba(247, 244, 238, .45) 26%, rgba(247, 244, 238, 0) 42%, rgba(30, 32, 20, 0) 70%, rgba(30, 32, 20, .45) 100%); }
.hero__texto { position: relative; text-align: center; padding: 0 24px; margin-top: calc(5svh + env(safe-area-inset-top, 0px)); }
.hero__pre { font: 500 12px/1 var(--fuente-texto); letter-spacing: .4em; text-transform: uppercase; margin-bottom: 4px; color: var(--acento); }
.hero__logo { width: min(250px, 62vw); margin: 0 auto; }
.hero__fecha { font: 500 15px/1 var(--fuente-texto); letter-spacing: .32em; text-transform: uppercase; margin-top: 4px; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.hero__acciones { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
.btn-musica { background: var(--acento); color: #fff; border: 0; display: grid; place-items: center; }
.btn-musica svg { width: 20px; height: 20px; }

/* Invitación */
.frase { font: 500 italic clamp(21px, 4.6vw, 25px)/1.6 var(--fuente-display); max-width: 34ch; margin: 0 auto; }
.retrato { margin: 44px auto 0; width: min(330px, 76vw); padding: 12px 12px 14px; background: #fff; box-shadow: 0 18px 40px rgba(47, 50, 36, .14); transform: rotate(-2deg); }
.retrato img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.pareja { margin-top: 34px; display: grid; gap: 2px; justify-items: center; color: var(--acento); }
.pareja .script { font-size: clamp(48px, 12vw, 64px); line-height: 1.15; }
.pareja__y { font: 500 16px var(--fuente-display); color: var(--tenue); letter-spacing: .2em; }

/* Padres y padrinos */
.padres__frase { font-style: italic; color: var(--tenue); margin-bottom: 30px; }
.padres { display: grid; gap: 30px; }
.padres .etiqueta { margin-bottom: 8px; }
.padres__lista { display: grid; gap: 2px; }
.padres__nombre { font: 500 clamp(21px, 4.8vw, 25px)/1.4 var(--fuente-display); }
.padrinos { margin-top: 0; gap: 18px; grid-template-columns: 1fr; max-width: 460px; }
.padrino { background: #fff; border-radius: 18px; padding: 26px 22px; box-shadow: 0 10px 30px rgba(47, 50, 36, .07); }
.padrino__rol { font: 500 11px/1.6 var(--fuente-texto); letter-spacing: .26em; color: var(--acento); }
.padrino__nombre { font: 500 22px/1.4 var(--fuente-display); }

/* Calendario */
.calendario { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 34px rgba(47, 50, 36, .1); max-width: 380px; margin: 0 auto; }
.calendario__cab { background: var(--acento); color: #fff; padding: 18px 10px 16px; }
.calendario__mes { font: 600 22px/1.2 var(--fuente-sc); letter-spacing: .2em; }
.calendario__anio { font: 500 13px var(--fuente-texto); letter-spacing: .2em; opacity: .85; }
.calendario__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; padding: 12px 10px 16px; }
.calendario__sem { font: 600 10px/2.6 var(--fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--linea); margin-bottom: 6px; }
.calendario__dia { font: 500 17px/38px var(--fuente-texto); font-size: 14px; position: relative; color: var(--texto); }
.calendario__dia--boda { color: #fff; font-weight: 600; z-index: 0; }
.calendario__dia--boda::before { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; border-radius: 50%; background: var(--acento); transform: translate(-50%, -50%); z-index: -1; }
.calendario__dia--boda svg { position: absolute; width: 12px; height: 12px; fill: var(--salvia); top: -3px; right: calc(50% - 22px); }
.datos-fecha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.datos-fecha svg { width: 22px; height: 22px; color: var(--acento); }
.datos-fecha p:last-child { font: 600 20px/1.3 var(--fuente-display); }

/* Cuenta regresiva */
.oscuro { background: var(--oscuro); color: #f4f2e8; }
.oscuro .titulo-script { color: #f4f2e8; }
.etiqueta--clara { color: var(--salvia); margin-top: 6px; }
.cuenta__item { border: 1px solid rgba(176, 189, 107, .45); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.cuenta__num { font: 600 clamp(32px, 8vw, 44px)/1 var(--fuente-display); }
.cuenta__lbl { font: 500 10px var(--fuente-texto); letter-spacing: .2em; color: var(--salvia); opacity: 1; }

/* Bandas con foto y frase */
.banda { position: relative; height: 62svh; min-height: 380px; overflow: hidden; display: grid; place-items: center; }
.banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda::after { content: ""; position: absolute; inset: 0; background: rgba(30, 32, 20, .35); }
.banda__frase { position: relative; z-index: 1; color: #fff; text-align: center; font: 400 clamp(38px, 10vw, 60px)/1.25 var(--fuente-script); padding: 0 24px; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.banda--baja { height: 46svh; }
.banda--baja img { object-position: 50% 70%; }

/* Ceremonia y recepción */
.lugar__hora { font: 600 34px/1.2 var(--fuente-display); color: var(--acento); }
.lugar__nombre { font: 600 clamp(24px, 6vw, 30px)/1.25 var(--fuente-sc); letter-spacing: .06em; margin-top: 6px; }
.lugar__dir { color: var(--tenue); font-size: 17px; margin-top: 6px; }
.lugar__mapa { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; margin: 26px 0; background: #fff; box-shadow: 0 12px 30px rgba(47, 50, 36, .1); }
.lugar__mapa iframe { width: 100%; height: 100%; border: 0; }

/* Itinerario con íconos */
.itinerario { list-style: none; padding: 0; margin: 0 auto; max-width: 460px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
.paso { display: grid; justify-items: center; gap: 6px; }
.paso__icono { width: 64px; height: 64px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.paso__icono svg { width: 28px; height: 28px; }
.paso__hora { font: 600 21px/1 var(--fuente-display); }
.paso__titulo { font: 500 11px/1.4 var(--fuente-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }

/* Galería en carrusel */
.galeria { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(20px, calc((100% - 420px) / 2)) 10px; margin-top: 0; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 min(78vw, 420px); scroll-snap-align: center; aspect-ratio: 4 / 5; box-shadow: 0 12px 30px rgba(47, 50, 36, .12); }
.galeria__puntos { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.galeria__puntos span { width: 7px; height: 7px; border-radius: 50%; background: var(--linea); transition: background .2s, transform .2s; }
.galeria__puntos span.activo { background: var(--acento); transform: scale(1.25); }

/* Código de vestimenta */
.dress__codigo { font: 600 clamp(26px, 6.4vw, 32px)/1.2 var(--fuente-sc); letter-spacing: .08em; margin-bottom: 12px; }
.dress__colores { display: flex; justify-content: center; gap: 26px; margin-top: 26px; }
.dress__color { display: grid; justify-items: center; gap: 6px; font: 500 12px var(--fuente-texto); color: var(--tenue); }
.dress__muestra { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); box-shadow: 0 4px 12px rgba(47, 50, 36, .1); }
.dress__nota { font-style: italic; color: var(--tenue); margin-top: 14px; font-size: 17px; }
.dress__clima { margin: 26px auto 0; max-width: 40ch; padding: 16px 20px; border: 1px dashed var(--salvia); border-radius: 14px; font-size: 17px; }

/* Hospedaje */
.hoteles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 30px; max-width: 900px; margin-inline: auto; }
.hotel { background: #fff; border-radius: 16px; padding: 24px 20px; box-shadow: 0 10px 26px rgba(47, 50, 36, .07); gap: 4px; }
.hotel__nombre { font: 600 22px/1.25 var(--fuente-sc); letter-spacing: .04em; }
.hotel__detalle { font-size: 17px; color: var(--tenue); opacity: 1; }
.hotel .boton { min-height: 40px; padding: 10px 20px; font-size: 11px; background: transparent; color: var(--acento); }

/* Pie */
.pie { background: var(--oscuro); color: #f4f2e8; }
.pie__nombres { font: 400 clamp(50px, 13vw, 70px)/1.1 var(--fuente-script); }
.pie__fecha { font: 500 12px var(--fuente-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--salvia); margin-top: 8px; }
.credit { font-family: var(--fuente-texto); font-size: 12px; }
.btn-musica[hidden] { display: none; }
.hotel__ligas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.hero__logo { margin-top: 6px; }
@media (max-height: 700px) { .hero__logo { width: 200px; } .hero__texto { margin-top: 3svh; } }
.regalo { background: #fff; border-radius: 16px; box-shadow: 0 10px 26px rgba(47, 50, 36, .07); }
.regalo__tienda { font: 600 24px/1.2 var(--fuente-sc); letter-spacing: .08em; }
.regalo__num { font: 500 13px var(--fuente-texto); letter-spacing: .14em; color: var(--tenue); opacity: 1; }