/*
Theme Name: Planurbis
Theme URI: https://planurbis.com.br
Author: Planurbis
Description: Tema institucional Planurbis — incorporadora especializada em loteamentos. Baseado no Brand Guide oficial (Identidade Visual, Feel & Vibe, Geometrias em Aplicação).
Version: 1.0
Text Domain: planurbis
*/

/* =========================================================================
   PLANURBIS — Design System v2
   Baseado no Brand Guide oficial (Identidade Visual, Feel & Vibe, Direção
   de Design & Aplicações, Geometrias em Aplicação).
   Paleta oficial: Verde Institucional #00322D · Verde Vivo #28BE69 ·
   Verde Claro #82D764 · Amarelo Lima #D7CE64 · Branco #FFFFFF.
   Tipografia oficial: Poppins (títulos/destaques) + Inter (texto corrido).
   Assinatura visual: curvas arredondadas + recortes geométricos (o mesmo
   "P" em quadrantes do logotipo) sobre fotografia aérea/urbana + áreas
   verdes. Clima: acolhedor, aspiracional, sofisticado, confiável,
   urbano-natural, organizado. Evitar: agressivo, caótico, genérico, frio,
   saturado.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* Paleta oficial da marca */
  --forest-950:#00201c;   /* institucional, sombra mais profunda (derivado) */
  --forest-900:#00322d;   /* Verde Institucional — cor mestre da marca */
  --forest-800:#0b463f;   /* institucional, um tom mais claro (derivado) */
  --forest-700:#125c50;   /* institucional, transição (derivado) */
  --emerald-600:#28be69;  /* Verde Vivo */
  --emerald-500:#45cf7c;  /* Verde Vivo, tinta clara (derivado) */
  --lime-500:#82d764;     /* Verde Claro */
  --lime-400:#a3e38c;     /* Verde Claro, tinta clara (derivado) */
  --gold-500:#d7ce64;     /* Amarelo Lima */
  --gold-600:#bfb44a;     /* Amarelo Lima, sombra (derivado) */

  /* Neutros */
  --cream:#f7f6f1;        /* papel fosco premium (derivado, próximo do Branco) */
  --cream-2:#efeee6;
  --paper:#ffffff;        /* Branco oficial */
  --ink:#00201c;
  --ink-70:rgba(0,32,28,.72);
  --ink-50:rgba(0,32,28,.5);
  --line:rgba(0,32,28,.13);
  --line-soft:rgba(0,32,28,.08);

  /* Tipografia oficial */
  --display:'Poppins', 'Helvetica Neue', sans-serif;
  --body:'Inter', 'Helvetica Neue', sans-serif;

  /* Ritmo — geometrias arredondadas */
  --container:1240px;
  --radius-sm:10px;
  --radius-md:22px;
  --radius-lg:40px;
  --ease:cubic-bezier(.16,.8,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit}

::selection{background:var(--gold-500);color:var(--forest-950)}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--forest-700);border-radius:10px}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
}

