/* Dreams · XV años en acuarela: flores, peonía, eucalipto, dorado y carbón */
:root {
  --fondo: #ffffff;
  --fondo-2: #fff6e9;
  --texto: #353535;
  --suave: #f6efe4;
  --acento: #c99a5b;
  --dorado: #eabf86;
  --carbon: #353535;
  --sobre-acento: #fff;
  --linea: rgba(201, 154, 91, .4);
  --encabezado-fondo: rgba(53, 53, 53, .92);
  --encabezado-texto: #fff;
  --menu-fondo: #fff;
  --fuente-display: "EB Garamond", Georgia, serif;
  --fuente-script: "Alex Brush", "Brush Script MT", cursive;
  --fuente-texto: "Work Sans", system-ui, sans-serif;
  --radio: 2px;
  --radio-foto: 4px;
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.espacio-sm { margin-top: 28px; }
.encabezado__marca { font-size: 30px; color: #fff; }
.boton { letter-spacing: .18em; }
.titulo-script { font: 400 clamp(46px, 9vw, 68px)/1.1 var(--fuente-script); color: var(--acento); }
.subtitulo { font: 400 30px var(--fuente-display); margin-top: 64px; }
.seccion-banda { padding-block: clamp(56px, 9vw, 96px); }

/* Fondos de flores en acuarela */
.flores { background: #fff url("../img/fondo-flores-1-1200.jpg") center top / cover no-repeat; }
.flores--2 { background-image: url("../img/fondo-flores-2-1200.jpg"); }
.flores--3 { background-image: url("../img/fondo-flores-3-1200.jpg"); }
.flores--4 { background-image: url("../img/fondo-flores-4-1200.jpg"); }
.flores::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); pointer-events: none; }
.flores > * { position: relative; }

/* Portada */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; color: #fff; text-align: center; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 40%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,30,30,.45), rgba(30,30,30,.25) 40%, rgba(30,30,30,.65)); }
.hero__contenido { padding: calc(90px + env(safe-area-inset-top, 0px)) 16px 60px; display: grid; justify-items: center; }
.hero__std { width: 150px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.hero__nombre { font-size: clamp(40px, 9vw, 64px); line-height: 1.1; margin-top: 4px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.fecha-grande { display: flex; align-items: center; gap: 18px; margin-top: 18px; font: 500 15px var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; }
.fecha-grande span:not(.fecha-grande__dia) { padding-block: 6px; border-block: 1px solid rgba(255,255,255,.7); min-width: 92px; }
.fecha-grande__dia { font: 400 64px/1 var(--fuente-display); letter-spacing: 0; }
.hero__honor { margin-top: 18px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.boton--linea-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }

/* Banda oscura con frase y peonía */
.frase-banda { background: var(--carbon); color: #fff; }
.frase { font: italic 400 clamp(21px, 3.6vw, 27px)/1.55 var(--fuente-display); max-width: 40ch; margin: 0 auto; letter-spacing: .02em; }
.peonia { width: 92px; margin: 22px auto 0; }

/* Nombre sobre pincelada */
.nombre-banda { background: var(--fondo-2); overflow: hidden; }
.nombre-banda .eyebrow { color: var(--texto); letter-spacing: .4em; }
.pincelada { background: url("../img/pincelada.png") center / contain no-repeat; padding: 16px 40px; max-width: 520px; margin: 0 auto; }
.pincelada h1 { font-size: clamp(70px, 16vw, 110px); line-height: 1; }
.nombre-banda__fecha { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.nombre-banda__honor { margin-top: 18px; font: italic 400 20px var(--fuente-display); }
.eucalipto { position: absolute; width: 110px; opacity: .9; pointer-events: none; }
.eucalipto--izq { left: -10px; bottom: 10px; }
.eucalipto--der { right: -14px; top: 20px; }

/* Familia */
.padres { display: grid; gap: 4px; margin-top: 12px; font: 400 clamp(26px, 4.6vw, 32px)/1.25 var(--fuente-display); }
.padres__y { font-family: var(--fuente-script); color: var(--acento); font-size: 40px; }
.padrinos { list-style: none; padding: 0; margin: 40px auto 0; display: grid; gap: 18px; }
.padrino { display: grid; gap: 2px; }
.padrino__rol { font: 400 40px/1 var(--fuente-script); color: var(--acento); }
.padrino__nombre { font: 400 26px var(--fuente-display); }

/* Cuenta regresiva */
.cuenta-sec { background: var(--carbon); color: #fff; }
.cuenta-sec .titulo-script { color: var(--dorado); }
.cuenta__item { border: 1px solid rgba(234, 191, 134, .5); }
.cuenta__num { color: var(--dorado); }

/* Eventos con íconos */
.evento { background: rgba(255,255,255,.88); border: 1px solid var(--linea); }
.evento::before { content: ""; width: 64px; height: 64px; background: url("../img/icono-misa.png") center / contain no-repeat; margin-bottom: 6px; }
.evento:nth-child(2)::before { background-image: url("../img/icono-fiesta.png"); }
.evento__tipo { color: var(--acento); }
.evento__hora { font-size: 34px; }
.itin__hora { color: var(--acento); }
.itin__txt { text-align: left; }

/* Detalles */
.detalles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.detalle { background: rgba(255,255,255,.9); padding: 34px 22px; border: 1px solid var(--linea); }
.detalle__icono { width: 84px; margin: 0 auto 10px; }
.detalle__texto { max-width: 30ch; margin: 0 auto; }
.vest__codigo { color: var(--acento); }

/* Galería */
.galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.hashtag { margin-top: 24px; }
.hashtag strong { color: var(--acento); }

/* Regalos */
.regalo { background: rgba(255,255,255,.9); border: 1px solid var(--linea); }
.regalo__tienda { color: var(--acento); }

/* Confirmar */
.confirmar { background: var(--fondo-2); }
.confirmar__std { width: 160px; margin: 0 auto 6px; }
.confirmar__texto { max-width: 46ch; margin: 10px auto 0; }

.pie { background: var(--carbon); color: #fff; }
.pie__nombre { color: var(--dorado); }

@media (max-width: 860px) { .encabezado nav a:not(.boton) { color: var(--texto); } }

/* Escritorio: texto compacto abajo para no tapar las caras de la foto */
@media (min-width: 900px) {
  .hero { place-items: end center; }
  .hero::before { background: linear-gradient(180deg, rgba(30,30,30,.35) 0%, rgba(30,30,30,0) 22%, rgba(30,30,30,0) 48%, rgba(30,30,30,.82) 100%); }
  .hero__foto { object-position: 50% 30%; }
  .hero__contenido { padding-bottom: 34px; }
  .hero__std { width: 92px; }
  .hero__nombre { font-size: 50px; }
  .fecha-grande { margin-top: 8px; }
  .fecha-grande__dia { font-size: 48px; }
  .hero__honor { margin-top: 10px; }
  .hero__acciones { margin-top: 16px; }
}