/* ════════════════════════════════════════════
   GLOBAL STYLES — Michelle & Ricardo
   Edit this file to change colors/fonts site-wide
   ════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Jost:wght@200;300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────── */
:root {
  --cream:       #fdfdfc;       /* page background — near white */
  --cream-mid:   #f7f2ec;       /* card backgrounds, subtle sections */
  --cream-dark:  #ede5da;       /* borders, input backgrounds */
  --white:       #ffffff;
  --dark:        #1a1210;       /* body text — darker for contrast */
  --dark-mid:    #2e2218;       /* secondary text */
  --rose:        #9b5a52;
  --rose-light:  #c4847a;
  --rose-pale:   #f5e6e4;
  --gold:        #b8965a;
  --gold-light:  #d4b483;
  --gold-pale:   #f5edd8;
  --muted:       #7a6e62;
  --border:      #e2d8ce;
  --green:       #3d6b52;
  --red:         #8b3a3a;
  --shadow-sm:   0 4px 20px rgba(42,31,26,0.06);
  --shadow-md:   0 12px 50px rgba(42,31,26,0.10);
  --nav-h:       68px;
}

/* ── RESET ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--dark);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPE SCALE ─────────────────────────────────
   Single source of truth for font sizes.
   All page files reference these variables.
   To resize everything: change here only.
   ─────────────────────────────────────────────── */
:root {
  /* UI labels — badges, tags, tiny caps */
  --t-badge:   0.72rem;   /* was ~0.56-0.62rem */
  /* Body small — descriptions, notes, captions */
  --t-small:   0.88rem;   /* was ~0.78-0.82rem */
  /* Body standard — venue names, general text */
  --t-body:    0.96rem;   /* was ~0.88-0.92rem */
  /* Subheadings — card titles, section labels */
  --t-sub:     1.1rem;    /* was ~1.05rem */
  /* Serif card titles */
  --t-card:    1.5rem;    /* was ~1.3rem */
  /* Section serif titles (Hotels, Tourism…) */
  --t-section: 2rem;      /* was ~1.8rem */
  /* Page eyebrows (NOSOTROS, CON MUCHO AMOR…) */
  --t-eyebrow: 0.88rem;   /* was ~0.62rem */
}

/* ── TYPOGRAPHY UTILITIES ───────────────────── */
.eyebrow {
  font-size: var(--t-eyebrow); letter-spacing: 4px; text-transform: uppercase;
  color: var(--rose-light); font-weight: 500;
}
.serif-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-style: italic; color: var(--dark);
}
.divider-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose-light), transparent);
  margin: 0 auto;
}

/* ── PAGE HERO (shared across tabs) ─────────── */
.page-hero {
  text-align: center;
  padding: 70px 24px 48px;
}
.page-hero::after {
  content: ''; display: block; width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose-light), transparent);
  margin: 22px auto 0;
}
.page-hero .eyebrow { margin-bottom: 12px; display: block; }
.page-hero .serif-title { font-size: clamp(2.4rem, 5vw, 3.6rem); }

/* ── CARD ────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }

/* ── BUTTON ──────────────────────────────────── */
.btn {
  display: block; width: 100%;
  padding: 13px 24px;
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; border: none; border-radius: 2px;
  transition: all 0.2s; margin-top: 10px;
}
.btn-primary { background: var(--rose); color: white; }
.btn-primary:hover { background: var(--dark); }
.btn-primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--rose); color: var(--rose); }

/* ── FOOTER ──────────────────────────────────── */
footer {
  background: var(--dark); color: var(--muted);
  text-align: center; padding: 40px 24px;
}
footer .footer-names {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-style: italic; font-weight: 300;
  color: var(--rose-light); margin-bottom: 8px;
}
footer .footer-date {
  font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase;
}

/* ── ANIMATIONS ──────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ken-burns {
  0%   { transform: scale(1)    translate(0,0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}
@keyframes ken-burns-r {
  0%   { transform: scale(1)    translate(0,0); }
  100% { transform: scale(1.08) translate(1%, -1%); }
}