/* ---------- Eyebrow — assinatura em quarto-de-círculo ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  font-family:var(--body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--forest-700);
}
.eyebrow::before{
  content:'';
  width:14px;height:14px;
  flex:none;
  background:linear-gradient(135deg,var(--emerald-600) 50%, var(--gold-500) 50%);
  border-radius:0 100% 0 0;
  display:inline-block;
}
.on-dark .eyebrow{color:var(--lime-400)}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .4em;
  color:var(--forest-900);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--paper)}

h1{font-size:clamp(2.5rem,5vw,4.2rem); font-weight:600}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem); font-weight:600}
h4{font-size:1.1rem; font-weight:600}

p{margin:0 0 1em; color:var(--ink-70); max-width:62ch; font-weight:400}
.on-dark p{color:rgba(255,255,255,.78)}

.lede{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  color:var(--forest-800);
  line-height:1.5;
  max-width:46ch;
  letter-spacing:-.005em;
}
.on-dark .lede{color:rgba(255,255,255,.94)}

/* ---------- Botões ---------- */
.btn{
  --btn-bg:var(--forest-900);
  --btn-fg:var(--paper);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.8em;
  border-radius:100px;
  font-family:var(--display);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.005em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg,var(--emerald-600),var(--lime-500));
  transform:translateX(-101%);
  transition:transform .5s var(--ease-soft);
  z-index:0;
}
.btn span{position:relative; z-index:1; display:inline-flex; align-items:center; gap:.6em}
.btn:hover{ color:var(--forest-950); box-shadow:0 14px 32px -10px rgba(40,190,105,.4)}
.btn:hover::after{transform:translateX(0)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{
  --btn-bg:transparent;
  --btn-fg:var(--forest-900);
  border-color:var(--forest-900);
}
.btn.ghost::after{background:var(--forest-900)}
.btn.ghost:hover{color:var(--paper)}
.btn.on-dark-ghost{ --btn-fg:var(--paper); border-color:rgba(255,255,255,.5) }
.btn.on-dark-ghost::after{background:var(--paper)}
.btn.on-dark-ghost:hover{color:var(--forest-950)}
.btn svg{width:16px;height:16px}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
}
.site-header.is-scrolled{
  padding:12px 0;
  background:rgba(0,32,28,.88);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
.brand{display:flex; align-items:center; gap:.6em}
.brand img{height:32px; width:auto}
.nav-desktop{display:flex; align-items:center; gap:2.2em}
.nav-desktop a{
  font-family:var(--display);
  font-size:.86rem; font-weight:500; color:rgba(255,255,255,.82);
  letter-spacing:.01em;
  position:relative; padding:.3em 0;
}
.nav-desktop a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg,var(--emerald-600),var(--gold-500));
  transition:width .35s var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after{width:100%}
.nav-desktop a[aria-current="page"]{color:var(--paper)}
.header-cta{display:flex; align-items:center; gap:1.4em}
.nav-toggle{
  display:none; width:44px;height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:transparent;
  color:var(--paper); align-items:center; justify-content:center; cursor:pointer;
}

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--forest-950);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 8vw;
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
.mobile-nav.is-open{transform:translateY(0)}
.mobile-nav a{
  font-family:var(--display); font-weight:500; font-size:2rem; color:var(--paper);
  padding:.35em 0; border-bottom:1px solid rgba(255,255,255,.12);
}

@media (max-width:920px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
  .header-cta .btn.desktop-only{display:none}
}

/* ---------- Geo accents — assinatura de quadrantes ---------- */
.geo-accent{position:absolute; border-radius:50%; z-index:1; pointer-events:none}
.geo-accent--lime{background:var(--lime-500)}
.geo-accent--gold{background:var(--gold-500)}
.geo-accent--emerald{background:var(--emerald-600)}
.geo-ring{
  position:absolute; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  z-index:1; pointer-events:none;
}

/* ---------- Hero (split + blob) ---------- */
.hero{
  position:relative;
  background:var(--forest-900);
  overflow:hidden;
  padding:150px 0 90px;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 12% 100%, rgba(40,190,105,.22), transparent 60%),
    linear-gradient(160deg, var(--forest-950) 0%, var(--forest-900) 60%);
  z-index:0;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.hero-copy{position:relative}
.hero-copy .eyebrow{margin-bottom:1.3em}
.hero-copy h1{margin-bottom:.5em}
.hero-copy .lede{margin-bottom:1.7em}
.hero-actions{display:flex; gap:1em; flex-wrap:wrap}

.hero-visual{position:relative; aspect-ratio:1/1.02}
.hero-blob{
  position:absolute; inset:6% 4% 4% 8%;
  border-radius:58% 42% 46% 54% / 56% 60% 40% 44%;
  overflow:hidden;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.55);
  z-index:2;
}
.hero-blob img{width:100%;height:100%;object-fit:cover}
.hero-visual .geo-accent--lime{width:38%; height:38%; top:-6%; right:2%; opacity:.9}
.hero-visual .geo-accent--gold{width:26%; height:26%; bottom:2%; left:-4%; opacity:.95}
.hero-visual .geo-ring{width:120%; height:120%; top:-10%; left:-10%; opacity:.5}

