/* ==========================================================================
   PC ADVOCACIA — Direito Previdenciário para Servidores Públicos
   Design tokens
   ========================================================================== */
:root{
  --bg: #F4F5F3;
  --white: #FFFFFF;
  --black: #111111;
  --gray: #555B60;
  --gray-light: #DADFDA;
  --petrol: #174A5A;
  --petrol-dark: #0D303A;
  --petrol-2: #3E7180;
  --petrol-tint: #EAF0EF;

  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(13,48,58,0.06);
  --shadow-md: 0 12px 30px rgba(13,48,58,0.10);

  --container: 1200px;
  --header-h: 84px;
  --header-h-scrolled: 66px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:800; margin:0; letter-spacing:-0.01em; color: var(--petrol-dark); }
p{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--petrol); color:#fff;
  padding:12px 18px; z-index:999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

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

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px){ .container{ padding: 0 32px; } }
@media (min-width: 1280px){ .container{ padding: 0 40px; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 16px 28px;
  border-radius: 100px;
  font-weight:700;
  font-size: 0.95rem;
  letter-spacing:0.01em;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn--small{ padding: 12px 20px; font-size:0.85rem; }
.btn--primary{ background: var(--petrol); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--petrol-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost{ background: transparent; color: var(--petrol-dark); border: 1.5px solid var(--gray-light); }
.btn--ghost:hover{ border-color: var(--petrol); color: var(--petrol); transform: translateY(-2px); }
.btn--outline{ background: transparent; color: var(--petrol-dark); border: 1.5px solid var(--petrol-dark); }
.btn--outline:hover{ background: var(--petrol-dark); color:#fff; }
.btn--light{ background:#fff; color: var(--petrol-dark); }
.btn--light:hover{ background: var(--bg); transform: translateY(-2px); }
.btn--ghost-light{ background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,0.4); }
.btn--ghost-light:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }

.link-cta{
  color: var(--petrol); font-weight:700; font-size:0.92rem;
  border-bottom: 1.5px solid transparent; padding-bottom:2px;
  transition: border-color .2s var(--ease), gap .2s var(--ease);
}
.link-cta:hover{ border-color: var(--petrol); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  height: var(--header-h);
  display:flex; align-items:center;
  background: transparent;
  transition: height .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-scrolled{
  height: var(--header-h-scrolled);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:36px;
}
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo__img{
  display:block; height:46px; width:auto;
  transition: height .35s var(--ease);
}
.header.is-scrolled .logo__img{ height:38px; }
@media (min-width:768px){
  .logo__img{ height:50px; }
  .header.is-scrolled .logo__img{ height:40px; }
}
@media (min-width:1280px){
  .logo__img{ height:58px; }
  .header.is-scrolled .logo__img{ height:44px; }
}

.nav{ display:flex; align-items:center; gap:22px; }
.nav__list{ display:flex; align-items:center; gap:18px; }
.nav__link{
  font-size:0.84rem; font-weight:600; color: var(--petrol-dark);
  position:relative; padding: 4px 0; white-space:nowrap;
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--petrol-2); transition: width .25s var(--ease);
}
.nav__link:hover::after{ width:100%; }

.menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px;
}
.menu-toggle span{
  display:block; height:2px; width:100%; background: var(--petrol-dark);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1279px){
  .menu-toggle{ display:flex; }
  .nav{
    position: fixed; top: var(--header-h); left:0; right:0; bottom:0;
    background: #fff; flex-direction:column; align-items:flex-start;
    padding: 40px 24px 32px; gap:28px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    overflow-y:auto;
  }
  .header.is-scrolled ~ .header .nav,
  .nav.is-open{ transform: translateX(0); }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:22px; width:100%; }
  .nav__link{ font-size:1.1rem; white-space:normal; }
  .nav__cta{ width:100%; }
}
@media (min-width: 1280px){
  .menu-toggle{ display:none; }
  .header .container{ max-width:1360px; }
  .header__inner{ gap:56px; }
  .nav__list{ margin-left:8px; }
}

/* ==========================================================================
   Sections / typography rhythm
   ========================================================================== */
.section{ padding: 72px 0; }
@media (min-width:768px){ .section{ padding: 100px 0; } }

.eyebrow{
  font-size: 0.78rem; font-weight:700; letter-spacing: 0.14em; text-transform:uppercase;
  color: var(--petrol-2); margin: 0 0 18px;
}
.section__title{
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height:1.18;
  margin-bottom: 18px;
  max-width: 780px;
}
.section__title--light{ color:#fff; }
.section__subtitle{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--petrol-2); margin-bottom: 18px;
}
.section__text{
  font-size: 1.02rem; color: var(--gray); max-width: 620px; margin-bottom: 16px;
}
.section__text--light{ color: rgba(255,255,255,0.82); max-width: 640px; }
.section__cta{ margin-top: 36px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding: calc(var(--header-h) + 40px) 0 56px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}
.hero__inner{
  display:flex; flex-direction:column; gap:32px;
}
.hero__title{
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 22px;
  max-width: 620px;
}
.hero__subtitle{
  font-size: 1.08rem; color: var(--gray); max-width: 520px; margin-bottom:14px;
}
.hero__note{
  font-size: 0.9rem; font-weight:700; color: var(--petrol); margin-bottom: 30px;
  display:inline-flex; align-items:center; gap:8px;
}
.hero__note::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--petrol-2); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__ctas--center{ justify-content:center; }
.hero__visual{ display:flex; justify-content:center; }
.hero__art{ width:100%; max-width:300px; }
@media (min-width:1024px){
  .hero__art{ max-width:440px; }
}
.path-line{ stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1.8s var(--ease) .3s forwards; }
@media (min-width: 1024px){
  .hero__inner{ flex-direction:row; align-items:center; justify-content:space-between; }
  .hero__content{ flex: 0 0 52%; }
  .hero__visual{ flex: 0 0 42%; }
}

