/* ============================================
   CLARISSA CUNHA — DESIGN TOKENS
   Extraído da logo: teal + lavanda + cream
   ============================================ */

:root {
  /* ——— Paleta primária ——— */
  --cc-teal:        #6BA6A1;   /* "Clarissa Cunha" script */
  --cc-teal-deep:   #3E6F6B;   /* hover, dark accents */
  --cc-teal-soft:   #A8CAC5;   /* backgrounds suaves */

  --cc-lavender:    #9E85B8;   /* buquê principal */
  --cc-lavender-deep: #6B4F8A;
  --cc-lavender-soft: #D4C4E2;
  --cc-lavender-mist: #EDE6F3;

  /* ——— Neutros quentes ——— */
  --cc-cream:       #FBF7F1;   /* fundo principal */
  --cc-cream-warm:  #F4EDE2;
  --cc-paper:       #EFE8DA;   /* cartões/seções */
  --cc-ink:         #2A2F3A;   /* texto principal (não preto puro) */
  --cc-ink-soft:    #5A5D68;
  --cc-ink-muted:   #8A8B92;
  --cc-line:        rgba(42, 47, 58, 0.12);
  --cc-line-soft:   rgba(42, 47, 58, 0.06);

  /* ——— Gradientes de apoio ——— */
  --cc-grad-petal:  linear-gradient(135deg, #EDE6F3 0%, #F4EDE2 50%, #E8F2F0 100%);
  --cc-grad-hero:   linear-gradient(180deg, rgba(251,247,241,0) 0%, rgba(251,247,241,0.6) 70%, var(--cc-cream) 100%);

  /* ——— Tipografia ——— */
  --ff-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --ff-script:  "Allura", "Great Vibes", "Dancing Script", cursive;
  --ff-sans:    "Jost", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ——— Escala tipográfica fluida ——— */
  --fs-tiny:  clamp(10px, 0.7vw, 12px);
  --fs-xs:    clamp(11px, 0.8vw, 13px);
  --fs-sm:    clamp(13px, 0.95vw, 15px);
  --fs-base:  clamp(15px, 1.05vw, 17px);
  --fs-md:    clamp(17px, 1.25vw, 19px);
  --fs-lg:    clamp(20px, 1.5vw, 24px);
  --fs-xl:    clamp(28px, 2.4vw, 40px);
  --fs-2xl:   clamp(44px, 5vw, 80px);
  --fs-3xl:   clamp(64px, 8vw, 140px);
  --fs-mega:  clamp(80px, 12vw, 220px);

  /* ——— Espaçamento ——— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 200px;

  /* ——— Layout ——— */
  --container-max: 1560px;
  --container-pad: clamp(24px, 4vw, 64px);

  /* ——— Efeitos ——— */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-soft:  0 6px 20px -8px rgba(42,47,58,0.15);
  --shadow-card:  0 30px 60px -30px rgba(42,47,58,0.25);
  --shadow-float: 0 50px 100px -40px rgba(42,47,58,0.35);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 250ms;
  --dur-2: 550ms;
  --dur-3: 900ms;
  --dur-4: 1400ms;
}

/* ——— Reset ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--cc-ink);
  background: var(--cc-cream);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
p { margin: 0; }
::selection { background: var(--cc-lavender-soft); color: var(--cc-lavender-deep); }

/* ——— Tipos utilitários ——— */
.t-display { font-family: var(--ff-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.02; }
.t-display-italic { font-family: var(--ff-display); font-style: italic; font-weight: 300; letter-spacing: -0.015em; line-height: 1.05; }
.t-eyebrow {
  font-family: var(--ff-sans); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cc-teal-deep);
}
.t-label {
  font-family: var(--ff-sans); font-size: var(--fs-tiny); font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cc-ink-muted);
}
.t-num { font-family: var(--ff-mono); font-feature-settings: "tnum"; letter-spacing: -0.02em; }

/* ——— Container ——— */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.container-wide { width: 100%; padding: 0 var(--container-pad); }

/* ——— Scroll reveal ——— */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="600"] { transition-delay: 600ms; }
[data-reveal="mask"] { clip-path: inset(0 100% 0 0); transform: none; opacity: 1; transition: clip-path 1400ms var(--ease-out); }
[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

/* ——— Accessibility ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   PREMIUM MICRO-INTERACTIONS & REFINEMENTS
   ============================================ */

/* Smooth image loading */
img {
  transition: opacity 400ms var(--ease-out);
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* Link underline premium */
a.link-underline {
  position: relative;
  display: inline-block;
}
a.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 400ms var(--ease-out);
}
a.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Divider ornamental */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cc-lavender);
  font-size: 18px;
  margin: var(--sp-7) 0;
}
.divider-ornament::before,
.divider-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cc-line);
}

/* Number display premium */
.num-display {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cc-teal);
  opacity: 0.15;
}

/* Emphasis color (was gradient text — replaced per impeccable rules) */
.text-gradient {
  color: var(--cc-lavender-deep);
  font-style: italic;
}

/* Card hover lift */
.card-lift {
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-float);
}

/* Glassmorphism */
.glass {
  background: rgba(251, 247, 241, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(251, 247, 241, 0.3);
}

/* ============ RESPONSIVE SPACING ============ */
@media (max-width: 1200px) {
  :root {
    --sp-11: 140px;
    --sp-10: 110px;
  }
}
@media (max-width: 900px) {
  :root {
    --sp-11: 100px;
    --sp-10: 80px;
    --sp-9:  64px;
  }
}
@media (max-width: 600px) {
  :root {
    --sp-11: 80px;
    --sp-10: 64px;
    --sp-9:  48px;
    --sp-8:  40px;
  }
}
@media (max-width: 480px) {
  :root {
    --sp-11: 64px;
    --sp-10: 52px;
    --sp-9:  40px;
    --sp-8:  32px;
  }
}