/* =========================================================
   BASE · Unicive — Polo Pinhais
   Tokens, reset, tipografia, botões, layout e reveal.
   Extraído da LP 01 (design aprovado). Não editar tokens
   sem alinhar com o manual de marca.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  /* superfícies */
  --cream:#FBF9F4;   --cream-2:#F4F1E9;   --white:#fff;
  /* marca */
  --ink:#152823;     --forest:#175E4D;    --forest-d:#0F483A;
  --mint:#62DA96;    --mint-s:#3FBF79;    --amber:#E68F37;
  /* texto e traços */
  --muted:#526F69;   --line:rgba(21,40,35,.12);   --line-2:rgba(21,40,35,.2);
  /* tipografia */
  --sans:"Rethink Sans",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  /* raio padrão de pílula */
  --r:9999px;
  /* medidas de layout */
  --wrap:1180px;
  --nav-h:78px;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Scrollbar com as cores da marca (Unicive) */
html{scrollbar-width:thin;scrollbar-color:var(--forest) var(--cream-2)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--forest);border-radius:999px;
  border:3px solid var(--cream-2)}          /* borda = trilha: dá o efeito de pílula */
::-webkit-scrollbar-thumb:hover{background:var(--forest-d)}
::-webkit-scrollbar-corner{background:var(--cream-2)}
body{
  background:var(--cream);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden
}
img{max-width:100%;display:block}
::selection{background:var(--mint);color:var(--ink)}
section{position:relative}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.pad{padding:100px 0}
@media(max-width:700px){.pad{padding:74px 0}}
.sec-top{max-width:760px;margin-bottom:48px}
.sec-top h2{margin-bottom:16px}
.center{text-align:center}
.sec-top.center{margin-left:auto;margin-right:auto}
.sec-top.center .lead{margin-left:auto;margin-right:auto}

/* fundos de seção */
.bg-cream2{background:var(--cream-2)}
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-forest{background:var(--forest);color:var(--cream)}
.bg-ink h2,.bg-forest h2{color:var(--cream)}
.bg-ink .lead,.bg-forest .lead{color:rgba(251,249,244,.72)}

/* ---------- tipografia ---------- */
h1,h2,h3{letter-spacing:-.025em;line-height:1.04;font-weight:700}
h1{font-size:clamp(2.2rem,4.3vw,3.5rem)}
h2{font-size:clamp(1.9rem,4vw,3.05rem)}
h3{font-size:1.32rem}
/* palavra-chave em serifada itálica — a assinatura da marca */
.ital{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.lead{color:var(--muted);font-size:clamp(1rem,1.35vw,1.15rem);max-width:60ch;line-height:1.6}

/* kicker antes de todo H2 */
.kick{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--forest);
  background:rgba(23,94,77,.08);padding:8px 15px;border-radius:var(--r);margin-bottom:22px
}
.kick.on-dark{color:var(--mint);background:rgba(98,218,150,.14)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r);
  font-weight:700;font-size:.95rem;padding:16px 26px;text-decoration:none;transition:.25s;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:inherit
}
.btn svg{width:17px;height:17px}
.btn-p{background:var(--forest);color:var(--cream)}                                   /* primário */
.btn-p:hover{background:var(--forest-d);transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,94,77,.28)}
.btn-w{background:var(--mint);color:var(--ink)}                                       /* WhatsApp */
.btn-w:hover{background:var(--mint-s);transform:translateY(-2px);box-shadow:0 14px 34px rgba(98,218,150,.4)}
.btn-g{border-color:var(--line);color:var(--ink);background:transparent}              /* fantasma claro */
.btn-g:hover{border-color:var(--forest);background:rgba(23,94,77,.05)}
.btn-o{border-color:rgba(251,249,244,.28);color:var(--cream)}                         /* fantasma escuro */
.btn-o:hover{background:rgba(251,249,244,.1)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}
/* sem JS ou com movimento reduzido, o conteúdo aparece igual */
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}

/* ---------- utilitários ---------- */
.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{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:var(--cream);
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}