/* ==========================================================================
   Cards grid / identify cards
   ========================================================================== */
.cards-grid{
  display:grid; grid-template-columns: 1fr; gap:16px; margin-top: 44px;
}
@media (min-width:640px){ .cards-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){ .cards-grid{ grid-template-columns: repeat(3,1fr); } }

.id-card{
  background:#fff; border-radius: var(--radius-md); padding: 28px 24px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(13,48,58,0.05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column; gap:16px;
}
.id-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.id-card p{ font-weight:600; color: var(--petrol-dark); font-size:1rem; }
.id-card__icon{ width:40px; height:40px; border-radius:10px; background: var(--petrol-tint); display:block; position:relative; }
.id-card__icon::before{
  content:''; position:absolute; inset:11px; background: var(--petrol);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
}
.id-card__icon[data-icon="clock"]::before{ -webkit-mask-image:url('../icons/clock.svg'); mask-image:url('../icons/clock.svg'); }
.id-card__icon[data-icon="calendar"]::before{ -webkit-mask-image:url('../icons/calendar.svg'); mask-image:url('../icons/calendar.svg'); }
.id-card__icon[data-icon="document"]::before{ -webkit-mask-image:url('../icons/document.svg'); mask-image:url('../icons/document.svg'); }
.id-card__icon[data-icon="alert"]::before{ -webkit-mask-image:url('../icons/alert.svg'); mask-image:url('../icons/alert.svg'); }
.id-card__icon[data-icon="check"]::before{ -webkit-mask-image:url('../icons/check.svg'); mask-image:url('../icons/check.svg'); }
.id-card__icon[data-icon="search"]::before{ -webkit-mask-image:url('../icons/search.svg'); mask-image:url('../icons/search.svg'); }

/* ==========================================================================
   Problem section
   ========================================================================== */
