/* ==========================================================================
   critical.css — above-the-fold
   Tokens · reset · header · hero
   Ordem das camadas declarada uma única vez: tudo o que vier depois
   (base.css, style.css) encaixa nesta cascata sem guerras de especificidade.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;

/* --------------------------------------------------------------------------
   TOKENS
   light-dark() resolve cada cor a partir de color-scheme. O tema manual
   apenas força color-scheme no :root — não há paleta duplicada.
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Marca (extraída do logótipo BIG) */
    --brand:          #45a2b4;
    --brand-strong:   light-dark(#1b6574, #86cfdc);
    --brand-tint:     light-dark(#e3f1f4, #12323a);

    /* Superfícies e texto */
    --bg:             light-dark(#f4f8f9, #081419);
    --surface:        light-dark(#ffffff, #0e2027);
    --surface-2:      light-dark(#eaf2f4, #122a32);
    --ink:            light-dark(#0f2a33, #e6f0f2);
    --ink-soft:       light-dark(#48636c, #9fb7be);
    --line:           light-dark(#d3e2e6, #1f3d47);
    --line-strong:    light-dark(#b3cbd1, #2d5360);

    /* Sinal (CTA) — o âmbar dos quatro-piscas: pede ação, nunca decora */
    --signal:         #f5b83d;
    --signal-hover:   #f2a818;
    --on-signal:      #1b1404;

    --danger:         light-dark(#b42318, #ff9486);
    --success:        light-dark(#12704f, #63d7a6);

    --shadow-rgb:     light-dark(15 42 51, 0 0 0);
    --shadow-card:    0 1px 2px rgb(var(--shadow-rgb) / .06),
                      0 28px 56px -24px rgb(var(--shadow-rgb) / .28);

    /* Tipografia */
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-body:    "Figtree", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

    /* Escala fluida (razão ~1.25) */
    --step--1: .875rem;
    --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
    --step-2:  clamp(1.375rem, 1.24rem + .6vw, 1.75rem);
    --step-3:  clamp(1.75rem, 1.48rem + 1.2vw, 2.5rem);
    --step-4:  clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);

    /* Espaçamento (base 4) */
    --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
    --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

    /* Raios com hierarquia: controlos < cartões < painéis */
    --r-control: 10px;
    --r-card:    16px;
    --r-panel:   24px;

    --container: 1200px;
    --gutter:    clamp(1rem, .5rem + 2.5vw, 2rem);
    --header-h:  72px;

    --ease-out: cubic-bezier(.2, .8, .2, 1);
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    interpolate-size: allow-keywords;          /* permite animar até height:auto */
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
    hanging-punctuation: first last;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }

  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; }
  p, li, dd { text-wrap: pretty; }
  [hidden] { display: none !important; }
}

/* --------------------------------------------------------------------------
   BASE MÍNIMA (o necessário para o primeiro ecrã)
   -------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
    background: var(--bg);
  }

  :focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--s-4);
    inset-block-start: -100px;
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-control);
    font-weight: 600;
    text-decoration: none;
    &:focus { inset-block-start: var(--s-4); }
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
}

@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s, background-color .25s;

    &.is-scrolled {
      border-block-end-color: var(--line);
      box-shadow: 0 6px 24px -18px rgb(var(--shadow-rgb) / .5);
    }
  }

  .site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 6px;
    & img { width: auto; height: 48px; }
  }

  /* No escuro o azul-petróleo do logo ganha luminosidade para manter contraste */
  :root:is([data-theme="dark"]) .brand img,
  .footer-brand img { transition: filter .25s; }
  :root[data-theme="dark"] .brand img,
  :root[data-theme="dark"] .footer-brand img { filter: brightness(1.28) saturate(1.1); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand img,
    :root:not([data-theme="light"]) .footer-brand img { filter: brightness(1.28) saturate(1.1); }
  }

  .nav-primary {
    margin-inline-start: auto;
    & ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; }
    & a {
      display: block;
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-control);
      font-weight: 500;
      font-size: .9375rem;
      color: var(--ink-soft);
      text-decoration: none;
      transition: color .2s, background-color .2s;
      &:hover { color: var(--ink); background: var(--surface-2); }
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-control);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 1.125rem;
    transition: border-color .2s, background-color .2s;
    &:hover { border-color: var(--line-strong); background: var(--surface-2); }
  }

  /* Ícone do tema: mostra o destino da ação */
  .theme-toggle .bi-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle {
    & .bi-sun { display: inline; }
    & .bi-moon-stars { display: none; }
  }

  .menu-toggle { display: none; }

  @media (max-width: 959px) {
    .nav-primary, .header-actions .btn { display: none; }
    .header-actions { margin-inline-start: auto; }
    .menu-toggle { display: inline-grid; }
    .brand img { height: 36px; }
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
@layer sections {
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(1.5rem, .75rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
    background:
      radial-gradient(60rem 30rem at 85% -10%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 70%),
      var(--bg);

  }

  .hero__grid {
    display: grid;
    grid-template-areas: "intro" "form" "details";
    gap: var(--s-6);

    @media (min-width: 960px) {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
      grid-template-areas: "intro form" "details form";
      grid-template-rows: auto 1fr;
      column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
      row-gap: 0;
    }
  }
  .hero__intro   { grid-area: intro; align-self: end; }
  .hero__form    { grid-area: form;  align-self: center; }
  .hero__details { grid-area: details; }

  .hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
    border-radius: 999px;
    background: var(--brand-tint);
    color: var(--brand-strong);
    font-size: var(--step--1);
    font-weight: 600;
    & .bi { font-size: 1rem; }
  }

  .hero__title {
    margin-block: var(--s-4) var(--s-4);
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 700;
    font-variation-settings: "opsz" 72;
    letter-spacing: -.025em;
    line-height: 1.04;
    max-width: 16ch;
  }

  .hero__lead {
    font-size: var(--step-1);
    color: var(--ink-soft);
    max-width: 52ch;
  }

  .hero__covers {
    display: grid;
    gap: var(--s-3);
    margin-block: var(--s-6);
    padding: 0;
    list-style: none;

    & li {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: var(--s-3);
      align-items: center;
    }
    & .bi {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      color: var(--brand-strong);
      font-size: 1.25rem;
    }
    & strong { display: block; font-weight: 650; line-height: 1.3; }
    & span   { display: block; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; }
  }

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
    color: var(--ink-soft);
    & li { display: inline-flex; align-items: center; gap: var(--s-2); }
    & .bi { color: var(--success); font-size: 1rem; }
  }

  @media (max-width: 959px) {
    .hero__title { max-width: 20ch; }
    .hero__covers { margin-block: var(--s-5); }
  }
}