/* ───────────────────────────────────────────────────────────────
   Conexión Bachata — Design Tokens (v2)
   Warm cream canvas · hot pink, cobalt blue, antique gold accents.
   Colors extracted from the brand logo.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ─── Brand colors (from logo) ───────────────────── */
  --color-rose:          #E03070;   /* CONEXIÓN wordmark — primary pink   */
  --color-rose-deep:     #9D4449;   /* dancer's dress, burgundy variant   */
  --color-rose-soft:     #F4B19D;   /* C body, coral peach                */
  --color-rose-pale:     #FBE4DA;   /* tinted backgrounds                 */

  --color-blue:          #005090;   /* BACHATA wordmark — primary blue    */
  --color-blue-deep:     #1A2638;   /* deepest navy in B                  */
  --color-blue-slate:    #3D5266;   /* mid slate variant                  */
  --color-blue-pale:     #D9E2EC;   /* tinted backgrounds                 */

  --color-gold:          #C99846;   /* antique gold letterform outlines   */
  --color-gold-soft:     #E2BE7A;   /* highlight gold                     */
  --color-gold-deep:     #8C6A2C;   /* depth gold                         */

  /* ─── Surface ────────────────────────────────────── */
  --color-canvas:        #FBF6EE;   /* warm cream — DEFAULT page surface  */
  --color-canvas-soft:   #F4ECDE;   /* slightly warmer                    */
  --color-canvas-tint:   #EDE2D0;   /* card backs, hover                  */
  --color-canvas-deep:   #2B1F26;   /* warm charcoal for hero/footer      */
  --color-canvas-deeper: #1A1014;   /* deepest variant                    */

  --color-hairline:      #E5D8C0;   /* default 1px border on cream        */
  --color-hairline-dim:  #C8B89A;   /* stronger border                    */
  --color-hairline-dark: #4A3C44;   /* hairline on charcoal               */

  /* ─── Text ───────────────────────────────────────── */
  --color-ink-strong:    #1A1014;   /* hero headlines on cream            */
  --color-ink:           #2B1F26;   /* default body text                  */
  --color-body:          #5C4A4F;   /* secondary text                     */
  --color-mute:          #8C7B7E;   /* captions, fine print               */
  --color-on-rose:       #FFFFFF;   /* text on pink                       */
  --color-on-blue:       #FBF6EE;   /* text on blue                       */
  --color-on-dark:       #FBF6EE;   /* text on charcoal                   */

  /* ─── Font families ──────────────────────────────── */
  --font-serif:  "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Allura", "Dancing Script", cursive;
  --font-mono:   "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ─── Spacing (4px base) ─────────────────────────── */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;
  --space-7xl: 96px;

  /* ─── Radii ──────────────────────────────────────── */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ─── Elevation ──────────────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(43, 31, 38, 0.05), 0 0 0 1px var(--color-hairline);
  --elev-2: 0 8px 24px rgba(157, 68, 73, 0.08), 0 1px 3px rgba(43, 31, 38, 0.05);
  --elev-3: 0 24px 60px rgba(26, 38, 56, 0.18), 0 4px 12px rgba(43, 31, 38, 0.08);
  --elev-gold: 0 0 0 1px var(--color-gold-soft), 0 4px 16px rgba(201, 152, 70, 0.18);
}

/* ───────────────────────────────────────────────────────────────
   Base
   ─────────────────────────────────────────────────────────────── */
html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-feature-settings: "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

a { color: var(--color-rose); text-decoration: none; }
a:hover { color: var(--color-rose-deep); text-decoration: underline; }

/* ───────────────────────────────────────────────────────────────
   Semantic typography classes
   ─────────────────────────────────────────────────────────────── */
.t-display-xl {  /* hero headline */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 72px;
  line-height: 76px;
  letter-spacing: -1.2px;
  color: var(--color-ink-strong);
}
.t-display-lg {  /* section heading */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 50px;
  letter-spacing: -0.8px;
  color: var(--color-ink-strong);
}
.t-display-md {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.4px;
  color: var(--color-ink-strong);
}
.t-display-sm {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--color-ink);
}
.t-eyebrow-mono {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-rose);
}
.t-eyebrow-gold {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.t-script {
  font-family: var(--font-script);
  font-size: 36px;
  line-height: 36px;
  color: var(--color-rose);
}
.t-body-lg { font: 400 18px/30px var(--font-sans); color: var(--color-body); }
.t-body    { font: 400 16px/26px var(--font-sans); color: var(--color-body); }
.t-body-strong { font: 600 16px/24px var(--font-sans); color: var(--color-ink); }
.t-body-sm { font: 400 14px/22px var(--font-sans); color: var(--color-body); }
.t-body-sm-strong { font: 600 14px/22px var(--font-sans); color: var(--color-ink); }
.t-caption { font: 400 12px/16px var(--font-sans); color: var(--color-mute); }
.t-mono    { font: 500 13px/18px var(--font-mono); color: var(--color-body); }
.t-tabular { font: 500 14px/18px var(--font-mono); font-variant-numeric: tabular-nums;
             color: var(--color-ink); }

/* Raw markup shortcuts */
h1 { font: 500 72px/76px var(--font-serif); letter-spacing: -1.2px; color: var(--color-ink-strong); margin: 0 0 24px; }
h2 { font: 500 44px/50px var(--font-serif); letter-spacing: -0.8px; color: var(--color-ink-strong); margin: 0 0 20px; }
h3 { font: 500 30px/36px var(--font-serif); letter-spacing: -0.4px; color: var(--color-ink-strong); margin: 0 0 16px; }
h4 { font: 700 18px/24px var(--font-sans); color: var(--color-ink); margin: 0 0 12px; }
p  { font: 400 16px/26px var(--font-sans); color: var(--color-body); margin: 0 0 16px; }

/* ───────────────────────────────────────────────────────────────
   Component primitives
   ─────────────────────────────────────────────────────────────── */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
       font: 600 15px/20px var(--font-sans); padding: 12px 22px;
       border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer;
       transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
       letter-spacing: 0.1px; text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--color-rose); color: var(--color-on-rose);
               box-shadow: 0 6px 16px rgba(224, 48, 112, 0.25); }
