/* Observatório Collabe — estilos comuns (home, seção, autor). O artigo leva o próprio CSS. */
:root{
  --verde:#003333; --verde2:#0A4141; --creme:#F1F0EB; --mint:#66CC99; --coral:#FF9966;
  --tinta:#1D2B2B; --sec:#55605E; --linha:#E2E0D8; --card:#FFFFFF; --fundo:#F7F6F1;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--tinta);font:400 17px/1.65 Poppins,Montserrat,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--verde)}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* barra do topo */
.topo{position:absolute;top:0;left:0;right:0;z-index:5}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.marca{display:flex;align-items:center;gap:12px;color:var(--creme);text-decoration:none}
.marca img{height:26px;width:auto}
.marca span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;border-left:1px solid rgba(241,240,235,.35);padding-left:12px}
.topo nav a{color:var(--creme);text-decoration:none;font-size:14px;font-weight:500;margin-left:22px;opacity:.85}
.topo nav a:hover,.topo nav a[aria-current]{opacity:1;border-bottom:2px solid var(--mint)}

/* banner */
.banner{position:relative;overflow:hidden;background:
  radial-gradient(1200px 600px at 78% 40%,rgba(102,204,153,.13),transparent 60%),
  radial-gradient(700px 500px at 10% 110%,rgba(255,153,102,.10),transparent 60%),
  linear-gradient(160deg,#003333 0%,#012a2a 55%,#001f1f 100%);color:var(--creme)}
.banner .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;min-height:560px;padding-top:56px;padding-bottom:64px}
.banner .eb{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);font-weight:600}
.banner h1{font-weight:600;font-size:clamp(46px,7.4vw,92px);line-height:.98;letter-spacing:-.03em;margin:.18em 0 .22em}
.banner h1 em{font-style:normal;color:var(--mint);display:block}
.banner h1 .pt{color:var(--coral)}
.banner .tese{font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:30em;opacity:.92;margin:0 0 28px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;font-size:14px;font-weight:500;text-decoration:none;border:1px solid rgba(241,240,235,.28);color:var(--creme)}
.chip.on{background:var(--mint);border-color:var(--mint);color:var(--verde)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.ceu{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;background-image:
  radial-gradient(1.2px 1.2px at 12% 22%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1px 1px at 33% 68%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 52% 14%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1px 1px at 64% 82%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 88% 12%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1px 1px at 94% 58%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 76%,#F1F0EB 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 44% 44%,#F1F0EB 50%,transparent 51%)}

/* a lente do observatório */
.lente{position:relative;width:100%;max-width:470px;aspect-ratio:1;justify-self:end}
.lente svg{width:100%;height:100%;overflow:visible}
.lente .anel{fill:none;stroke:rgba(241,240,235,.16);stroke-width:1}
.lente .anel.forte{stroke:rgba(241,240,235,.34)}
.lente .marcas{stroke:rgba(241,240,235,.35);stroke-width:1}
.lente .curva{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lente .curva2{fill:none;stroke:var(--coral);stroke-width:2;stroke-dasharray:5 7;stroke-linecap:round}
.lente .area{fill:url(#gArea)}
.lente .ponto{fill:var(--creme)}
.lente .orb{transform-origin:240px 240px}
.lente .lbl{fill:var(--creme);font:500 13px Poppins,sans-serif;opacity:.85}
.lente .lbl b,.lente .big{font-weight:600}
.lente .big{fill:var(--mint);font:600 30px Poppins,sans-serif}
html.js .lente .varre{transform-origin:240px 240px;animation:gira 14s linear infinite}
html.js .lente .orb.a{animation:gira 60s linear infinite}
html.js .lente .orb.b{animation:gira 90s linear infinite reverse}
html.js .lente .curva{stroke-dasharray:640;stroke-dashoffset:640;animation:traca 2.4s .5s cubic-bezier(.2,.7,.2,1) forwards}
html.js .lente .area{opacity:0;animation:surge 1.6s 1.6s ease forwards}
html.js .lente .pulsa{transform-box:fill-box;transform-origin:center;animation:pulsa 2.6s ease-in-out infinite}
html.js .banner .sobe{opacity:0;transform:translateY(18px);animation:sobe .9s cubic-bezier(.2,.7,.2,1) forwards}
html.js .banner .sobe.d2{animation-delay:.15s} html.js .banner .sobe.d3{animation-delay:.3s} html.js .banner .sobe.d4{animation-delay:.45s}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes surge{to{opacity:1}}
@keyframes pulsa{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.35}}
@keyframes sobe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.js .lente *,html.js .banner .sobe{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}

/* faixa de números */
.painel{background:var(--creme);border-bottom:1px solid var(--linha)}
.painel .wrap{display:grid;grid-template-columns:auto repeat(3,1fr);gap:0;align-items:stretch}
.painel .tit{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sec);font-weight:600;padding:22px 24px 22px 0;display:flex;align-items:center;border-right:1px solid var(--linha)}
.painel .num{padding:18px 24px;border-right:1px solid var(--linha)}
.painel .num:last-child{border-right:0}
.painel .num b{display:block;font-size:28px;font-weight:600;color:var(--verde);line-height:1.1}
.painel .num span{font-size:13px;color:var(--sec);line-height:1.35;display:block}

/* blocos */
main.wrap{padding-top:56px;padding-bottom:24px}
.secao-t{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sec);font-weight:600;margin:0 0 18px}
h2.grande{font-size:clamp(26px,3.4vw,36px);line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0 0 18px;color:var(--verde)}
.destaque{display:grid;grid-template-columns:1.15fr 1fr;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease}
.destaque:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,51,51,.45)}
.destaque{align-items:stretch}
.destaque .foto{background:var(--verde);display:flex;align-items:center}
.destaque img{width:100%;height:auto}
.destaque .txt{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.tag{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#00795f}
.destaque h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:.35em 0 .45em;color:var(--verde);font-weight:600;letter-spacing:-.01em}
.destaque p{margin:0 0 16px;color:var(--sec);font-size:16px}
.meta{font-size:13px;color:var(--sec)}
.ler{font-weight:600;color:var(--verde);margin-top:14px}
.ler::after{content:" →"}

.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.bloco{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:26px}
.bloco h3{margin:0 0 8px;font-size:19px;color:var(--verde);font-weight:600}
.bloco p{margin:0;color:var(--sec);font-size:15.5px}
.bloco .ic{width:40px;height:40px;border-radius:12px;background:var(--creme);display:grid;place-items:center;margin-bottom:14px;color:var(--verde)}

.autor{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:26px;margin-top:56px}
.autor img{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.autor h3{margin:0 0 4px;color:var(--verde);font-size:20px}
.autor p{margin:0 0 6px;color:var(--sec);font-size:15.5px}

.cta{margin:56px 0 24px;background:var(--verde);color:var(--creme);border-radius:var(--r);padding:36px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta .eb{color:var(--mint);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.cta h2{margin:.3em 0 .2em;font-size:clamp(22px,2.6vw,28px);line-height:1.2;font-weight:600}
.cta p{margin:0;opacity:.85}
.btn{display:inline-block;background:var(--coral);color:var(--verde);font-weight:600;text-decoration:none;padding:14px 24px;border-radius:99px;white-space:nowrap}
.btn:hover{background:#ffb08a}

/* lista de artigos da seção */
.lista{display:grid;gap:18px}
.item{display:grid;grid-template-columns:260px 1fr;gap:24px;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit}
.item{align-items:center}
.item img{width:100%;height:auto}
.item .txt{padding:22px 24px 22px 0}
.item h3{margin:.3em 0 .35em;color:var(--verde);font-size:21px;line-height:1.25}
.item p{margin:0;color:var(--sec);font-size:15.5px}

/* cabeçalho das páginas internas */
.cab{background:linear-gradient(160deg,#003333 0%,#012a2a 100%);color:var(--creme);position:relative;overflow:hidden}
.cab .wrap{padding-top:56px;padding-bottom:52px;position:relative;z-index:2}
.cab .eb{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);font-weight:600}
.cab h1{font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:.2em 0 .25em;font-weight:600}
.cab p{max-width:40em;opacity:.9;margin:0}

footer{background:var(--verde);color:var(--creme);margin-top:48px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:34px 24px;font-size:14px}
footer a{color:var(--creme)}
footer .marca img{height:24px}

@media (max-width:860px){
  .banner .wrap{grid-template-columns:1fr;min-height:0;padding-top:40px;padding-bottom:40px}
  .lente{max-width:280px;justify-self:center;margin-top:0}
  .painel .wrap{grid-template-columns:1fr 1fr}
  .painel .tit{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--linha);padding:16px 0}
  .painel .num{padding:16px 12px 16px 0;border-right:0}
  .destaque,.item{grid-template-columns:1fr}
  .item .txt{padding:0 22px 22px}
  .grade{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .topo nav a.esc{display:none}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  .marca span{display:none}
  .autor{grid-template-columns:1fr;text-align:left}
  .autor img{width:96px;height:96px}
  .cta{padding:26px}
}