/* ===========================================================
   DOT RAIZ — Design tokens
   Conceito: raiz / fundação / crescimento consistente
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* cor — alinhada à identidade da marca (navy + dourado) */
  --ink:      #14171F;
  --paper:    #FAF9F5;
  --paper-2:  #F0EDE4;
  --soil:     #14171F;
  --soil-2:   #0B0D13;
  --root:     #B8862E;
  --root-dim: #D9B25C;
  --growth:   #8A6B1F;
  --growth-2: #6B5316;
  --gold:     #C9A227;
  --line:     rgba(20,23,31,0.12);

  /* tipografia */
  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* escala */
  --radius: 3px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--gold); color:var(--soil-2); }

/* foco visível para acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--root);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- topografia ---------- */

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--root);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--root);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  color:var(--soil-2);
  line-height:1.08;
  letter-spacing:-0.01em;
}

h1{ font-size:clamp(2.6rem, 5.2vw, 4.4rem); font-weight:600; }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size:1.35rem; font-weight:600; }

.lede{
  font-size:1.2rem;
  line-height:1.55;
  color:#4A4032;
  max-width:46ch;
}

/* ---------- header ---------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(237,230,213,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:700;
  color:var(--soil-2);
  display:flex; align-items:center; gap:2px;
}
.logo .dot{ color:var(--root); font-size:1.1em; }
.logo img{ height:38px; width:auto; display:block; }
.foot-logo img{ height:34px; width:auto; display:block; }

.nav{ display:flex; align-items:center; gap:36px; }
.nav a{
  font-size:0.95rem;
  font-weight:500;
  color:var(--soil-2);
  position:relative;
  padding:4px 0;
}
.nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1.5px;
  background:var(--root);
  transition:width .25s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--root); }

/* ---------- botões ---------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body);
  font-weight:600;
  font-size:0.95rem;
  padding:13px 26px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary{
  background:var(--soil-2);
  color:var(--paper);
}
.btn-primary:hover{ background:var(--root); transform:translateY(-1px); }

.btn-ghost{
  border-color:var(--soil-2);
  color:var(--soil-2);
  background:transparent;
}
.btn-ghost:hover{ background:var(--soil-2); color:var(--paper); }

.btn-arrow{ transition:transform .2s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* ---------- hero raiz (elemento de assinatura) ---------- */

.hero{
  position:relative;
  padding:96px 0 40px;
  overflow:hidden;
}

