/* ============================================================
   Conte Vias Sul — folha de estilo editorial
   Paleta: papel quente, tinta azul-grafite, verde pinheiro,
   terracota e âmbar. Tipos: Newsreader (serif display) +
   Hanken Grotesk (sans texto/UI). 100% sem dependência de JS.
   ============================================================ */

:root{
  --paper:#F4EEE3;
  --paper-soft:#FBF7EF;
  --card:#FFFFFF;
  --ink:#1B2230;
  --ink-2:#474E5E;
  --ink-3:#727887;
  --line:#E2D9C8;
  --line-soft:#ECE4D6;
  --pine:#1C5C4D;
  --pine-deep:#103E33;
  --pine-tint:#E6EFEA;
  --clay:#B14627;
  --clay-tint:#F4E5DD;
  --amber:#D99828;
  --amber-band:#FBEED0;
  --amber-line:#EAC879;
  --amber-ink:#74510F;
  --maxw:1200px;
  --measure:42rem;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(27,34,48,.05), 0 10px 30px -18px rgba(27,34,48,.25);
  --shadow-lg:0 1px 2px rgba(27,34,48,.06), 0 24px 50px -28px rgba(27,34,48,.4);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:var(--pine); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.1; color:var(--ink); margin:0; letter-spacing:-.01em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

strong{ font-weight:700; color:var(--ink); }

::selection{ background:var(--pine); color:#fff; }

:focus-visible{ outline:3px solid var(--pine); outline-offset:2px; border-radius:3px; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(52px,8vw,104px); }
.section--tint{ background:var(--paper-soft); border-block:1px solid var(--line-soft); }
.section--pine{ background:var(--pine-deep); color:#EAF1ED; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pine);
  margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--clay); display:inline-block; }
.section--pine .eyebrow{ color:var(--amber); }
.section--pine .eyebrow::before{ background:var(--amber); }

.section-head{ max-width:46rem; margin-bottom:clamp(32px,4vw,52px); }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.85rem); }
.section-head p{ color:var(--ink-2); font-size:1.075rem; margin-top:.85rem; max-width:40rem; }
.section--pine .section-head h2{ color:#FBFDFC; }
.section--pine .section-head p{ color:#C5D6CE; }

.index-num{ font-family:var(--sans); font-weight:700; color:var(--ink-3); font-size:.8rem; letter-spacing:.12em; }

/* ============================================================
   NOTICE BAND (disclaimer — em todas as páginas)
   ============================================================ */
.notice{
  background:var(--amber-band);
  border-bottom:1px solid var(--amber-line);
  color:var(--amber-ink);
}
.notice__in{ display:flex; gap:14px; align-items:flex-start; padding-block:11px; }
.notice__icon{ flex:0 0 auto; width:20px; height:20px; margin-top:2px; color:var(--amber-ink); }
.notice p{ margin:0; font-size:.875rem; line-height:1.5; font-weight:500; }
.notice strong{ color:#5C3F09; font-weight:800; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{ background:var(--paper); border-bottom:1px solid var(--line); position:relative; z-index:5; }
.masthead__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:18px; }
.brand{ display:inline-flex; align-items:center; gap:13px; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand__mark{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; box-shadow:var(--shadow); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; }
.brand__tag{ font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }

.nav{ display:flex; flex-wrap:wrap; gap:4px; }
.nav a{
  color:var(--ink-2); font-weight:600; font-size:.92rem;
  padding:8px 13px; border-radius:8px; white-space:nowrap;
}
.nav a:hover{ color:var(--pine); background:var(--pine-tint); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--pine); background:var(--pine-tint); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(48px,7vw,88px); }
.hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hero h1{ font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1.04; letter-spacing:-.025em; }
.hero h1 em{ font-style:italic; color:var(--pine); }
.hero__lead{ font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink-2); margin-top:1.4rem; max-width:34rem; line-height:1.6; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:1.8rem; font-size:.9rem; color:var(--ink-3); font-weight:600; }
.hero__meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero__meta svg{ width:17px; height:17px; color:var(--pine); }

/* ---------- Figure / placeholder ---------- */
.figure{ margin:0; }
.figure__ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(28,92,77,.05) 0 14px, rgba(28,92,77,0) 14px 28px),
    var(--pine-tint);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px; color:var(--pine);
  aspect-ratio:4/3;
}
.figure__ph svg{ width:42px; height:42px; opacity:.55; margin-bottom:12px; }
.figure__ph b{ font-family:var(--sans); font-weight:700; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; }
.figure__ph small{ font-size:.8rem; color:var(--ink-3); margin-top:6px; max-width:24ch; line-height:1.4; }
.figure figcaption{ font-size:.8rem; color:var(--ink-3); margin-top:9px; line-height:1.45; }
.figure figcaption b{ color:var(--ink-2); font-weight:700; }
.hero .figure__ph{ aspect-ratio:5/4; }
.post__media{ position:relative; }
.figure__ph img, .post__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   TWO COLUMNS — o que somos / o que não somos
   ============================================================ */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3.5vw,40px); box-shadow:var(--shadow); }
