/* ============================================
   Ana & Pablo — Web de boda
   Paleta: crudo / dorado / verde salvia
============================================ */

:root {
  --cream: #faf6f0;
  --cream-alt: #f3ece1;
  --ink: #3a3630;
  --ink-soft: #6b6459;
  --gold: #b8925a;
  --gold-dark: #8f6f42;
  --sage: #8a9a82;
  --sage-dark: #6d7d66;
  --white: #ffffff;
  --thread-red: #8c2f39;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Montserrat', sans-serif;
  --max-width: 1100px;
}
/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-texto);
    color: var(--color-oscuro);
    background-color: var(--color-claro);
    line-height: 1.2; /* Interlineado general compacto */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container.narrow {
    max-width: 600px; /* Contenedor más estrecho para la historia */
}

.center {
    text-align: center;
}

/* Fuerza a que el contenido sea visible si fallan los scripts */
.reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ==========================================================================
   2. HEADER & NAV
   ========================================================================== */
.site-header {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-brand {
    font-family: var(--fuente-titulos);
    font-size: 24px;
    text-decoration: none;
    color: var(--color-oscuro);
    font-weight: 500;
}

/* ==========================================================================
   3. SECCIÓN INICIO (HERO) & COUNTDOWN
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  padding: 30px 0; /* Espaciado vertical reducido */
    text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(184,146,90,0.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(138,154,130,0.10), transparent 60%),
    var(--cream);
  position: relative;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 1.25rem;
  color: var(--sage-dark);
  margin-bottom: 18px;
}

.hero-names {
    font-family: var(--fuente-titulos);
    font-size: 42px;
    font-weight: 400;
}
.hero-names .amp {
  color: var(--gold);
  font-style: italic;
  padding: 0 12px;
}

/* Contador */
.countdown {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-number {
    font-size: 28px;
    font-weight: 600;
}

.countdown-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-gris);
}

/* ==========================================================================
   4. SECCIÓN NUESTRA HISTORIA (SÚPER COMPACTA)
   ========================================================================== */
.section.thread-section {
    padding-top: 20px !important;    /* Distancia mínima con la sección de arriba */
    padding-bottom: 20px !important; /* Distancia mínima con la sección de abajo */
}

.section-title {
    font-family: var(--fuente-titulos);
    font-size: 32px;
    font-weight: 500;
    margin-top: 2px;
    margin-bottom: 10px; /* Espacio corto antes del texto */
}

.story {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Junta los párrafos entre sí horizontalmente */
}

.story p {
    font-size: 20px;
    line-height: 1.15 !important; /* Texto muy junto y compacto */
    text-align: justify;
    color: #444444;
}

/* Formato específico para la frase destacada de la boda */
.story .destacado, 
.story p h1 b {
    font-family: var(--fuente-titulos);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    display: block;
    line-height: 1.15 !important;
    margin: 4px 0 !important;
    color: var(--color-oscuro);
}