.page-hero{padding:150px 0 80px}
.page-hero .hero-visual{aspect-ratio:1/.86}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:-1; aspect-ratio:4/3; margin-bottom:.5em}
  .hero-blob{inset:8% 6% 6% 10%}
}

/* ---------- Sections ---------- */
section{position:relative; padding:clamp(64px,9vw,140px) 0}
.section-dark{background:var(--forest-900); color:var(--paper)}
.section-cream{background:var(--cream)}
.section-paper{background:var(--paper)}
.section-tint{background:var(--cream-2)}

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2em;
  margin-bottom:clamp(36px,5vw,72px);
  flex-wrap:wrap;
}
.section-head h2{margin:0}

/* ---------- Reveal (scroll) ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-visible{opacity:1; transform:translateY(0)}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0)}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.10s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.18s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.34s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.42s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.50s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.58s}
.reveal-stagger.is-visible > *:nth-child(9){transition-delay:.66s}

.reveal-img{overflow:hidden; position:relative}
.reveal-img img{
  transform:scale(1.12);
  transition:transform 1.4s var(--ease-soft);
}
.reveal-img::after{
  content:'';
  position:absolute; inset:0;
  background:var(--forest-700);
  transform-origin:right;
  transition:transform .7s var(--ease), opacity .7s var(--ease) .1s;
}
.reveal-img.is-visible img{transform:scale(1)}
.reveal-img.is-visible::after{transform:scaleX(0); opacity:0}

/* ---------- Grids ---------- */
.grid{display:grid; gap:clamp(20px,3vw,40px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:920px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ---------- Blocos modulares (cards) ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  padding:clamp(24px,3vw,34px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  position:relative;
}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(0,50,45,.28); border-color:transparent}
.card .num{
  font-family:var(--display); font-size:.85rem; font-weight:700;
  color:var(--gold-600); letter-spacing:.06em;
}
.card h3{margin-top:.5em}
.card-icon{
  width:52px;height:52px; border-radius:16px 16px 16px 4px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--emerald-600),var(--forest-900));
  color:var(--paper); margin-bottom:1.1em;
}
.card-icon svg{width:24px;height:24px}

/* ---------- Zig-zag service rows ---------- */
.service-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px);
  align-items:center;
  padding:clamp(48px,6vw,90px) 0;
  border-bottom:1px solid var(--line);
}
.service-row:last-child{border-bottom:none}
.service-row:nth-child(even) .service-media{order:2}
.service-row .service-media{
  border-radius:52% 48% 44% 56% / 58% 54% 46% 42%;
  overflow:hidden; aspect-ratio:4/3.1;
  position:relative;
}
.service-row .service-media img{width:100%;height:100%;object-fit:cover}
.service-index{
  font-family:var(--display); font-size:1rem; color:var(--gold-600); font-weight:700;
  display:flex; align-items:center; gap:.8em; margin-bottom:1em;
}
.service-index::after{content:'';flex:1;height:1px;background:var(--line); max-width:80px}
@media (max-width:820px){
  .service-row{grid-template-columns:1fr}
  .service-row:nth-child(even) .service-media{order:0}
}

/* ---------- Stats ---------- */
.stat{text-align:left}
.stat .num{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem,5vw,4rem); color:var(--paper);
  display:flex; align-items:baseline; gap:.1em; line-height:1;
}
.stat .num .suffix{font-size:.5em; color:var(--lime-400)}
.stat .label{color:rgba(255,255,255,.7); font-size:.9rem; margin-top:.6em; max-width:22ch}

