/* ═══════════════════════════════════════════════════════════
   Fondo fijo de los novios — Boda Lidia & David
   ───────────────────────────────────────────────────────────
   Se carga DESPUÉS de styles.css. Convierte las secciones en
   transparentes y mete el contenido en cajas color crema, para
   que la foto de fondo se vea alrededor y entre secciones.

   El fondo NO usa «background-attachment: fixed» (falla en los
   iPhone): se hace con dos capas de posición fija de verdad,
   que se comportan bien en móvil y en ordenador.

   La foto de fondo es assets/img/fondo.jpg: 1800x2400 px y 433 KB,
   optimizada a proposito para que cargue rapido en el movil. Para
   cambiarla, sustituye ese archivo por otro con el mismo nombre.
   ═══════════════════════════════════════════════════════════ */

/* ── Las dos capas fijas del fondo ─────────────────────────── */

.fondo-fijo,
.fondo-velo {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* no estorban al hacer scroll ni al pulsar */
}

.fondo-fijo {
  z-index: -2;
  background: url('../assets/img/fondo.jpg') center center / cover no-repeat;
}

/* Velo para que el texto de las cajas se lea siempre bien */
.fondo-velo {
  z-index: -1;
  background:
    linear-gradient(rgba(250, 246, 239, .40),
                    rgba(250, 246, 239, .20) 42%,
                    rgba(74, 66, 48, .30));
}

/* El cuerpo ya no pinta el crema: deja ver las capas de detrás */
body { background: transparent; }

/* ── Las secciones se vuelven transparentes ────────────────── */

.hero,
.section,
.section.story,
.section.details,
.section.gallery { background: transparent; }

/* ── Portada: el título, el logo y el contador, en su caja ── */

.hero__content {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.2rem) clamp(1.6rem, 5vw, 3rem);
  background: rgba(250, 246, 239, .88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(197, 165, 90, .35);
  box-shadow: 0 28px 60px -32px rgba(62, 58, 51, .65);
}

/* ── Cabeceras de sección: en una tarjeta translúcida ──────── */

.section__head {
  background: rgba(250, 246, 239, .82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.6rem 2rem 1.9rem;
  border: 1px solid rgba(197, 165, 90, .35);
  box-shadow: 0 24px 50px -30px rgba(62, 58, 51, .6);
}

/* ── Nuestra historia: cada recuerdo, una caja ─────────────── */

.story__item {
  background: rgba(250, 246, 239, .93);
  padding: clamp(1.2rem, 3vw, 1.9rem);
  border: 1px solid rgba(197, 165, 90, .3);
  box-shadow: 0 26px 55px -32px rgba(62, 58, 51, .6);
}

/* ── La boda: tarjeta, agenda y llamada a confirmar ────────── */

.details__cards .card,
.agenda,
.cta {
  background: rgba(250, 246, 239, .93);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid rgba(197, 165, 90, .3);
  box-shadow: 0 26px 55px -32px rgba(62, 58, 51, .6);
}

.agenda { margin-top: clamp(2rem, 5vw, 3rem); }

/* ── Galería: las fotos van sobre un panel para separarlas ── */

.gallery__grid {
  background: rgba(250, 246, 239, .55);
  padding: clamp(1rem, 3vw, 1.6rem);
  border-radius: 4px;
}

/* ── Pie: un velo verde translúcido en vez del bloque macizo ─ */

.footer {
  background: rgba(74, 93, 67, .90);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Los backdrop-filter piden algo de cuidado en móviles viejos;
   si no están soportados, las cajas siguen siendo legibles porque
   su fondo crema ya es casi opaco. */