.btn-primary:hover { background: var(--color-rose-deep); }

.btn-secondary { background: var(--color-blue); color: var(--color-on-blue);
                 box-shadow: 0 6px 16px rgba(0, 80, 144, 0.22); }
.btn-secondary:hover { background: var(--color-blue-deep); }

.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-hairline-dim); }
.btn-outline:hover { border-color: var(--color-rose); color: var(--color-rose); }

.btn-gold { background: var(--color-gold); color: var(--color-canvas-deep);
            box-shadow: 0 4px 12px rgba(201, 152, 70, 0.28); }
.btn-gold:hover { background: var(--color-gold-soft); }

.btn-ghost { background: transparent; color: var(--color-rose); padding: 12px 14px; }
.btn-ghost:hover { color: var(--color-rose-deep); text-decoration: underline; text-underline-offset: 4px; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px;
        font: 600 11px/16px var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase;
        padding: 4px 10px; border-radius: var(--radius-pill);
        background: var(--color-canvas-soft); color: var(--color-body);
        border: 1px solid var(--color-hairline); }
.pill-rose { background: var(--color-rose-pale); color: var(--color-rose-deep);
             border-color: rgba(224, 48, 112, 0.25); }
.pill-blue { background: var(--color-blue-pale); color: var(--color-blue);
             border-color: rgba(0, 80, 144, 0.20); }
.pill-gold { background: rgba(226, 190, 122, 0.18); color: var(--color-gold-deep);
             border-color: rgba(201, 152, 70, 0.40); }
.pill-live { background: var(--color-rose); color: var(--color-on-rose); border-color: var(--color-rose); }
.pill-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                     background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.7);
                     animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

/* Inputs */
.input { background: #FFFFFF; color: var(--color-ink);
         border: 1px solid var(--color-hairline-dim); border-radius: var(--radius-sm);
         font: 400 15px/22px var(--font-sans); padding: 12px 16px;
         width: 100%; outline: none;
         transition: border-color .15s ease, box-shadow .15s ease; }
.input::placeholder { color: var(--color-mute); }
.input:focus { border-color: var(--color-rose);
               box-shadow: 0 0 0 3px rgba(224, 48, 112, 0.15); }

/* Cards */
.card {
  background: #FFFFFF;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  color: var(--color-ink);
  box-shadow: var(--elev-1);
}
.card-cream { background: var(--color-canvas-soft); }
.card-rose  { background: var(--color-rose-pale); border-color: rgba(224,48,112,0.20); }
.card-blue  { background: var(--color-blue-pale); border-color: rgba(0,80,144,0.20); }
.card-featured { border: 2px solid var(--color-rose); box-shadow: var(--elev-2); }
.card-gold-edge { box-shadow: var(--elev-gold); }

/* Dark surfaces (used sparingly — hero accents, footers) */
.surface-dark { background: var(--color-canvas-deep); color: var(--color-on-dark); }
.surface-dark .t-display-xl, .surface-dark .t-display-lg, .surface-dark .t-display-md,
.surface-dark h1, .surface-dark h2, .surface-dark h3 { color: var(--color-on-dark); }
.surface-dark .t-body { color: rgba(251, 246, 238, 0.78); }
.surface-dark .t-caption { color: rgba(251, 246, 238, 0.55); }

/* Brand divider — gold rule */
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
             border: 0; margin: var(--space-4xl) 0; }
.gold-rule-short { height: 2px; width: 56px; background: var(--color-gold); border: 0;
                   margin: 0 0 20px; border-radius: 2px; }

/* Bands */
.hero-band, .content-band { padding: 64px 0; }

/* Nav + footer */
.nav-bar { background: rgba(251, 246, 238, 0.88); backdrop-filter: blur(14px);
           -webkit-backdrop-filter: blur(14px);
           border-bottom: 1px solid var(--color-hairline); }
.nav-link { color: var(--color-body); font: 500 14px/20px var(--font-sans); }
.nav-link:hover { color: var(--color-rose); }
.footer { background: var(--color-canvas-deep); color: rgba(251,246,238,0.72);
          padding: 64px 32px 40px; font: 400 14px/22px var(--font-sans); }