.stat-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  padding:clamp(24px,3vw,34px);
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.stat-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22)}
.stat-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  margin-bottom:1.2em;
}
.stat-icon svg{width:24px;height:24px}
.stat-icon--lime{background:rgba(163,227,140,.16); color:var(--lime-400)}
.stat-icon--gold{background:rgba(215,206,100,.16); color:var(--gold-500)}
.stat-icon--emerald{background:rgba(69,207,124,.16); color:var(--emerald-500)}
.stat-bar{
  display:block; margin-top:1.4em; height:5px; border-radius:999px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.stat-bar-fill{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--emerald-500),var(--lime-400));
  transition:width 1.4s var(--ease) .2s;
}
.stat-card.is-visible .stat-bar-fill,
.reveal-stagger.is-visible .stat-card .stat-bar-fill{width:var(--fill)}

/* ---------- Timeline / processo ---------- */
.timeline{position:relative}
.timeline-track{
  position:absolute; left:24px; top:0; bottom:0; width:2px;
  background:var(--line);
}
.timeline-track .fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--emerald-600),var(--gold-500));
  transition:height 1.2s var(--ease);
}
.timeline-item{
  position:relative; padding:0 0 clamp(40px,5vw,70px) 76px;
}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{
  position:absolute; left:8px; top:2px; width:34px; height:34px; border-radius:50%;
  background:var(--paper); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; color:var(--forest-900);
  transition:all .5s var(--ease);
}
.timeline-item.is-visible .timeline-dot{
  background:var(--forest-900); border-color:var(--gold-500); color:var(--gold-500);
}

/* ---------- Valores / tags ---------- */
.tag-grid{display:flex; flex-wrap:wrap; gap:.7em}
.tag{
  border:1px solid var(--line); border-radius:100px;
  padding:.6em 1.2em; font-size:.85rem; font-weight:600;
  color:var(--forest-800); background:var(--paper);
  font-family:var(--display);
}
.on-dark .tag{border-color:rgba(255,255,255,.25); color:var(--paper); background:rgba(255,255,255,.06)}

.check-list li{
  display:flex; gap:.8em; align-items:flex-start;
  padding:.7em 0; border-bottom:1px solid var(--line-soft);
  font-weight:500; color:var(--forest-900);
}
.check-list li svg{flex:none; width:20px;height:20px; color:var(--emerald-600); margin-top:.15em}

/* ---------- Blog cards ---------- */
.post-card{
  border-radius:var(--radius-md); overflow:hidden; background:var(--paper);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.post-card:hover{transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(0,50,45,.3)}
.post-card .thumb{aspect-ratio:16/11; overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease-soft)}
.post-card:hover .thumb img{transform:scale(1.07)}
.post-card .body{padding:1.6em}
.post-card .cat{
  font-family:var(--display);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--emerald-600); margin-bottom:.8em; display:block;
}
.post-card h3{font-size:1.2rem}
.post-card .read-more{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1em;
  font-family:var(--display);
  font-weight:600; font-size:.85rem; color:var(--forest-900);
}
.post-card .read-more svg{width:16px;height:16px; transition:transform .35s var(--ease)}
.post-card:hover .read-more svg{transform:translateX(5px)}

.pagination{display:flex; gap:.6em; justify-content:center; margin-top:3em}
.pagination a{
  width:42px;height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); font-weight:700; font-size:.85rem;
  font-family:var(--display);
}
.pagination a.is-active{background:var(--forest-900); color:var(--paper); border-color:var(--forest-900)}

/* ---------- Formulários ---------- */
.form-panel{
  background:var(--paper); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,52px);
  border:1px solid var(--line-soft);
  box-shadow:0 40px 80px -50px rgba(0,50,45,.35);
}
.field{margin-bottom:1.3em}
.field label{
  display:block; font-family:var(--display); font-size:.76rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--forest-800); margin-bottom:.55em;
}
.field input,.field select,.field textarea{
  width:100%; padding:.9em 1em; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--cream);
  font-family:var(--body); font-size:.95rem; color:var(--ink);
  transition:border-color .3s, background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--emerald-600); background:var(--paper);
}
.field textarea{min-height:130px; resize:vertical}
.radio-row{display:flex; gap:1.5em}
.radio-row label{display:flex; align-items:center; gap:.5em; font-weight:600; font-size:.9rem; text-transform:none; letter-spacing:0; font-family:var(--body)}
.radio-row input{width:auto}
.form-note{font-size:.78rem; color:var(--ink-50); margin-top:1em}
.form-success{
  display:none; text-align:center; padding:2.4em 1em;
}
.form-success.is-visible{display:block}
.form-success svg{width:56px;height:56px; color:var(--emerald-600); margin:0 auto 1em}

