/* =============================================================
   ART STAMP CREATIONS — base.css
   Design system: tokens (cores do logo), tipografia, reset, primitivos.
   Paleta amostrada do logo: azul #1A8CE4 · carvão #26261A ·
   laranja-raposa #FA9431 · vermelho #E4231A.
   ============================================================= */

:root {
  /* ---- Marca ---- */
  --blue:#1A8CE4;        /* primária (hoodie / logo azul) */
  --blue-600:#1577C4;    /* hover/darker */
  --blue-700:#115F9E;
  --blue-050:#EAF4FD;    /* wash claro */
  --ink:#26261A;         /* carvão-quente (fundo do logo escuro / texto forte) */
  --ink-700:#3A3A2C;
  --orange:#FA9431;      /* acento raposa */
  --orange-600:#E97C13;
  --red:#E4231A;         /* alertas / usar com parcimónia */
  --wa:#25D366;          /* WhatsApp */

  /* ---- Neutros ---- */
  --white:#FFFFFF;
  --paper:#FBFAF6;       /* fundo de página (off-white quente) */
  --bg-soft:#F4F1EA;     /* secções alternadas */
  --bg-mut:#ECE9E1;      /* placeholders / chips */
  --body:#3D3D34;        /* texto corrente */
  --muted:#6F6F64;       /* texto secundário */
  --line:#E7E4DB;        /* linhas subtis */
  --line-2:#D6D2C7;      /* linhas mais fortes */

  /* ---- Gradiente escuro (secções B2B / footer) ---- */
  --grad-dark:linear-gradient(160deg,#2E2E20 0%,#26261A 55%,#1B1B12 100%);
  --grad-blue:linear-gradient(135deg,#1A8CE4 0%,#1577C4 100%);

  /* ---- Tipografia ---- */
  --font-head:'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-body:'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-lead:clamp(1.05rem, 1.6vw, 1.2rem);

  /* ---- Forma / profundidade ---- */
  --radius:16px;
  --radius-lg:26px;
  --radius-sm:11px;
  --radius-pill:999px;
  --shadow-sm:0 3px 12px -6px rgba(38,38,26,.28);
  --shadow:0 16px 40px -20px rgba(38,38,26,.42);
  --shadow-blue:0 16px 34px -16px rgba(26,140,228,.5);
  /* Botões "sticker" (contorno + sombra sólida deslocada) */
  --stroke:#16160F;
  --stroke-w:2.5px;
  --sticker:4px 4px 0 var(--stroke);
  --sticker-lg:6px 6px 0 var(--stroke);

  /* ---- 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:96px;       /* altura base (logo grande) */
  --header-h-min:70px;   /* encolhido no scroll */

  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}
img{border-style:none}
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(--blue);outline-offset:2px;border-radius:4px}
::selection{background:var(--blue);color:#fff}

/* ---------------- TIPOGRAFIA ---------------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.08;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.2rem, 5.2vw, 3.9rem);font-weight:700}
h2{font-size:clamp(1.8rem, 3.6vw, 2.8rem)}
h3{font-size:clamp(1.2rem, 2vw, 1.5rem)}
p{text-wrap:pretty}
strong{font-weight:700;color:var(--ink)}
.text-accent{color:var(--blue)}
.text-orange{color:var(--orange)}

/* ---------------- 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--dark{background:var(--grad-dark);color:#E9E7DE}
.section--dark h2,.section--dark h3{color:#fff}

.section-head{max-width:44rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--orange)}
.section-head--center .eyebrow::before{display:none}
.section-title{margin-top:.6rem}
.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:.6em;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;line-height:1;
  padding:.92em 1.5em;border-radius:var(--radius-pill);white-space:nowrap;
  border:var(--stroke-w) solid var(--stroke);
  box-shadow:var(--sticker);
  transition:transform var(--t),box-shadow var(--t),background var(--t-fast),color var(--t-fast);
  will-change:transform;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sticker-lg)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--stroke)}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn--primary{background:var(--blue);color:#fff}
.btn--accent{background:var(--orange);color:var(--ink)}
.btn--dark{background:var(--ink);color:#fff}
.btn--wa{background:var(--wa);color:#073d1c}
.btn--outline{background:#fff;color:var(--ink)}
.btn--outline-light{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn--lg{font-size:1.12rem;padding:1.05em 1.8em}
.btn--sm{font-size:.92rem;padding:.68em 1.1em;box-shadow:3px 3px 0 var(--stroke)}
.btn--sm:hover{box-shadow:var(--sticker)}

/* ---------------- CHIPS (filtros) ---------------- */
.chip{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-head);font-weight:500;
  font-size:.92rem;letter-spacing:.01em;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 ---------------- */
.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:-60px;z-index:200;background:var(--ink);color:#fff;padding:.7em 1.1em;border-radius:10px;transition:top var(--t)}
.skip-link:focus{top:12px}