/* ============================================================
   Intentia Hub · Design system do protótipo
   Tokens extraídos do sistema de cores oficial da marca.
   Fraunces (títulos) + Hanken Grotesk (corpo).
   Regra de ouro: coral é evento, não ambiente (70/30).
   ============================================================ */

:root{
  --ink:#14403A;        /* Tinta Teal — texto sobre claro, nunca preto */
  --teal:#2E7D6F;       /* Intentia Teal — cor-assinatura */
  --deep:#275750;       /* Verde Profundo — superfícies escuras */
  --sage:#69A99B;       /* Menta — acolhimento */
  --mint:#DCEDE8;       /* Menta Clara — respiro */
  --paper:#F2F6F4;      /* Papel — fundo padrão */
  --coral:#F0623E;      /* Coral Faísca — 1 CTA, microdestaque */
  --coral-text:#C04A22; /* Coral para texto pequeno sobre claro (contraste) */
  --petrol:#2B6E7A;     /* Petróleo — dados, Lab */
  --amber:#E0A24C;      /* Âmbar Suave — distinguir produto (Repertório) */
  --muted:#5B7A73;
  --line:#DCE8E4;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:18px;line-height:1.65;
}
img,svg{display:block;max-width:100%}
a{color:var(--teal)}

/* ---------- tipografia ---------- */
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(30px,5.4vw,46px)}
h2{font-size:clamp(22px,4vw,30px);margin-bottom:8px}
h3{font-size:20px;margin-bottom:6px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.eyebrow.on-dark{color:var(--sage)}
.lead{font-size:18.5px;color:var(--muted);max-width:640px}
.lead b{color:var(--ink);font-weight:600}
.sub{color:var(--muted);font-size:16px;margin-bottom:18px;max-width:640px}

/* ---------- marca ---------- */
.wm{font-weight:600;letter-spacing:-.015em;display:inline-flex;align-items:baseline;line-height:1;font-family:'Hanken Grotesk',sans-serif}
.spark-i{height:.96em;width:.30em;margin:0 .015em;vertical-align:baseline}
.spark-i .stem{fill:currentColor}
.spark-i .dot{fill:var(--coral)}

/* ---------- barra de protótipo ---------- */
.proto-strip{background:var(--ink);color:var(--mint);font-size:12px;text-align:center;padding:7px 16px;letter-spacing:.06em}
.proto-strip a{color:#fff;font-weight:600}

/* ---------- navegação pública ---------- */
.nav-pub{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav-pub .in{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav-pub .brand{font-size:28px;color:var(--ink);text-decoration:none}
.nav-pub nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav-pub nav a{font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none}
.nav-pub nav a:hover{color:var(--teal)}

/* ---------- navegação da área logada ---------- */
.nav-app{background:var(--deep);position:sticky;top:0;z-index:40}
.nav-app .in{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.nav-app .brand{font-size:24px;color:var(--paper);text-decoration:none}
.nav-app nav{display:flex;gap:4px;flex-wrap:wrap}
.nav-app nav a{font-size:16px;font-weight:600;color:var(--mint);text-decoration:none;padding:8px 14px;border-radius:999px}
.nav-app nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-app nav a.on{background:var(--teal);color:#fff}
.nav-app .avatar{width:36px;height:36px;border-radius:50%;background:var(--sage);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;text-decoration:none}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:40px 24px 90px}
.wrap.narrow{max-width:760px}
section{margin-top:46px}
.label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:14px}

/* ---------- hero ---------- */
.hero-deep{background:var(--deep);color:var(--paper);padding:64px 24px 58px}
.hero-deep .in{max-width:1080px;margin:0 auto}
.hero-deep h1{color:#fff}
.hero-deep p{color:var(--mint);max-width:620px;font-size:17px;margin-top:14px}
.hero-mint{background:var(--mint);padding:52px 24px}
.hero-mint .in{max-width:1080px;margin:0 auto}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid.c3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;display:block;text-decoration:none;color:var(--ink)}
a.card{transition:border-color .15s ease, transform .15s ease}
a.card:hover{border-color:var(--sage);transform:translateY(-2px)}
.card b.t{font-family:'Fraunces',Georgia,serif;font-size:18.5px;font-weight:600;display:block;margin:4px 0 6px}
.card p{font-size:15.5px;color:var(--muted)}
.card.dark{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.card.dark p{color:var(--mint)}
.card.dark b.t{color:#fff}
.card.mint{background:var(--mint);border-color:var(--mint)}

/* faixa colorida no topo do card (distinção de produto — apoio coadjuvante) */
.card.stripe::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 4px 4px;background:var(--teal)}
.card.stripe.petrol::before{background:var(--petrol)}
.card.stripe.amber::before{background:var(--amber)}
.card.stripe.sage::before{background:var(--sage)}

/* ---------- tags & badges ---------- */
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px}
.tag.ativa{background:var(--teal);color:#fff}
.tag.adquirida{background:var(--mint);color:var(--deep)}
.tag.disponivel{background:#fff;color:var(--teal);border:1.5px solid var(--sage)}
.tag.breve{background:#F0EDE6;color:#8a7f66}
.tag.novo{background:#FDF0EC;color:var(--coral-text)}
.tag.lab{background:#E4EEF0;color:var(--petrol)}
.tag.amber{background:#F9EFDD;color:#8a5f1d}

.pill-ic{width:42px;height:42px;border-radius:12px;background:var(--mint);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.pill-ic svg{width:22px;height:22px}
.pill-ic.petrol{background:#E4EEF0;color:var(--petrol)}
.pill-ic.amber{background:#F9EFDD;color:#8a5f1d}
.pill-ic.coral{background:#FDF0EC;color:var(--coral)}

/* ---------- botões ---------- */
.btn{display:inline-block;font:inherit;font-weight:700;font-size:16px;border:none;border-radius:999px;padding:13px 28px;cursor:pointer;text-decoration:none;text-align:center}
.btn.primary{background:var(--coral);color:#fff}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--sage)}
.btn.ghost:hover{border-color:var(--teal)}
.btn.dark-ghost{background:transparent;color:var(--paper);border:1.5px solid rgba(255,255,255,.35)}
.btn.dark-ghost:hover{border-color:#fff}
.btn.sm{font-size:15px;padding:9px 18px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- formulários ---------- */
label{display:block;font-weight:600;font-size:15px;margin:16px 0 6px}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,125,111,.18)}
textarea{min-height:80px;resize:vertical}
.hint{font-size:14px;color:var(--muted);margin-top:5px}

/* ---------- percurso da jornada ---------- */
.percurso{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin:18px 0}
@media(max-width:680px){.percurso{grid-template-columns:repeat(5,1fr);gap:5px}}
@media(max-width:430px){.percurso{grid-template-columns:repeat(4,1fr)}}
/* min-width:0 + quebra de palavra: sem isso, rótulos longos ("FECHAMENTO")
   esticam a coluna do grid e a página ganha rolagem lateral no celular. */
.pd{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 4px;text-align:center;font-size:11.5px;color:var(--muted);user-select:none;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.pd b{display:block;font-size:15px;color:var(--ink)}
.pd.done{background:var(--teal);border-color:var(--teal);color:var(--mint)}
.pd.done b{color:#fff}
.pd.hoje{background:#FDF0EC;border-color:var(--coral)}
.pd.hoje b{color:var(--coral-text)}
.pd.fut{opacity:.55}
.pd.marco{outline:2px solid var(--coral);outline-offset:-2px}

/* barra de progresso fina */
.bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:var(--sage);border-radius:999px}

/* ---------- blocos especiais ---------- */
.retomar{background:var(--deep);color:var(--paper);border-radius:18px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.retomar b{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:600;display:block}
.retomar p{font-size:15px;color:var(--mint);margin-top:4px}

.nota{background:#fff;border:1px dashed var(--sage);border-radius:14px;padding:18px 20px;font-size:15px;color:var(--muted);margin:22px 0}
.nota b{color:var(--deep)}

.honest{background:#FDF0EC;border:1px solid #F6CFC1;border-radius:12px;padding:13px 17px;font-size:15px;color:#8A4630;margin:16px 0}

/* ---------- tabela simples ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tbl th{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--mint)}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.tbl td b{color:var(--ink)}
.tbl tr:last-child td{border-bottom:none}

/* ---------- rodapé ---------- */
footer.site{background:var(--deep);color:var(--mint);margin-top:70px}
footer.site .in{max-width:1080px;margin:0 auto;padding:40px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px}
footer.site a{color:var(--paper);text-decoration:none}
footer.site .cols{display:flex;gap:48px;flex-wrap:wrap}
footer.site .cols b{display:block;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
footer.site .cols a{display:block;font-size:15px;color:var(--mint);margin:5px 0}
footer.proto{max-width:1080px;margin:0 auto;padding:22px 24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);text-align:center}

/* ---------- utilidades ---------- */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:14.5px}

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