.root-line{
  position:absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  width:2px;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.root-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.root-svg path{
  fill:none;
  stroke:var(--root);
  stroke-width:1.4;
  opacity:0.55;
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  animation:grow-root 2.4s cubic-bezier(.22,.9,.3,1) forwards .3s;
}
@keyframes grow-root{ to{ stroke-dashoffset:0; } }

.hero-inner{
  position:relative; z-index:1;
  max-width:760px;
}

.hero h1{ margin:20px 0 22px; }
.hero .lede{ margin-bottom:34px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- seção pilares (sem numeração genérica) ---------- */

.pillars{
  padding:100px 0;
  border-top:1px solid var(--line);
}
.pillars-head{ max-width:560px; margin-bottom:56px; }
.pillars-head h2{ margin-top:16px; }

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.pillar{
  background:var(--paper);
  padding:36px 30px 40px;
  position:relative;
}
.pillar-tag{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--growth-2);
  background:rgba(75,107,74,0.12);
  display:inline-block;
  padding:4px 9px;
  border-radius:2px;
  margin-bottom:20px;
}
.pillar h3{ margin-bottom:12px; }
.pillar p{ color:#4A4032; font-size:0.98rem; }

/* ---------- artigos ---------- */

.section{ padding:88px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:48px; gap:24px; flex-wrap:wrap;
}
.section-head h2{ margin-top:14px; }

.post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.post-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.post-card:hover{ border-color:var(--root); transform:translateY(-3px); }
.post-thumb{
  height:150px;
  background:linear-gradient(135deg, var(--soil) 0%, var(--growth-2) 100%);
  position:relative;
}
.post-thumb::after{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 120%, rgba(184,134,59,0.35), transparent 55%);
}
.post-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post-cat{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--root);
}
.post-card h3{ font-size:1.18rem; line-height:1.28; }
.post-excerpt{ font-size:0.92rem; color:#5A503F; flex:1; }
.post-meta{
  font-family:var(--mono); font-size:11.5px; color:#8A7E68;
  padding-top:10px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
}
.post-card.soon{ opacity:0.55; }
.post-card.soon .post-thumb{ background:linear-gradient(135deg, #C9C0A8, #B5AA8C); }

/* ---------- newsletter ---------- */

.newsletter{
  background:var(--soil-2);
  color:var(--paper);
  padding:80px 0;
}
.newsletter .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.newsletter h2{ color:var(--paper); max-width:440px; }
.newsletter .eyebrow{ color:var(--root-dim); }
.newsletter .eyebrow::before{ background:var(--root-dim); }
.nl-form{ display:flex; gap:10px; flex-wrap:wrap; }
.nl-form input{
  background:transparent;
  border:1px solid rgba(237,230,213,0.35);
  color:var(--paper);
  padding:13px 18px;
  border-radius:var(--radius);
  font-family:var(--body);
  min-width:260px;
}
.nl-form input::placeholder{ color:rgba(237,230,213,0.5); }

/* ---------- footer ---------- */

.site-footer{
  padding:56px 0 40px;
  border-top:1px solid var(--line);
}
.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
}
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot-col h4{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--root); margin-bottom:14px;
}
.foot-col a, .foot-col p{ display:block; font-size:0.92rem; color:#4A4032; margin-bottom:9px; }
.foot-col a:hover{ color:var(--root); }
.foot-bottom{ font-size:0.82rem; color:#8A7E68; margin-top:48px; }

/* ---------- página de artigo ---------- */

.article-hero{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
}
.article-hero .eyebrow{ margin-bottom:20px; }
.article-hero h1{ font-size:clamp(2.1rem, 4.2vw, 3.1rem); max-width:820px; }
.article-meta{
  display:flex; gap:24px; flex-wrap:wrap; align-items:center;
  margin-top:26px;
  font-family:var(--mono); font-size:12.5px; color:#6B6150;
}
.article-meta span{ display:flex; align-items:center; gap:6px; }

.article-body{
  max-width:700px;
  margin:0 auto;
  padding:56px 32px 40px;
}
.article-body p{ margin-bottom:22px; color:#332A1D; font-size:1.05rem; }
.article-body h2{
  margin:52px 0 18px;
  font-size:1.65rem;
  padding-top:6px;
}
.article-body h3{ margin:34px 0 14px; font-size:1.2rem; }
.article-body ul, .article-body ol{ margin:0 0 24px 22px; }
.article-body li{ margin-bottom:10px; color:#332A1D; }
.article-body strong{ color:var(--soil-2); }

.article-body table{
  width:100%; border-collapse:collapse; margin:12px 0 32px;
  font-size:0.92rem;
}
.article-body th, .article-body td{
  border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top;
}
.article-body th{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--paper-2); color:var(--soil-2);
}

.pull-image{
  margin:36px 0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}
.pull-image .ph{
  aspect-ratio:16/8;
  background:linear-gradient(135deg, var(--soil) 0%, var(--growth-2) 100%);
  display:flex; align-items:center; justify-content:center;
  color:rgba(237,230,213,0.55);
  font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-align:center; padding:20px;
}
.pull-image figcaption{
  font-family:var(--mono); font-size:11.5px; color:#8A7E68; padding:10px 4px 0;
}

.callout{
  border-left:2px solid var(--root);
  background:rgba(138,78,40,0.06);
  padding:18px 22px;
  margin:32px 0;
  font-size:0.96rem;
}

.faq-item{
  border-top:1px solid var(--line);
  padding:26px 0;
}
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h3{ font-size:1.05rem; margin:0 0 10px; }
.faq-item p{ margin:0; font-size:0.98rem; }

.source-note{
  font-family:var(--mono); font-size:12px; color:#8A7E68;
  border:1px dashed var(--line); padding:14px 16px; margin:28px 0; border-radius:var(--radius);
}

/* ---------- responsivo ---------- */

@media (max-width:900px){
  .pillar-grid{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .nav{ display:none; }
  .post-grid{ grid-template-columns:1fr; }
  .newsletter .wrap, .site-footer .wrap{ flex-direction:column; align-items:flex-start; }
  .article-body{ padding:40px 20px; }
}