/* =========================================================
   Layout — mobile-first (el teléfono es el diseño base;
   las mejoras para pantallas grandes viven en responsive.css)
========================================================= */

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 16px var(--gutter);
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
}

/* ---------- Secciones genéricas ---------- */
.section {
  position: relative;
  padding: var(--section-y) var(--gutter);
  overflow: hidden;
}

.section-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Historia (timeline): fotos centradas, ensartadas en una línea ---------- */
.timeline {
  position: relative;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 4px; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(var(--vino), var(--plateado-oscuro));
}

.timeline-item {
  position: relative;
  text-align: center;
  margin-bottom: 2.4rem;
}

.timeline-item:last-child { margin-bottom: 0; }

/* ---------- Lluvia de sobres ---------- */
.section-sobres { text-align: center; }
.envelope-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.section-sobres .section-inner { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  padding: 3rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
}