/* ---------- Footer ---------- */
.site-footer{background:var(--forest-950); color:rgba(255,255,255,.75); padding:clamp(60px,7vw,100px) 0 30px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3em; padding-bottom:3em; border-bottom:1px solid rgba(255,255,255,.12)}
.footer-grid h4{color:var(--paper); font-family:var(--display); font-size:.92rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:1.2em}
.footer-grid ul li{margin-bottom:.7em; font-size:.92rem}
.footer-grid a:hover{color:var(--lime-400)}
.footer-brand img{height:30px; margin-bottom:1em}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1em;
  padding-top:2em; font-size:.82rem; color:rgba(255,255,255,.5);
}
.social-row{display:flex; gap:.8em}
.social-row a{
  width:38px;height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{background:var(--paper); color:var(--forest-950); border-color:var(--paper)}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:2.4em} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- CTA banner ---------- */
.cta-banner{
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--forest-800),var(--forest-950));
  padding:clamp(40px,6vw,80px);
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.3fr auto; gap:2em; align-items:center;
}
.cta-banner::before{
  content:''; position:absolute; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-500),transparent 70%);
  opacity:.2; right:-160px; top:-160px;
}
.cta-banner::after{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,var(--emerald-600),transparent 70%);
  opacity:.22; left:-100px; bottom:-120px;
}
@media (max-width:760px){ .cta-banner{grid-template-columns:1fr} }
.cta-banner-alt{background:linear-gradient(135deg,var(--forest-900),var(--forest-950))}

/* Utility */
.mt-0{margin-top:0}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.small{font-size:.85rem}
.mono-tag{font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}

/* WordPress default pagination markup (paginate_links) styled like .pagination */
.pagination{flex-wrap:wrap}
.pagination .page-numbers{
  width:42px;height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); font-weight:700; font-size:.85rem;
  font-family:var(--display); color:var(--forest-900);
}
.pagination .page-numbers.current{background:var(--forest-900); color:var(--paper); border-color:var(--forest-900)}
.pagination .page-numbers.dots{border:none; width:auto}


/* ==========================================================================
   ARTIGO DE BLOG — template de conteúdo (posts SEO)
   Adaptado da arquitetura Longevie/Afiliados para o design system Planurbis.
   Usa as variáveis de marca já definidas em :root (--forest, --emerald,
   --lime, --gold, --display, --body, --radius-*). Sem paleta/tipografia
   nova — só aplica o sistema existente ao conteúdo de artigo.
   ========================================================================== */

.article-body{
  max-width:70ch;
  margin:0 auto;
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink);
}
.article-body h2{
  margin-top:2.2em;
  font-size:clamp(1.4rem,2.4vw,1.9rem);
}
.article-body h3{
  margin-top:1.8em;
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  color:var(--forest-800);
}
.article-body p{margin:0 0 1.2em}
.article-body ul,.article-body ol{margin:0 0 1.4em; padding-left:1.4em}
.article-body li{margin-bottom:.5em}
.article-body a{color:var(--forest-900); text-decoration:underline; text-decoration-color:var(--lime-500); text-underline-offset:3px}

/* Meta do artigo: categoria + tempo de leitura + data */
.article-meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:1.6em;
  font-family:var(--display);
  font-size:.8rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-50);
}
.article-meta .tag{
  background:var(--forest-900); color:var(--paper);
  border-radius:999px; padding:.35em .9em;
  letter-spacing:.06em;
}
.article-meta .dot{opacity:.5}

/* Parágrafo de abertura (lead) */
.article-body .lead{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.15rem,2vw,1.35rem);
  line-height:1.5;
  color:var(--forest-800);
  margin-bottom:1.4em;
}

