/* Jardín · boda de primavera: acuarela, verde salvia, rosa palo y ramas dibujadas */
:root {
  --fondo: #fbf7f1;
  --texto: #3d4637;
  --salvia: #87977a;
  --bosque: #4b5a45;
  --rosa: #e8c3bc;
  --durazno: #f3dccb;
  --suave: #eef0e6;
  --acento: #6f8263;
  --sobre-acento: #fff;
  --linea: rgba(111, 130, 99, .35);
  --encabezado-fondo: rgba(251, 247, 241, .92);
  --menu-fondo: #fbf7f1;
  --fuente-display: "Cormorant Garamond", Georgia, serif;
  --fuente-script: "Parisienne", "Brush Script MT", cursive;
  --fuente-texto: "Mulish", system-ui, sans-serif;
  --radio: 999px;
  --radio-foto: 18px;
}
.encabezado__marca { font-size: 28px; color: var(--acento); }
.eyebrow { color: var(--salvia); }
.titulo-script { font: 400 clamp(52px, 12vw, 80px)/1.05 var(--fuente-script); color: var(--acento); }

/* Manchas de acuarela */
.acuarela { position: relative; isolation: isolate; overflow: hidden; }
.acuarela::before, .acuarela::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .7; }
.acuarela::before { width: 70vw; max-width: 620px; aspect-ratio: 1; left: -18vw; top: -10%; background: radial-gradient(circle at 40% 40%, var(--rosa), transparent 68%); }
.acuarela::after { width: 64vw; max-width: 560px; aspect-ratio: 1; right: -16vw; bottom: -12%; background: radial-gradient(circle at 60% 60%, #cfd9c4, transparent 68%); }

/* Ramas y flores */
.flor { display: block; color: var(--rosa); }
.rama-centro { width: 200px; height: 70px; color: var(--salvia); display: block; margin: 0 auto 18px; }
.rama-centro--clara { color: rgba(255,255,255,.75); }
.flor--icono { width: 40px; height: 40px; margin: 0 auto 14px; }

/* Portada */
.hero { min-height: 100svh; display: grid; place-items: center; gap: 30px; padding: calc(96px + env(safe-area-inset-top, 0px)) 16px 64px; text-align: center; }
.hero__marco { position: relative; width: min(74vw, 400px); }
.hero__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 50%; box-shadow: 0 0 0 10px #fff, 0 20px 50px rgba(75, 90, 69, .18); }
.adorno { position: absolute; width: 62%; height: auto; aspect-ratio: 160 / 60; color: var(--salvia); z-index: 1; }
.adorno--a { left: -22%; bottom: 4%; transform: rotate(-24deg); }
.adorno--b { right: -32%; top: -2%; transform: rotate(156deg); color: var(--acento); }
.hero__marco .flor { position: absolute; z-index: 2; }
.flor--1 { width: 54px; height: 54px; left: -4%; bottom: 14%; }
.flor--2 { width: 38px; height: 38px; left: 10%; bottom: 3%; color: var(--durazno); }
.flor--3 { width: 46px; height: 46px; right: -2%; top: 16%; }
.hero__texto { display: grid; justify-items: center; }
.hero__nombres { font-size: clamp(64px, 17vw, 112px); line-height: 1.05; color: var(--bosque); }
.hero__nombres span { display: inline-block; }
.hero__y { color: var(--rosa); font-size: .8em; }
.hero__fecha { font: italic 400 25px var(--fuente-display); margin-top: 10px; }
.hero__lugar { font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--salvia); margin-top: 4px; font-weight: 700; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 400px minmax(0, 520px); justify-content: center; gap: 96px; }
}

/* Tarjetas */
.tarjeta { background: #fff; border-radius: 28px; padding: 36px 24px; box-shadow: 0 10px 40px rgba(75, 90, 69, .08); }

/* Invitación */
.frase { font: italic 400 clamp(25px, 4.4vw, 34px)/1.4 var(--fuente-display); max-width: 32ch; margin: 0 auto; }
.padres__titulo { font-size: 30px; color: var(--acento); margin-bottom: 8px; }
.padres__nombre { font-weight: 500; }
.invitacion__cierre { margin-top: 40px; font: italic 400 26px var(--fuente-display); color: var(--acento); }

/* Historia */
.salvia { background: var(--acento); color: #fff; }
.salvia .titulo-script { color: #fff; }
.hito { background: rgba(255,255,255,.1); border-radius: 28px; padding: 34px 24px; text-align: center; }
.hito__num { color: var(--rosa); }
.hito__fecha { opacity: .8; }

/* Cuenta regresiva */
.cuenta__item { background: #fff; border-radius: 50%; aspect-ratio: 1; align-content: center; box-shadow: 0 8px 26px rgba(75, 90, 69, .1); }
.cuenta__num { font-weight: 500; color: var(--bosque); font-size: clamp(30px, 8vw, 50px); }
.cuenta__lbl { color: var(--salvia); font-weight: 700; }

/* Celebración */
.evento { background: #fff; border-radius: 28px; box-shadow: 0 10px 40px rgba(75, 90, 69, .08); }
.evento__tipo { color: var(--salvia); }
.evento__hora { color: var(--acento); font-weight: 500; }
.itin-caja { margin: 40px auto 0; max-width: 620px; }
.subtitulo { font: 400 44px var(--fuente-script); color: var(--acento); }
.itinerario { margin-top: 20px; }
.itin__hora { color: var(--acento); font-weight: 500; }
.itin__txt { text-align: left; }
.itin__punto { background: var(--rosa); width: 14px; height: 14px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--rosa); }

/* Padrinos */
.rosa { background: var(--durazno); }
.padrino__rol { color: var(--acento); }

/* Detalles */
.detalles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.vest__codigo, .regalo__tienda { color: var(--acento); font-style: italic; }
.regalo { padding: 16px 8px; }

/* Hospedaje */
.hotel { background: #fff; border-radius: 28px; box-shadow: 0 10px 40px rgba(75, 90, 69, .08); }
.hotel__nombre { color: var(--acento); font-style: italic; }

/* Galería: fotos con esquinas de arco alternadas */
.gal__item:nth-child(odd) { border-radius: 200px 200px 18px 18px; }
.gal__item:nth-child(even) { border-radius: 18px 18px 200px 200px; }
.hashtag { margin-top: 26px; }
.hashtag strong { color: var(--acento); }

/* Preguntas */
.faq.tarjeta { padding: 8px 26px; }
.pregunta:last-child { border-bottom: 0; }

/* Confirmar */
.confirmar { background: linear-gradient(160deg, var(--acento) 0%, #9fae8e 100%); color: #fff; }
.confirmar .titulo-script { color: #fff; }
.confirmar__texto { max-width: 44ch; margin: 10px auto 0; }
.boton--claro { background: #fff; color: var(--acento); border-color: #fff; }
.boton--linea-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }

.pie__nombre { color: var(--acento); font-size: 54px; }