/* =============================================================
   RAF MATOS — base.css
   Design system: tokens, tipografia, reset, primitivos.

   PALETA — medida na arte nova do cliente, não escolhida a gosto
   (_source/logo-novo/rafmatos_new_colors_and_logo.jpg):

     fundo    #02142A a #0C2644  (tem vinheta; o valor limpo é o do centro)
     dourado  #8D6625 a #FFE4AB  (é metálico, tem gama, não é uma cor só)

   Duas notas que explicam porque há DOIS dourados:

   1. Nenhum tom do metal serve como texto sobre marinho E sobre branco. O
      dourado da marca (#D9A441) dá 6,8:1 sobre o marinho — ótimo — mas 2,3:1
      sobre branco, que é ilegível. Para dourado sobre fundo claro usa-se
      --gold-ink #8D6625, que é a sombra do próprio metal e dá 5,2:1.

   2. O azul deixou de ser vivo. O logótipo antigo era amarelo sobre #1B4C82;
      o novo é dourado sobre um marinho muito mais fundo. O --blue continua a
      existir porque é a cor das ligações e dos ícones sobre fundo claro, onde
      o dourado não tem contraste — mas foi aprofundado para acompanhar.
   ============================================================= */
:root {
  /* ---- Marca ---- */
  --blue:#1B4C82;        /* ligações e ícones sobre claro — 8,7:1 s/ branco */
  --blue-600:#143C68;
  --blue-050:#EDF2F9;
  --navy:#041832;        /* o campo do logótipo, medido ao nível das letras.
                            É de propósito que a navbar e o rodapé usam este
                            valor exacto e sem degradé: o azul que fica DENTRO
                            do logótipo — painéis e parede da casa — é o mesmo,
                            e assim a marca continua na barra em vez de se ver
                            uma mancha escura à volta dela. */
  --navy-900:#02152B;    /* o tom mais fundo da arte, abaixo dos ícones */
  --gold:#D9A441;        /* o dourado da marca — 6,8:1 sobre o marinho */
  --gold-600:#C9922B;
  --gold-ink:#8D6625;    /* dourado escuro, para texto dourado sobre claro */
  --gold-soft:#F6D77A;   /* dourado claro, para texto miúdo sobre marinho */
  --wa:#25D366;

  /* ---- Neutros ---- */
  --white:#FFFFFF;
  --paper:#FFFFFF;
  --bg-soft:#F3F6FB;     /* secções alternadas (azul-acinzentado) */
  --bg-mut:#E9EEF5;
  --ink:#16233A;         /* títulos / texto forte */
  --body:#3B4757;        /* texto corrente */
  --muted:#5E6875;       /* secundário. Era #6C7789 e chumbava o AA em dois sítios: 4,18:1 no fundo suave e 4,41:1 no fundo do mapa. Este dá 4,62:1 no pior deles. */
  --line:#E3E8F0;
  --line-2:#CFD7E3;

  /* ---- Gradientes ---- */
  /* Sem degradé nas superfícies que levam o logótipo — qualquer variação de
     tom faz aparecer o contorno do azul de dentro da marca. O relevo vem da
     sombra e da linha de baixo, não da cor. */
  --grad-navy:#041832;
  --grad-blue:linear-gradient(135deg,#245C99 0%,#1B4C82 100%);

  /* ---- Tipografia ---- */
  --font-head:'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-lead:clamp(1.04rem, 1.5vw, 1.2rem);

  /* ---- Forma / profundidade ---- */
  --radius:12px;
  --radius-lg:20px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow-sm:0 2px 10px -4px rgba(12,38,68,.24);
  --shadow:0 18px 44px -22px rgba(12,38,68,.44);
  --shadow-gold:0 12px 26px -12px rgba(201,146,43,.55);

  /* ---- Movimento ---- */
  --t-fast:.16s ease;
  --t:.28s ease;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- Layout ---- */
  --gutter:clamp(1.1rem, 4vw, 2.4rem);
  --maxw:1200px;
  --header-h:92px;
  --header-h-min:66px;
  color-scheme: light;
}

/* ---------------- RESET ---------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h-min) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
[hidden]{display:none !important}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
input,textarea,select,button{font:inherit}
ul[class],ol[class]{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink)}

/* ---------------- TIPOGRAFIA ---------------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.08;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.2rem, 5vw, 3.8rem)}
h2{font-size:clamp(1.8rem, 3.6vw, 2.7rem)}
h3{font-size:clamp(1.15rem, 2vw, 1.4rem)}
p{text-wrap:pretty}
strong{font-weight:700;color:var(--ink)}
.text-blue{color:var(--blue)}
.text-yellow{color:var(--gold-600)}

/* ---------------- LAYOUT ---------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.2rem, 7vw, 6rem);position:relative}
.section--soft{background:var(--bg-soft)}
.section--navy{background:var(--grad-navy);color:#D7E2F1}
.section--navy h2,.section--navy h3{color:#fff}

.section-head{max-width:46rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--gold)}
.section-head--center .eyebrow::before{display:none}
.section-title{margin-top:.55rem}
.section-lead{margin-top:.9rem;font-size:var(--fs-lead);color:var(--muted)}

/* ---------------- BOTÕES ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-head);font-weight:600;font-size:1rem;line-height:1;
  padding:.9em 1.5em;border-radius:var(--radius-sm);border:2px solid transparent;
  min-height:44px;max-width:100%;text-align:center;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--primary{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-gold)}
.btn--primary:hover{background:var(--gold-600)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-600)}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--navy-900)}
.btn--wa{background:var(--wa);color:#08331c}
.btn--wa:hover{filter:brightness(1.05)}
.btn--outline{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--outline:hover{border-color:var(--blue);color:var(--blue)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--lg{font-size:1.08rem;padding:1.02em 1.8em}
.btn--sm{font-size:.9rem;padding:.62em 1.05em}

/* ---------------- CHIPS ---------------- */
.chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-head);font-weight:600;font-size:.9rem;letter-spacing:.02em;padding:.5em 1.05em;border-radius:var(--radius-pill);background:#fff;color:var(--ink);border:1.5px solid var(--line-2);cursor:pointer;transition:all var(--t-fast)}
.chip:hover{border-color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------------- HELPERS ---------------- */
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:12px;z-index:200;background:var(--navy);color:#fff;padding:.7em 1.1em;border-radius:8px;transform:translateY(calc(-100% - 24px));transition:transform var(--t)}
.skip-link:focus{transform:none}