.problem__grid{ display:flex; flex-direction:column; gap:40px; }
.problem__highlight{
  font-family: var(--font-display); font-weight:700; color: var(--petrol-dark);
  font-size:1.1rem; margin: 8px 0 28px; padding-left:16px; border-left: 3px solid var(--petrol-2);
}
.problem__visual svg{ max-width:320px; margin: 0 auto; }
@media (min-width:1024px){
  .problem__grid{ flex-direction:row; align-items:center; justify-content:space-between; gap:60px; }
  .problem__grid > div:first-child{ flex:0 0 54%; }
  .problem__visual{ flex:0 0 36%; }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services{ background:#fff; }
.cards-grid--services{ grid-template-columns:1fr; }
@media (min-width:640px){ .cards-grid--services{ grid-template-columns: 1fr 1fr; } }
.service-card{
  background: var(--bg); border-radius: var(--radius-md); padding:32px 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  border: 1px solid transparent;
}
.service-card:hover{ transform: translateY(-4px); background:#fff; box-shadow: var(--shadow-md); border-color: rgba(13,48,58,0.06); }
.service-card__num{
  display:inline-block; font-family: var(--font-display); font-weight:800;
  font-size:0.85rem; color: var(--petrol-2); letter-spacing:0.05em; margin-bottom:14px;
}
.service-card h3{ font-size:1.25rem; margin-bottom:10px; }
.service-card p{ color: var(--gray); margin-bottom:18px; font-size:0.96rem; }

/* ==========================================================================
   Profiles (Professores / Acúmulo de Cargos / Saúde / RPPS x RGPS)
   ========================================================================== */
.profiles{ background:#fff; }
.profiles__grid{ display:flex; flex-direction:column; gap:44px; }
.profiles__visual{ display:flex; justify-content:center; }
.profiles__visual svg{ width:100%; max-width:320px; }
.profiles__cards{ margin-top:32px; }
.profile-card{
  background: var(--bg); border-radius: var(--radius-md); padding:26px 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.profile-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.profile-card h3{ font-size:1.08rem; margin-bottom:10px; color: var(--petrol-dark); }
.profile-card p{ color: var(--gray); font-size:0.94rem; }
@media (min-width:1024px){
  .profiles__grid{ flex-direction:row; align-items:center; gap:60px; }
  .profiles__visual{ flex:0 0 32%; }
  .profiles__content{ flex:1; }
  .profiles__cards{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Journey (Antes / Durante / Depois) — signature timeline element
   ========================================================================== */
.journey{ background: var(--petrol-tint); }
.journey__timeline{ position:relative; display:flex; flex-direction:column; gap:56px; margin-top:56px; padding-left: 28px; }
.journey__line{
  position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(180deg, var(--petrol-2), var(--petrol-dark));
}
.journey__block{ position:relative; }
.journey__dot{
  position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%;
  background: var(--petrol); border: 3px solid var(--petrol-tint); box-shadow: 0 0 0 2px var(--petrol);
}
.journey__tag{
  font-size:0.72rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--petrol-2); display:block; margin-bottom:8px;
}
.journey__block h3{ font-size:1.3rem; margin-bottom:8px; }
.journey__block p{ color: var(--gray); margin-bottom:14px; max-width:440px; }

@media (min-width: 1024px){
  .journey__timeline{ flex-direction:row; padding-left:0; padding-top:40px; gap:0; }
  .journey__line{ left:0; right:0; top:6px; bottom:auto; height:2px; width:auto; background: linear-gradient(90deg, var(--petrol-2), var(--petrol-dark)); }
  .journey__block{ flex:1; padding-right:32px; }
  .journey__dot{ left:0; top:-34px; }
}

/* ==========================================================================
   Tag cards (planning / why)
   ========================================================================== */
.tag-card{
  background:#fff; border-radius: var(--radius-sm); padding: 22px 22px;
  font-family: var(--font-display); font-weight:700; color: var(--petrol-dark);
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tag-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tag-card--outline{ background: transparent; border: 1.5px solid var(--gray-light); box-shadow:none; }
.tag-card--outline:hover{ border-color: var(--petrol); }
.why{ background:#fff; }

/* ==========================================================================
   Retirement timeline (numbered process — ordered by design)
   ========================================================================== */
.retirement{ background:#fff; }
.timeline{
  display:grid; grid-template-columns: 1fr; gap:14px; margin: 40px 0 0;
  counter-reset: step;
}
@media (min-width:640px){ .timeline{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){ .timeline{ grid-template-columns: repeat(3,1fr); } }
.timeline li{
  display:flex; align-items:center; gap:14px;
  background: var(--bg); border-radius: var(--radius-sm); padding:18px 20px;
  font-weight:600; color: var(--petrol-dark);
}
.timeline li span{
  font-family: var(--font-display); font-weight:800; color: var(--petrol-2); font-size:0.85rem;
}

/* ==========================================================================
   Denied / CTA final (petrol blocks)
   ========================================================================== */
.denied, .cta-final{
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-dark) 100%);
  text-align:center;
}
.denied__inner{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.denied .section__title, .cta-final .section__title{ margin-left:auto; margin-right:auto; }
.cta-final .container{ max-width:720px; text-align:center; }
.cta-final .section__text{ margin-left:auto; margin-right:auto; margin-bottom:36px; }

/* ==========================================================================
   Review
   ========================================================================== */
.review{ background:#fff; }

/* ==========================================================================
   Steps (Como funciona)
   ========================================================================== */
.steps{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:40px; }
@media (min-width:640px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){ .steps{ grid-template-columns: repeat(5,1fr); } }
.steps li{ background:#fff; border-radius: var(--radius-sm); padding:24px 18px; box-shadow: var(--shadow-sm); }
.steps__num{ display:block; font-family: var(--font-display); font-weight:800; color: var(--petrol-2); font-size:1.1rem; margin-bottom:10px; }
.how{ background: var(--bg); }

/* ==========================================================================
   National coverage
   ========================================================================== */
.national{ background:#fff; }
.national__grid{ display:flex; flex-direction:column-reverse; gap:40px; align-items:center; }
.national__visual svg{ max-width:280px; margin:0 auto; }
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0 30px; }
.badge{
  background: var(--petrol-tint); color: var(--petrol-dark); font-weight:700; font-size:0.82rem;
  padding:9px 16px; border-radius:100px;
}
@media (min-width:1024px){
  .national__grid{ flex-direction:row; justify-content:space-between; }
  .national__grid > div:first-child{ flex:0 0 52%; }
  .national__visual{ flex:0 0 36%; }
}

/* ==========================================================================
   Authority
   ========================================================================== */
.authority{ text-align:center; }
.authority .container{ max-width:680px; }
.authority .section__title{ margin-left:auto; margin-right:auto; }
.authority .section__text{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq{ background:#fff; }
.accordion{ max-width:760px; margin-top:36px; border-top:1px solid var(--gray-light); }
.accordion__item{ border-bottom: 1px solid var(--gray-light); }
.accordion__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 22px 4px; text-align:left; font-family: var(--font-display); font-weight:700;
  font-size:1rem; color: var(--petrol-dark);
}
.accordion__icon{ position:relative; width:18px; height:18px; flex:0 0 18px; }
.accordion__icon::before,.accordion__icon::after{
  content:''; position:absolute; background: var(--petrol); border-radius:2px; transition: transform .3s var(--ease);
}
.accordion__icon::before{ left:0; top:8px; width:18px; height:2px; }
.accordion__icon::after{ left:8px; top:0; width:2px; height:18px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after{ transform: rotate(90deg); opacity:0; }
.accordion__panel{
  max-height:0; overflow:hidden; transition: max-height .35s var(--ease);
}
.accordion__panel p{ padding: 0 4px 22px; color: var(--gray); max-width:640px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ padding: 40px 0; background: var(--bg); border-top: 1px solid var(--gray-light); }.footer__inner{
  display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;
  font-size:0.85rem; color: var(--gray);
}
.footer__copy{ margin:0; }
.footer__nav{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 10px 28px;
}
.footer__nav a, .footer__link-btn{
  font-weight:600; color: var(--gray); font-size:0.82rem;
  padding:0; background:none; border:none; cursor:pointer; font-family:inherit;
}
.footer__nav a:hover, .footer__link-btn:hover{ color: var(--petrol); text-decoration:underline; }
@media (max-width:767px){
  .footer{ padding-bottom: 104px; }
}
@media (min-width:768px){
  .footer__inner{ flex-direction:row; justify-content:space-between; text-align:left; }
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
.whatsapp-float{
  position: fixed; right:20px; bottom:20px; z-index:400;
  width:58px; height:58px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(13,48,58,0.24);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 30px rgba(13,48,58,0.3); }
@media (min-width:768px){ .whatsapp-float{ right:32px; bottom:32px; } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

@keyframes draw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .path-line{ stroke-dashoffset:0; }
}

/* ==========================================================================
   Central de Conteúdos — hub, cards, artigo
   ========================================================================== */
.nav__link.is-active{ color: var(--petrol); }
.nav__link.is-active::after{ content:''; display:block; height:2px; background:var(--petrol); margin-top:4px; border-radius:2px; }

.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:0.82rem; color: var(--gray); margin-bottom:20px;
}
.breadcrumbs a{ color: var(--gray); transition: color .2s var(--ease); }
.breadcrumbs a:hover{ color: var(--petrol); }
.breadcrumbs span{ color: var(--gray-light); }

/* --- Busca e filtro --- */
.content-search{ margin: 28px 0 20px; max-width:480px; }
.content-search input{
  width:100%; padding:14px 20px; border-radius:100px; border:1.5px solid var(--gray-light);
  font-family: var(--font-body); font-size:0.95rem; color: var(--black); background:#fff;
  transition: border-color .2s var(--ease);
}
.content-search input:focus{ outline:none; border-color: var(--petrol); }

.content-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.content-filter__btn{
  background: var(--petrol-tint); color: var(--petrol-dark); font-weight:700; font-size:0.82rem;
  padding:9px 16px; border-radius:100px; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.content-filter__btn:hover{ background: var(--gray-light); }
.content-filter__btn.is-active{ background: var(--petrol); color:#fff; }

/* --- Grade de cartões --- */
.content-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:36px;
}
@media (min-width:640px){ .content-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){ .content-grid{ grid-template-columns: repeat(3,1fr); } }

.content-card{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  background:#fff; border-radius: var(--radius-md); padding:26px 24px;
  box-shadow: var(--shadow-sm); border:1px solid rgba(13,48,58,0.05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.content-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.content-card__tag{
  background: var(--petrol-tint); color: var(--petrol-dark); font-weight:700; font-size:0.72rem;
  letter-spacing:0.04em; text-transform:uppercase; padding:6px 12px; border-radius:100px;
}
.content-card__title{
  font-family: var(--font-display); font-weight:800; color: var(--petrol-dark); font-size:1.05rem; line-height:1.35;
}
.content-card__excerpt{ color: var(--gray); font-size:0.92rem; line-height:1.55; }
.content-card__date{ color: var(--gray); font-size:0.78rem; margin-top:auto; padding-top:6px; }

.content-empty{ text-align:center; color: var(--gray); margin:48px 0; }

/* --- Página de artigo --- */
.article{ padding: 44px 0 0; }
.article .container{ max-width:760px; }
.article__title{
  font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height:1.2; margin-bottom:14px;
}
.article__subtitle{
  font-size:1.08rem; color: var(--gray); max-width:640px; margin-bottom:18px; line-height:1.6;
}
.article__meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:0.82rem; color: var(--gray); margin-bottom:32px; padding-bottom:28px;
  border-bottom:1px solid var(--gray-light);
}
.article__intro{
  font-size:1.05rem; color: var(--petrol-dark); line-height:1.7; margin-bottom:32px; font-weight:500;
}

.article-toc{
  background: var(--bg); border-radius: var(--radius-md); padding:22px 24px; margin-bottom:40px;
}
.article-toc__title{
  font-family: var(--font-display); font-weight:800; color: var(--petrol-dark); font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;
}
.article-toc ol{ display:flex; flex-direction:column; gap:8px; counter-reset:toc; }
.article-toc li{ counter-increment:toc; font-size:0.92rem; }
.article-toc a{
  color: var(--petrol); font-weight:600; transition: color .2s var(--ease);
}
.article-toc a::before{ content: counter(toc) ". "; color: var(--petrol-2); }
.article-toc a:hover{ color: var(--petrol-dark); text-decoration:underline; }

.article__body{ color: var(--black); font-size:1.02rem; line-height:1.8; }
.article__body h2{
  font-size:1.4rem; margin: 44px 0 16px; scroll-margin-top: calc(var(--header-h) + 20px);
}
.article__body h3{
  font-size:1.12rem; margin: 30px 0 12px; scroll-margin-top: calc(var(--header-h) + 20px);
}
.article__body p{ margin-bottom:18px; }
.article__body ul{ margin: 0 0 18px; display:flex; flex-direction:column; gap:10px; }
.article__body ul li{
  position:relative; padding-left:22px; color: var(--black);
}
.article__body ul li::before{
  content:''; position:absolute; left:0; top:10px; width:7px; height:7px; border-radius:50%; background: var(--petrol-2);
}
.article__body a{ color: var(--petrol); text-decoration:underline; text-underline-offset:2px; }
.article-legal-refs{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--gray-light);
  font-size:0.85rem; color: var(--gray);
}

.article__cta{
  background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-dark) 100%);
  border-radius: var(--radius-lg); padding:40px 32px; text-align:center; color:#fff;
  margin: 48px 0; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.article__cta h2{ color:#fff; font-size:1.3rem; }
.article__cta p{ color:rgba(255,255,255,0.85); max-width:460px; }

.article-faq{ padding-top:8px; }
.article-faq .accordion{ margin-top:0; max-width:none; }

.related-articles{ background:#fff; }

@media (min-width:768px){
  .article{ padding-top:60px; }
  .article__cta{ padding:52px 60px; }
}