/* ============================================================
   base.css — Variables, reset y componentes compartidos
   Única fuente de verdad para design tokens.
   ============================================================ */

:root {
  /* Palette */
  --cream:        #f7f3e9;
  --cream-dark:   #ede8d8;
  --gold:         #c9a84c;
  --gold-light:   #e2c97e;
  --gold-pale:    #f0e0a0;
  --sage:         #8aa68a;
  --sage-dark:    #5e7a5e;
  --brown:        #7a5c38;
  --brown-light:  #b08a5a;
  --text-dark:    #2e2010;
  --text-mid:     #5c4020;
  --green-ok:     #3a7d44;
  --red-no:       #9b3a3a;

  /* Typography */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Cormorant Garamond", Georgia, serif;

  /* Spacing */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-pill: 20px;
}

/* ── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--cream);
  color: var(--text-dark);
  font-family: var(--font-body);
}

/* ── Hex background ─────────────────────────────────────── */
.hex-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201, 168, 76, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(138, 166, 138, 0.07) 0%, transparent 50%);
}

.hex-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V18L28 2l28 16v32z' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpath d='M28 100L0 84V52l28-16 28 16v32z' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 56px 100px;
}

/* ── Botanical corner SVGs ──────────────────────────────── */
.botanical {
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-size: contain;
}

.botanical-tl {
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238aa68a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 150 Q40 80 90 20'/%3E%3Cellipse cx='55' cy='90' rx='18' ry='10' transform='rotate(-40 55 90)' fill='%238aa68a' opacity='.4' stroke='none'/%3E%3Cellipse cx='72' cy='65' rx='15' ry='8' transform='rotate(-55 72 65)' fill='%238aa68a' opacity='.35' stroke='none'/%3E%3Cellipse cx='88' cy='42' rx='12' ry='7' transform='rotate(-60 88 42)' fill='%238aa68a' opacity='.3' stroke='none'/%3E%3Cpath d='M30 130 Q20 110 35 95'/%3E%3Cellipse cx='25' cy='112' rx='12' ry='6' transform='rotate(-20 25 112)' fill='%235e7a5e' opacity='.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

.botanical-tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238aa68a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 150 Q40 80 90 20'/%3E%3Cellipse cx='55' cy='90' rx='18' ry='10' transform='rotate(-40 55 90)' fill='%238aa68a' opacity='.4' stroke='none'/%3E%3Cellipse cx='72' cy='65' rx='15' ry='8' transform='rotate(-55 72 65)' fill='%238aa68a' opacity='.35' stroke='none'/%3E%3Cellipse cx='88' cy='42' rx='12' ry='7' transform='rotate(-60 88 42)' fill='%238aa68a' opacity='.3' stroke='none'/%3E%3Cpath d='M30 130 Q20 110 35 95'/%3E%3Cellipse cx='25' cy='112' rx='12' ry='6' transform='rotate(-20 25 112)' fill='%235e7a5e' opacity='.3' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

.botanical-bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238aa68a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 150 Q40 80 90 20'/%3E%3Cellipse cx='55' cy='90' rx='18' ry='10' transform='rotate(-40 55 90)' fill='%238aa68a' opacity='.4' stroke='none'/%3E%3Cellipse cx='72' cy='65' rx='15' ry='8' transform='rotate(-55 72 65)' fill='%238aa68a' opacity='.35' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

.botanical-br {
  right: 0;
  bottom: 0;
  transform: scale(-1, -1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238aa68a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 150 Q40 80 90 20'/%3E%3Cellipse cx='55' cy='90' rx='18' ry='10' transform='rotate(-40 55 90)' fill='%238aa68a' opacity='.4' stroke='none'/%3E%3Cellipse cx='72' cy='65' rx='15' ry='8' transform='rotate(-55 72 65)' fill='%238aa68a' opacity='.35' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Gold border frame ──────────────────────────────────── */
.gold-border-frame {
  position: absolute;
  inset: 14px;
  opacity: 0.5;
  pointer-events: none;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
}

.gold-border-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  opacity: 0.4;
  border: 0.5px solid var(--gold-light);
  border-radius: 1px;
}

/* ── Shared typography ──────────────────────────────────── */
.honeydots {
  margin: 1.2rem 0;
  opacity: 0.8;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.5em;
  text-align: center;
}

.subtitle-top {
  margin-bottom: 1.2rem;
  color: var(--brown-light);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.names {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(201, 168, 76, 0.2);
}

/* ── Status badges ──────────────────────────────────────── */
.status-badge {
  display: inline-block;
  font-size: 0.82rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.status-badge.confirmed {
  background: rgba(58, 125, 68, 0.12);
  color: var(--green-ok);
}

.status-badge.declined {
  background: rgba(155, 58, 58, 0.12);
  color: var(--red-no);
}

.status-badge.pending {
  background: rgba(176, 138, 90, 0.12);
  color: var(--brown-light);
}

/* ── Type badges ────────────────────────────────────────── */
.type-badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.type-badge.single {
  background: rgba(201, 168, 76, 0.12);
  color: var(--brown);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.type-badge.couple {
  background: rgba(94, 122, 94, 0.12);
  color: var(--sage-dark);
  border: 1px solid rgba(94, 122, 94, 0.3);
}

.type-badge.family {
  background: rgba(122, 92, 56, 0.12);
  color: var(--brown);
  border: 1px solid rgba(122, 92, 56, 0.3);
}

/* ── Animations ─────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s ease forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }
.delay-6 { animation-delay: 0.90s; }
.delay-7 { animation-delay: 1.05s; }
.delay-8 { animation-delay: 1.20s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hidden {
  display: none !important;
}