/* ============================================================
   Sempre Sem Preocupação Seguros — Design tokens (marca exata)
   Fonte: identidade/DIRECAO-VISUAL.md (manual V4/Canva)
   Anton = títulos/CTA (real). Garet = corpo → substituto Poppins
   (TROCAR pelo .woff2 licenciado da Garet na produção).
   ============================================================ */

/* ---- Fonts ---- */
@font-face{font-family:'Anton';src:url('../fonts/anton-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GaretSub';src:url('../fonts/poppins-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'GaretSub';src:url('../fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GaretSub';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'GaretSub';src:url('../fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'GaretSub';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Marca — cores exatas do manual */
  --orange-solid:#DF5A25;      /* Pantone 166C — base, confiança */
  --orange-vibrant:#F5821F;    /* Pantone 158C — energia, CTA */
  --orange-grad:#F9BA42;       /* fim do gradiente vibrante */
  --pure-black:#000000;
  --pure-white:#FFFFFF;

  /* Neutros premium (derivados do preto do manual) */
  --ink-950:#08080A;
  --ink-900:#0C0C0F;
  --ink-850:#131317;
  --ink-800:#191920;
  --ink-700:#24242C;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --text:#F2F1EF;
  --text-soft:#C7C6C4;
  --text-mute:#8A8A90;

  /* Tipografia */
  --font-display:'Anton',Impact,sans-serif;
  --font-body:'GaretSub','Poppins',system-ui,sans-serif;

  /* Escala fluida */
  --step--1:clamp(.82rem,.78rem + .2vw,.92rem);
  --step-0:clamp(1rem,.95rem + .3vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.4rem + 1vw,2.1rem);
  --step-3:clamp(2.2rem,1.8rem + 2vw,3.2rem);
  --step-4:clamp(3rem,2.2rem + 4vw,5.5rem);
  --step-5:clamp(3.6rem,2.4rem + 6vw,7.5rem);

  --maxw:1200px;
  --gutter:clamp(20px,5vw,64px);
  --radius:18px;
  --radius-lg:28px;

  --ease:cubic-bezier(.22,1,.36,1);        /* expo-like */
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --glow:0 0 60px -10px rgba(245,130,31,.55);
}

/* ---- Reset base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--ink-950);
  font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:.98;letter-spacing:.005em}
.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;line-height:.92}
p{margin:0}

/* Utilitários compartilhados */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{font-family:var(--font-body);font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:var(--step--1);color:var(--orange-vibrant)}
.pill{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1em;border:1px solid var(--line-strong);
  border-radius:999px;font-size:var(--step--1);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-soft);background:rgba(255,255,255,.03);backdrop-filter:blur(8px)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--orange-vibrant);box-shadow:0 0 12px var(--orange-vibrant)}

/* CTA — laranja SÓ na ação (regra do manual) */
.cta{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.03em;font-size:var(--step-1);color:#231000;padding:.72em 1.35em;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--orange-vibrant),var(--orange-grad));
  box-shadow:0 18px 40px -14px rgba(245,130,31,.65);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cta:hover{transform:translateY(-2px);box-shadow:0 26px 60px -16px rgba(245,130,31,.8)}
.cta .arrow{transition:transform .4s var(--ease)}
.cta:hover .arrow{transform:translateX(4px)}
.cta--ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong);box-shadow:none;font-family:var(--font-body);font-weight:600;font-size:var(--step-0)}

.micro{font-size:var(--step--1);color:var(--text-mute);letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}