.panel--no{ background:#FCF6F2; border-color:var(--clay-tint); }
.panel__tag{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.panel--yes .panel__tag{ color:var(--pine); }
.panel--no .panel__tag{ color:var(--clay); }
.panel h3{ font-size:1.6rem; margin-bottom:1.2rem; }
.panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.panel li{ display:flex; gap:13px; align-items:flex-start; font-size:1.02rem; line-height:1.5; color:var(--ink-2); }
.panel li svg{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; }
.panel--yes li svg{ color:var(--pine); }
.panel--no li svg{ color:var(--clay); }
.panel li b{ color:var(--ink); }

/* ============================================================
   ÁREAS DE CONTEÚDO — 6 cartões
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,24px); }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,3vw,32px); position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pine); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--pine-tint); }
.card:hover::before{ transform:scaleX(1); }
.card__icon{ width:46px; height:46px; border-radius:11px; background:var(--pine-tint); color:var(--pine); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.card__icon svg{ width:24px; height:24px; }
.card__num{ position:absolute; top:22px; right:24px; font-family:var(--serif); font-size:1.5rem; color:var(--line); font-weight:600; }
.card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.card p{ color:var(--ink-2); font-size:.98rem; line-height:1.55; margin-bottom:1rem; }
.card__note{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center; gap:7px; }
.card__note::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); }

/* ============================================================
   PRINCÍPIOS EDITORIAIS (seção pinheiro)
   ============================================================ */
.principles{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,40px) clamp(32px,5vw,72px); }
.principle{ display:flex; gap:18px; align-items:flex-start; }
.principle__n{ font-family:var(--serif); font-size:1.7rem; color:var(--amber); font-weight:600; flex:0 0 auto; line-height:1; padding-top:2px; }
.principle h3{ color:#fff; font-size:1.22rem; margin-bottom:.45rem; }
.principle p{ color:#BFD2CA; font-size:.98rem; line-height:1.55; margin:0; }

/* ============================================================
   QUEM MANTÉM
   ============================================================ */
.maintainer{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,56px); align-items:center; }
.maintainer h2{ font-size:clamp(1.8rem,3.5vw,2.5rem); margin-bottom:1.1rem; }
.maintainer p{ color:var(--ink-2); font-size:1.04rem; }
.fact-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.fact-card__head{ background:var(--pine-deep); color:#fff; padding:20px 26px; }
.fact-card__head b{ font-family:var(--serif); font-size:1.28rem; font-weight:600; display:block; }
.fact-card__head span{ font-size:.82rem; color:#B6CBC2; font-weight:600; }
.fact-list{ list-style:none; margin:0; padding:8px 26px 22px; }
.fact-list li{ display:flex; flex-direction:column; gap:2px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.fact-list li:last-child{ border-bottom:0; }
.fact-list .k{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.fact-list .v{ font-size:1rem; color:var(--ink); font-weight:500; }

/* ============================================================
   LISTA DE ARTIGOS
   ============================================================ */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,30px); }
.post{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.post:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none; }
.post__media{ aspect-ratio:16/10; background:
    repeating-linear-gradient(135deg, rgba(28,92,77,.05) 0 14px, rgba(28,92,77,0) 14px 28px), var(--pine-tint);
  display:flex; align-items:center; justify-content:center; color:var(--pine); border-bottom:1px solid var(--line); }
.post__media svg{ width:38px; height:38px; opacity:.5; }
.post__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post__cat{ font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--clay); margin-bottom:10px; }
.post h3{ font-size:1.32rem; line-height:1.18; margin-bottom:.6rem; color:var(--ink); }
.post p{ color:var(--ink-2); font-size:.96rem; line-height:1.5; flex:1; }
.post__more{ margin-top:16px; font-weight:700; font-size:.9rem; color:var(--pine); display:inline-flex; align-items:center; gap:7px; }
.post__more svg{ width:16px; height:16px; transition:transform .18s ease; }
.post:hover .post__more svg{ transform:translateX(3px); }

/* ============================================================
   FAQ — perguntas, tudo visível (sem JS, sem conteúdo oculto)
   ============================================================ */
.faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,32px) clamp(32px,5vw,56px); }
.qa h3{ font-size:1.18rem; margin-bottom:.5rem; display:flex; gap:11px; align-items:baseline; }
.qa h3::before{ content:"P."; color:var(--clay); font-weight:700; font-family:var(--sans); font-size:.85rem; letter-spacing:.04em; }
.qa p{ color:var(--ink-2); font-size:1rem; line-height:1.6; padding-left:24px; }

/* ============================================================
   CONTATO (sem formulário)
   ============================================================ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
.contact h2{ font-size:clamp(1.8rem,3.5vw,2.5rem); margin-bottom:1rem; }
.contact p{ color:var(--ink-2); font-size:1.04rem; }
.contact__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,3.5vw,38px); box-shadow:var(--shadow); }
.contact__row{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.contact__row:first-child{ padding-top:0; }
.contact__row:last-child{ border-bottom:0; padding-bottom:0; }
.contact__row svg{ flex:0 0 auto; width:22px; height:22px; color:var(--pine); margin-top:3px; }
.contact__row .k{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px; }
.contact__row .v{ font-size:1.05rem; color:var(--ink); font-weight:500; word-break:break-word; }
.contact__row a.v{ color:var(--pine); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--pine-deep); color:#CBDAD3; font-size:.95rem; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); padding-block:clamp(44px,6vw,72px); }
.footer__brand .brand__name{ color:#fff; }
.footer__brand .brand__tag{ color:#9FB6AD; }
.footer__about{ margin-top:18px; color:#A9BFB6; line-height:1.6; max-width:32ch; font-size:.92rem; }
.footer h4{ font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:#85A096; margin:0 0 16px; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer__col a{ color:#CBDAD3; font-weight:500; }
.footer__col a:hover{ color:#fff; }
.footer__data{ font-style:normal; line-height:1.6; color:#A9BFB6; font-size:.9rem; }
.footer__data b{ color:#E7F0EC; font-weight:700; display:block; margin-bottom:5px; }
.footer__data a{ color:#CBDAD3; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:26px; }
.footer__statement{ color:#9FB6AD; font-size:.86rem; line-height:1.65; max-width:80ch; margin:0 0 14px; }
.footer__meta{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; font-size:.82rem; color:#7F978D; }
.footer__meta .dot{ width:4px; height:4px; border-radius:50%; background:#5E776C; }

/* ============================================================
   PÁGINA DE ARTIGO
   ============================================================ */
.article-hero{ padding-block:clamp(40px,6vw,72px) clamp(20px,3vw,32px); }
.crumb{ font-size:.85rem; color:var(--ink-3); font-weight:600; margin-bottom:22px; }
.crumb a{ color:var(--ink-3); }
.crumb a:hover{ color:var(--pine); }
.article-hero .cat{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--clay); }
.article-hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.06; margin:14px 0 0; max-width:18ch; }
.article-hero .standfirst{ font-size:clamp(1.1rem,1.8vw,1.34rem); color:var(--ink-2); line-height:1.55; margin-top:1.1rem; max-width:46rem; font-family:var(--serif); font-weight:400; }
.article-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:1.6rem; font-size:.86rem; color:var(--ink-3); font-weight:600; align-items:center; }
.article-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