/* Caixa de destaque (dica, atenção, dado importante) */
.highlight-box{
  background:var(--cream-2);
  border-left:4px solid var(--emerald-600);
  border-radius:var(--radius-sm);
  padding:clamp(18px,3vw,28px);
  margin:2em 0;
}
.highlight-box.atencao{border-left-color:var(--gold-500)}
.highlight-box p:last-child{margin-bottom:0}
.highlight-box .kicker{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--forest-900); margin-bottom:.5em;
}

/* Cards de estatística (dados de mercado atualizados) */
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px; margin:2em 0;
}
.stat-card{
  background:var(--forest-900); color:var(--paper);
  border-radius:var(--radius-md);
  padding:clamp(18px,2.5vw,26px);
}
.stat-card .num{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,3vw,2.1rem); color:var(--lime-500); line-height:1;
  margin-bottom:.3em;
}
.stat-card .label{font-size:.85rem; color:rgba(255,255,255,.78); line-height:1.4}
.stat-card .source{display:block; font-size:.7rem; color:rgba(255,255,255,.5); margin-top:.6em}

/* Gráfico embutido (SVG/imagem) */
.chart-wrap{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:clamp(16px,3vw,28px);
  margin:2em 0;
}
.chart-wrap img,.chart-wrap svg{width:100%; height:auto; display:block}
.chart-caption{
  font-size:.8rem; color:var(--ink-50); margin-top:.8em; text-align:center;
}

/* Tabela comparativa */
.comparison-table{
  width:100%; border-collapse:collapse; margin:2em 0;
  font-size:.92rem; border-radius:var(--radius-sm); overflow:hidden;
}
.comparison-table th{
  background:var(--forest-900); color:var(--paper); text-align:left;
  padding:.9em 1em; font-family:var(--display); font-weight:600;
}
.comparison-table td{padding:.85em 1em; border-bottom:1px solid var(--line-soft)}
.comparison-table tr:nth-child(even) td{background:var(--cream-2)}

/* Divisor decorativo entre seções */
.article-divider{
  border:0; height:3px; margin:2.6em 0;
  background:linear-gradient(90deg,var(--emerald-600),var(--lime-500) 40%,transparent);
  border-radius:999px; width:80px;
}

/* CTA dentro do artigo (reaproveita .card) */
.article-cta{
  background:var(--forest-900); color:var(--paper);
  border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,40px);
  margin:2.6em 0;
}
.article-cta h3{color:var(--paper); margin-top:0}
.article-cta p{color:rgba(255,255,255,.82)}
.article-cta .btn,.article-cta a.btn{
  display:inline-block; margin-top:.6em;
  background:var(--lime-500); color:var(--forest-950);
  font-family:var(--display); font-weight:600;
  padding:.8em 1.6em; border-radius:999px; text-decoration:none;
}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line-soft); padding:1.2em 0}
.faq-item h4{
  font-family:var(--display); font-size:1.02rem; color:var(--forest-900);
  margin:0 0 .5em;
}
.faq-item p{margin:0; color:var(--ink-70)}


/* Lista com ícone (visual premium para listas de artigo) */
.icon-list{list-style:none; margin:2em 0; padding:0; display:grid; gap:14px}
.icon-list li{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:16px 18px;
}
.icon-list .ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--forest-900); color:var(--lime-500);
  font-family:var(--display); font-weight:700; font-size:.95rem;
}
.icon-list.warn .ico{background:var(--gold-500); color:var(--forest-950)}
.icon-list p,.icon-list span.txt{margin:0; padding-top:.3em; line-height:1.5}

/* Grade de etapas com ícone numerado (upgrade visual dos H3 sequenciais) */
.step-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:2em 0}
.step-card{background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:22px}
.step-card .step-num{
  width:38px; height:38px; border-radius:50%; margin-bottom:12px;
  background:linear-gradient(135deg,var(--emerald-600),var(--lime-500));
  color:var(--forest-950); font-family:var(--display); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.step-card h3{margin:0 0 .4em; font-size:1.05rem}
.step-card p{margin:0; font-size:.92rem; color:var(--ink-70)}