/* ==========================================================================
   Ovos da Horta · Variables globais (design tokens)
   Os valores fluídos escalan entre 390px (mobile) e 1440px (desktop),
   que son os dous anchos do deseño orixinal en Pen.
   ========================================================================== */

:root {
  /* ---------- Cores base ---------- */
  --color-cream: #F5EEDF;
  --color-cream-2: #EADFC8;
  --color-paper: #FBF7EE;
  --color-ink: #211B14;
  --color-ink-soft: #5E5346;
  --color-olive: #4D5530;
  --color-olive-dark: #2C3120;
  --color-yolk: #F4B223;
  --color-terracotta: #B4532A;
  --color-charcoal: #262523;
  --color-sage: #C9C29A;
  --color-sand: #E3DCB8;
  --color-caramel: #D9A066;
  --color-white: #FFFFFF;

  /* Chat de WhatsApp */
  --color-chat-bg: #EFE7DA;
  --color-bubble-out: #D9EBC4;
  --color-bubble-in: var(--color-white);

  /* Ovos (bandexa de prezos) */
  --egg-gradient: radial-gradient(ellipse 65% 65% at 38% 32%, #E9B07E 0%, #B9733F 100%);

  /* ---------- Transparencias de uso común ---------- */
  --cream-90: color-mix(in srgb, var(--color-cream) 90%, transparent);
  --cream-85: color-mix(in srgb, var(--color-cream) 85%, transparent);
  --cream-80: color-mix(in srgb, var(--color-cream) 80%, transparent);
  --cream-75: color-mix(in srgb, var(--color-cream) 75%, transparent);
  --cream-70: color-mix(in srgb, var(--color-cream) 70%, transparent);
  --cream-65: color-mix(in srgb, var(--color-cream) 65%, transparent);
  --cream-60: color-mix(in srgb, var(--color-cream) 60%, transparent);
  --cream-50: color-mix(in srgb, var(--color-cream) 50%, transparent);
  --cream-40: color-mix(in srgb, var(--color-cream) 40%, transparent);
  --cream-25: color-mix(in srgb, var(--color-cream) 25%, transparent);
  --cream-08: color-mix(in srgb, var(--color-cream) 8%, transparent);

  --line-ink: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --line-ink-strong: color-mix(in srgb, var(--color-ink) 15%, transparent);
  --line-ink-outline: color-mix(in srgb, var(--color-ink) 20%, transparent);
  --line-cream: color-mix(in srgb, var(--color-cream) 12%, transparent);
  --line-cream-strong: color-mix(in srgb, var(--color-cream) 15%, transparent);

  /* ---------- Tipografía ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  --fs-h1: clamp(3rem, 1.8857rem + 4.5714vw, 6rem);              /* 48 → 96 */
  --fs-h2: clamp(2.75rem, 2.1rem + 2.6667vw, 4.5rem);             /* 44 → 72 */
  --fs-h2-sm: clamp(2.25rem, 1.7857rem + 1.9048vw, 3.5rem);       /* 36 → 56 */
  --fs-cta: clamp(4rem, 3.0714rem + 3.8095vw, 6.5rem);            /* 64 → 104 */
  --fs-lead: clamp(1rem, 0.9304rem + 0.2857vw, 1.1875rem);        /* 16 → 19 */
  --fs-intro: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);        /* 16 → 18 */
  --fs-price: clamp(3.25rem, 2.9714rem + 1.1429vw, 4rem);         /* 52 → 64 */
  --fs-quote: clamp(1.625rem, 1.3rem + 1.3333vw, 2.5rem);         /* 26 → 40 */
  --fs-quote-mark: clamp(5rem, 4.0714rem + 3.8095vw, 7.5rem);     /* 80 → 120 */
  --fs-step-num: clamp(2rem, 1.7214rem + 1.1429vw, 2.75rem);      /* 32 → 44 */
  --fs-h3: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem);           /* 20 → 24 */
  --fs-faq-q: clamp(1.125rem, 0.9857rem + 0.5714vw, 1.5rem);      /* 18 → 24 */
  --fs-faq-a: clamp(0.9375rem, 0.8911rem + 0.1905vw, 1.0625rem);  /* 15 → 17 */
  --fs-hen: clamp(2.125rem, 1.9857rem + 0.5714vw, 2.5rem);        /* 34 → 40 */
  --fs-format: clamp(1.75rem, 1.6571rem + 0.381vw, 2rem);         /* 28 → 32 */
  --fs-eyebrow: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem);  /* 12 → 13 */
  --fs-body: 1rem;      /* 16 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-xs: 0.875rem;    /* 14 */
  --fs-2xs: 0.8125rem;  /* 13 */
  --fs-3xs: 0.75rem;    /* 12 */

  --ls-display: -0.028em;
  --ls-hero: -0.031em;
  --ls-eyebrow: 0.19em;

  /* ---------- Espazado ---------- */
  --content-max: 1296px;                                           /* 1440 − 2 × 72 */
  --gutter: clamp(1.25rem, 0.0429rem + 4.9524vw, 4.5rem);          /* 20 → 72 */
  --section-y: clamp(4.5rem, 3.2rem + 5.3333vw, 8rem);             /* 72 → 128 */
  --stack-head: clamp(1.5rem, 0.6643rem + 3.4286vw, 4rem);         /* 24 → 64 */
  --gap-columns: clamp(3rem, 0.5rem + 6.25vw, 6rem);               /* 48 → 96 */

  /* Altura mínima do hero (en svh se o navegador o admite; ver abaixo) */
  --hero-min-height: 100vh;

  /* ---------- Formas ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-yolk: 0 10px 30px color-mix(in srgb, var(--color-yolk) 25%, transparent);
  --shadow-card: 0 20px 40px color-mix(in srgb, var(--color-olive-dark) 20%, transparent);
  --shadow-note: 0 6px 18px color-mix(in srgb, var(--color-ink) 15%, transparent);
  --shadow-chat: 0 30px 60px rgb(0 0 0 / 0.35);

  /* ---------- Movemento ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

@supports (height: 100svh) {
  :root {
    --hero-min-height: 100svh;
  }
}