.prose{ max-width:var(--measure); margin-inline:auto; font-size:1.14rem; line-height:1.78; color:var(--ink); }
.prose > p:first-of-type::first-letter{ float:left; font-family:var(--serif); font-weight:600; font-size:3.6em; line-height:.78; padding:.06em .12em 0 0; color:var(--pine); }
.prose h2{ font-size:clamp(1.5rem,3vw,2rem); margin:2.2em 0 .6em; line-height:1.15; }
.prose h3{ font-size:1.3rem; margin:1.8em 0 .5em; }
.prose p{ margin:0 0 1.3em; }
.prose ul,.prose ol{ margin:0 0 1.5em; padding-left:1.4em; }
.prose li{ margin-bottom:.6em; padding-left:.2em; }
.prose li::marker{ color:var(--pine); font-weight:700; }
.prose a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--amber-line); }
.prose strong{ color:var(--ink); }

.callout{ background:var(--pine-tint); border:1px solid #CFE0D8; border-left:4px solid var(--pine); border-radius:var(--radius-sm); padding:20px 24px; margin:2em 0; font-size:1.02rem; line-height:1.6; color:var(--pine-deep); }
.callout b{ color:var(--pine-deep); }
.callout--warn{ background:var(--amber-band); border-color:var(--amber-line); border-left-color:var(--amber); color:var(--amber-ink); }
.callout--warn b{ color:#5C3F09; }

.pullquote{ font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); line-height:1.25; color:var(--pine); font-style:italic; border-top:2px solid var(--line); border-bottom:2px solid var(--line); padding:1em 0; margin:2em 0; }

.prose figure{ margin:2.2em 0; }
.prose .figure__ph{ aspect-ratio:16/9; }

.keyfacts{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; margin:0 0 2em; box-shadow:var(--shadow); }
.keyfacts h4{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pine); margin:0 0 14px; }
.keyfacts ul{ list-style:none; margin:0; padding:0; }
.keyfacts li{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:1rem; }
.keyfacts li:last-child{ border-bottom:0; }
.keyfacts li svg{ flex:0 0 auto; width:18px; height:18px; color:var(--pine); margin-top:4px; }

.article-foot{ max-width:var(--measure); margin:clamp(40px,5vw,64px) auto 0; padding-top:32px; border-top:1px solid var(--line); }
.article-foot .src{ font-size:.92rem; color:var(--ink-2); line-height:1.6; }

.related{ margin-top:8px; }

/* ============================================================
   PÁGINAS LEGAIS
   ============================================================ */
.legal{ max-width:var(--measure); margin-inline:auto; }
.legal h1{ font-size:clamp(2rem,4vw,2.9rem); margin-bottom:.5rem; }
.legal .updated{ font-size:.88rem; color:var(--ink-3); font-weight:600; margin-bottom:2rem; }
.legal h2{ font-size:1.4rem; margin:2em 0 .6em; }
.legal p,.legal li{ color:var(--ink-2); font-size:1.05rem; line-height:1.7; }
.legal ul{ padding-left:1.3em; margin:0 0 1.4em; }
.legal li{ margin-bottom:.55em; }
.legal li::marker{ color:var(--pine); }
.legal a{ font-weight:600; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero .figure__ph{ aspect-ratio:16/9; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .posts{ grid-template-columns:1fr; }
  .post{ flex-direction:row; }
  .post__media{ aspect-ratio:auto; width:38%; min-width:130px; border-bottom:0; border-right:1px solid var(--line); }
  .maintainer,.contact{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  body{ font-size:17px; }
  .masthead__in{ flex-direction:column; align-items:flex-start; gap:14px; }
  .nav{ width:100%; gap:2px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .nav::-webkit-scrollbar{ height:0; }
  .duo,.principles,.faq{ grid-template-columns:1fr; }
  .prose{ font-size:1.06rem; }
}

@media (max-width:520px){
  .cards{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .post{ flex-direction:column; }
  .post__media{ width:100%; aspect-ratio:16/9; border-right:0; border-bottom:1px solid var(--line); }
}

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

/* ---------- Skip link ---------- */
.skip{ position:absolute; left:-999px; top:0; background:var(--pine); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:50; font-weight:700; }
.skip:focus{ left:0; }