:root{
  /* brand — unchanged */
  --navy:#0A2647; --blue:#1E6FD9; --blue-dark:#154F9E;
  --green:#3FA34D; --green-dark:#2E7D38; --bg:#F5F7FB; --surface:#FFFFFF;
  --ink:#10233F; --muted:#5B6B84; --line:#E3E8F1;

  /* new surfaces & accents */
  --green-darker:#245F2C; /* .btn-primary:hover — darker than --green-dark now that --green-dark is the resting state (contrast fix) */
  --navy-900:#071B33; --blue-lt:#5B9BF3; --green-lt:#8FD3A0;
  --amber:#B4531A; --amber-bg:#FDF1E7; --sand:#FFFDF8;
  --line-dark:rgba(255,255,255,.14);
  --ink-on-dark:#E8EFF8; --muted-on-dark:#9DB0C9;

  /* radii */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --radius:14px; /* legacy alias, kept so untouched rules keep working */

  /* elevation */
  --shadow-sm:0 1px 2px rgba(10,38,71,.05), 0 2px 8px rgba(10,38,71,.04);
  --shadow-md:0 4px 12px rgba(10,38,71,.07), 0 12px 28px rgba(10,38,71,.07);
  --shadow-lg:0 12px 24px rgba(10,38,71,.10), 0 28px 60px rgba(10,38,71,.12);
  --shadow:var(--shadow-sm); /* legacy alias */
  --glow-green:0 8px 22px rgba(63,163,77,.32);

  /* fluid type scale */
  --step--1:clamp(.78rem,.75rem + .12vw,.85rem);
  --step-0:clamp(.94rem,.90rem + .18vw,1rem);
  --step-1:clamp(1.06rem,1.00rem + .30vw,1.20rem);
  --step-2:clamp(1.25rem,1.13rem + .58vw,1.60rem);
  --step-3:clamp(1.50rem,1.28rem + 1.05vw,2.15rem);
  --step-4:clamp(1.80rem,1.42rem + 1.85vw,2.90rem);
  --step-hero:clamp(2.10rem,1.30rem + 3.05vw,3.35rem);

  --wrap:1120px;
  --font-display:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy);margin:0;letter-spacing:-.01em;line-height:1.15;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.section{padding:64px 0;}
@media(max-width:760px){.section{padding:44px 0;}}

/* brand glyph */
.glyph{display:inline-flex;align-items:flex-end;gap:3px;height:20px;}
.glyph i{display:block;width:5px;background:var(--green);border-radius:2px;}
.glyph i:nth-child(1){height:7px;}.glyph i:nth-child(2){height:12px;}
.glyph i:nth-child(3){height:17px;}.glyph i:nth-child(4){height:20px;background:var(--blue);}
.brand{display:inline-flex;align-items:center;gap:11px;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--navy);}
.brand--light .brand-name{color:#fff;}
/* topbar */
.topbar{background:var(--navy);position:sticky;top:0;z-index:30;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.topbar .brand-name{color:#fff;}
.mainnav{display:flex;align-items:center;gap:22px;}
.mainnav a{color:#B9C6DC;font-size:14px;font-weight:500;}
.mainnav a:hover{color:#fff;}
.mainnav .nav-cta{background:var(--blue);color:#fff;padding:9px 16px;border-radius:9px;font-weight:600;}
.mainnav .nav-cta:hover{background:var(--blue-dark);color:#fff;}
/* footer — superseded by the dark, token-based footer layer below (Task 10). */
/* shared section bits used across partials */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-dark);margin-bottom:14px;}
/* Any icon inside an eyebrow is sized to the eyebrow's text, not icon() default 24px.
   Scoped only to --alert before, so every other eyebrow icon shipped oversized. */
.eyebrow svg{flex:none;width:15px;height:15px;}
.section-head{max-width:640px;margin:0 auto 34px;text-align:center;}
.section-head h2{font-size:26px;}
.section-head p{color:var(--muted);margin-top:10px;}
.grid{display:grid;gap:18px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:13px 22px;border-radius:10px;font-family:var(--font-body);cursor:pointer;border:none;}
.btn-primary{background:var(--green-dark);color:#fff;}.btn-primary:hover{background:var(--green-darker);}
.btn-whats{background:#167C3C;color:#fff;}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--line);}

/* .hero — see the dedicated layer near the end of this file for the
   redesigned dark/product hero (Task 5). Shared plan-mini/shot bits below
   are part of that layer too; kept together so the section reads as one. */

.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr;}}
/* .prova — see the dedicated layer near the end of this file (Task 7) for
   the redesigned authority band. .grid-3 / bare .card — superseded by
   .dif-list / .dif-item below (Task 10): diferenciais was the last
   section still shaped like the old repeated card grid. */
/* .chips / .chip — superseded by .segmentos-grid / .segmento-card below (Task 9). */
/* .plan-cards / .plan-card / .ribbon / .price / .addons — superseded by
   the redesigned elevation layer below (Task 10). */
/* modal */
.modal{position:fixed;inset:0;background:rgba(10,38,71,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;}
.modal[hidden]{display:none;}
.modal-card{background:#fff;border-radius:16px;padding:28px;max-width:420px;width:100%;position:relative;box-shadow:0 24px 60px rgba(10,38,71,.35);}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:24px;color:var(--muted);cursor:pointer;line-height:1;}
.modal-sub{color:var(--muted);font-size:14px;margin:6px 0 16px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.lead-form label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:12px;}
.lead-form input[type=text],.lead-form input[type=email],.lead-form input[type=tel]{width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-family:var(--font-body);font-size:15px;}
.lead-form .check{font-weight:500;font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start;}
.lead-form .check input{margin-top:3px;}
.lead-form .btn{width:100%;margin-top:6px;}
.field-error{color:#C0392B;font-size:12px;margin-top:4px;display:block;}

/* .intent-grid / .intent-card — superseded by .migracao-* below (Task 9). */

/* .faq-wrap / .faq-item — superseded by the redesigned accordion layer below (Task 10). */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lead-form.big label{margin-bottom:14px;}
.lead-form select,.lead-form textarea{width:100%;margin-top:5px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-family:var(--font-body);font-size:15px;background:#fff;}
.checks{margin-bottom:6px;}
.form-alert{background:#FDECEA;color:#9B241B;border:1px solid #F5C6C0;border-radius:9px;padding:11px 14px;font-size:14px;margin-bottom:14px;}
@media(max-width:860px){.row-2{grid-template-columns:1fr;}}
/* .contato / .contato-grid / .contato-benes / .lead-form.big surface —
   superseded by the elevated contato layer below (Task 10). */

.legal{max-width:720px;padding:60px 24px;}
.legal h1{margin-bottom:18px;}
.legal p{color:var(--muted);margin-bottom:14px;}
.legal a{color:var(--blue-dark);font-weight:600;}

/* ===== surfaces ===== */
.u-dark{background:var(--navy);color:var(--ink-on-dark);}
.u-dark h2,.u-dark h3,.u-dark h4{color:#fff;}
.u-dark p{color:var(--muted-on-dark);}
.u-sand{background:var(--sand);}

/* ===== scroll reveal ===== */
/* Content is visible by DEFAULT. JS opts elements into the animated state by
   adding .js-reveal on <html>, so a JS failure can never hide content. */
.js-reveal .reveal{opacity:0;translate:0 12px;}
.js-reveal .reveal.is-visible{opacity:1;translate:none;
  transition:opacity .6s var(--ease-out), translate .6s var(--ease-out);}
.js-reveal .reveal-stagger > *{opacity:0;translate:0 12px;}
.js-reveal .reveal-stagger.is-visible > *{opacity:1;translate:none;
  transition:opacity .5s var(--ease-out), translate .5s var(--ease-out);}
.js-reveal .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.00s}
.js-reveal .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.06s}
.js-reveal .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.12s}
.js-reveal .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.18s}
.js-reveal .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.24s}
.js-reveal .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.30s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .js-reveal .reveal,.js-reveal .reveal-stagger > *{opacity:1 !important;translate:none !important;}
}

/* ===== header / mobile nav drawer ===== */
.topbar-inner{position:relative;}

.nav-toggle{
  display:none;
  position:relative;
  width:44px;height:44px;
  padding:0;margin:0;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:hover{background:rgba(255,255,255,.08);}
.nav-toggle:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;}

.nav-toggle-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  opacity:1;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);
}
.nav-toggle-icon--close{opacity:0;transform:translate(-50%,-50%) rotate(-45deg) scale(.7);}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.7);}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1);}

@media(max-width:860px){
  .nav-toggle{display:inline-flex;}

  .mainnav{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--navy-900);
    border-top:1px solid var(--line-dark);
    box-shadow:var(--shadow-lg);
    padding:6px 24px 22px;
    transform-origin:top center;
    transform:translateY(-6px) scaleY(.98);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s;
  }
  .mainnav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scaleY(1);
    transition:opacity .22s var(--ease-out),transform .24s var(--ease-out),visibility 0s linear 0s;
  }
  .mainnav a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:11px 4px;
    font-size:15px;
    border-bottom:1px solid var(--line-dark);
  }
  .mainnav a.nav-cta{
    justify-content:center;
    margin-top:12px;
    border-bottom:none;
  }
}

body.nav-open{overflow:hidden;}
@media(max-width:860px){
  body.nav-open{position:relative;}
  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:29;
    background:rgba(7,27,51,.6);
  }
}

/* =====================================================================
   Hero — Task 5. Authority-led (dark, typographic, numbers-forward)
   fused with product-forward: deep navy surface, oversized headline,
   amber reform hook, profile selector, product mockup in perspective,
   plans strip floating on the surface below. Everything here is scoped
   to .hero so it doesn't leak into other sections.
   ===================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--navy-900);
  padding:64px 0 0;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(52% 60% at 86% 6%, rgba(91,155,243,.34), transparent 62%),
    radial-gradient(38% 42% at 6% 108%, rgba(63,163,77,.20), transparent 65%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(85% 65% at 62% 0%, #000 35%, transparent 88%);
  mask-image:radial-gradient(85% 65% at 62% 0%, #000 35%, transparent 88%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center;padding-bottom:40px;}
.hero-copy{max-width:660px;}

.hero-hook{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#FFC259,#F5A623);
  color:var(--navy-900);
  font-weight:800;font-size:var(--step--1);
  padding:8px 16px 8px 12px;border-radius:var(--r-pill);
  margin:2px 0 18px;
  box-shadow:0 6px 18px rgba(245,166,35,.28);
  transition:box-shadow .18s var(--ease-out);
}
.hero-hook:hover{box-shadow:0 10px 22px rgba(245,166,35,.36);transform:translateY(-1px);}
.hero-hook:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.hero-hook-ic{flex:none;}

.hero h1{
  font-size:var(--step-hero);
  letter-spacing:-.02em;
  line-height:1.08;
  color:#fff;
  margin:0 0 22px;
  max-width:17ch;
  text-wrap:balance;
}
.hero .lede{color:var(--muted-on-dark);font-size:var(--step-1);max-width:460px;margin-bottom:24px;margin-top:0;}

.hero-copy .qlabel{font-family:var(--font-display);font-weight:800;color:var(--ink-on-dark);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}

.pills{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:26px;}
.profile-pill{
  border:1px solid var(--line-dark);
  background:rgba(255,255,255,.05);
  border-radius:var(--r-pill);
  padding:10px 16px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--step-0);
  color:var(--ink-on-dark);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background .15s var(--ease-out),border-color .15s var(--ease-out),transform .15s var(--ease-out);
}
.profile-pill:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09);}
.profile-pill:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;}
.profile-pill.is-on,
.profile-pill[aria-pressed="true"]{
  background:#fff;
  border-color:#fff;
  color:var(--navy-900);
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.hero .btn-primary{box-shadow:var(--glow-green);}
.hero .btn-primary:focus-visible,
.hero .btn-whats:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;}

.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;}
.trust li{display:flex;align-items:center;gap:8px;color:var(--muted-on-dark);font-size:var(--step--1);font-weight:600;}
.trust li svg{flex:none;width:16px;height:16px;color:var(--green-lt);}

/* product mockup — glass surface, tilted in perspective */
.hero-shot{
  position:relative;
  z-index:1;
  padding:22px;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transform:perspective(900px) rotateX(6deg);
  transition:transform .3s var(--ease-out);
}
.shot-win{background:#fff;border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-md);}
.shot-chrome{display:flex;gap:6px;margin-bottom:14px;}
.shot-chrome i{display:block;width:9px;height:9px;border-radius:50%;background:var(--line);}
.shot-chrome i:nth-child(1){background:#F0776A;}
.shot-chrome i:nth-child(2){background:#F4BF4F;}
.shot-chrome i:nth-child(3){background:#59C36A;}
.shot-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.shot-top strong{font-family:var(--font-display);color:var(--navy);}
.badge-ok{background:#E9F7EC;color:var(--green-dark);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;}
.shot-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.shot-kpis div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px;}
.shot-kpis small{color:var(--muted);font-size:11px;display:block;margin-bottom:2px;}
.shot-kpis b{font-family:var(--font-display);color:var(--navy);font-size:17px;}
.shot-kpis b.g{color:var(--green-dark);}
.shot-line{height:9px;border-radius:5px;background:#EEF2F8;margin-bottom:7px;}
.shot-line.s{width:60%;}

/* plans strip — light cards elevated on the dark surface */
.plans-strip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:56px;}
.plan-mini{
  background:var(--surface);
  border-radius:var(--r-md);
  padding:18px 16px;
  text-align:center;
  box-shadow:var(--shadow-md);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.plan-mini:hover,.plan-mini:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.plan-mini:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;}
.plan-mini.hot{box-shadow:0 0 0 2px var(--green), var(--shadow-lg);}
.pm-name{display:block;font-family:var(--font-display);font-weight:700;color:var(--navy);}
.pm-tag{display:block;color:var(--muted);font-size:11.5px;margin:2px 0 5px;}
.pm-price{color:var(--green-dark);font-family:var(--font-display);font-weight:800;font-size:19px;}
.pm-price small{color:var(--muted);font-size:11px;font-weight:600;}

@media(max-width:860px){
  .hero{padding-top:48px;}
  .hero-grid{grid-template-columns:1fr;gap:32px;padding-bottom:28px;}
  .hero-shot{transform:none;}
  .plans-strip{grid-template-columns:1fr 1fr;padding-bottom:40px;}
}
@media(max-width:560px){
  .hero-hook{font-size:var(--step--1);}
  .plans-strip{grid-template-columns:1fr;}
  .pills{grid-template-columns:1fr;}
  .profile-pill{white-space:normal;}
}

/* =====================================================================
   Reforma Tributária — Task 6. Treatment C: dark surface, numbers as
   protagonists, typographic authority. Statutory timeline only.
   The SVG track is decorative (aria-hidden); .reforma-marcos <ol> is the
   real, always-visible content — it works with no CSS and no JS.
   ===================================================================== */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.u-dark .eyebrow{color:var(--blue-lt);}
.eyebrow--alert{display:inline-flex;align-items:center;gap:8px;}
.u-dark .eyebrow--alert{color:#FFC259;}

#reforma{position:relative;overflow:hidden;}
#reforma::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 92% 0%, rgba(255,194,89,.14), transparent 62%),
    radial-gradient(40% 50% at 4% 100%, rgba(91,155,243,.18), transparent 65%);
}
#reforma .wrap{position:relative;z-index:1;}
#reforma .section-head p{max-width:56ch;margin-left:auto;margin-right:auto;}

.reforma-stats{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;}
.reforma-stats li{padding:24px 14px;border:1px solid var(--line-dark);border-radius:var(--r-lg);background:rgba(255,255,255,.04);}
.stat-num{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--step-4);letter-spacing:-.02em;line-height:1;}
.stat-num--amber{color:#FFC259;}
.stat-num--blue{color:var(--blue-lt);}
.stat-num--green{color:var(--green-lt);}
.stat-label{display:block;margin-top:9px;font-size:var(--step--1);font-weight:700;color:var(--muted-on-dark);text-transform:uppercase;letter-spacing:.05em;}

.reforma-tl{position:relative;}
.reforma-tl-svg{display:block;width:100%;height:auto;margin-bottom:-8px;}
.reforma-tl-track{stroke:rgba(255,255,255,.28);stroke-width:3;stroke-linecap:round;}
.reforma-tl-dot{stroke:var(--navy);stroke-width:5;}
.reforma-tl-dot--amber{fill:#FFC259;}
.reforma-tl-dot--blue{fill:var(--blue-lt);}
.reforma-tl-dot--green{fill:var(--green-lt);}
.reforma-tl-yr{fill:var(--muted-on-dark);font-family:var(--font-display);font-weight:700;font-size:22px;}

.reforma-marcos{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.marco{background:rgba(255,255,255,.045);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:22px 16px;display:flex;flex-direction:column;transition:border-color .2s var(--ease-out),background .2s var(--ease-out);}
.marco:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);}
.marco-dot{display:none;} /* desktop: the SVG dot above stands in visually */
.marco-ano{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);letter-spacing:-.01em;margin-bottom:6px;}
.marco--amber .marco-ano{color:#FFC259;}
.marco--blue .marco-ano{color:var(--blue-lt);}
.marco--green .marco-ano{color:var(--green-lt);}
.marco-titulo{font-size:var(--step-0);color:#fff;margin-bottom:8px;line-height:1.3;}
.marco-resumo{color:var(--muted-on-dark);font-size:var(--step--1);line-height:1.5;margin-bottom:14px;flex:1;}
.marco-acao{display:flex;align-items:flex-start;gap:7px;font-size:var(--step--1);line-height:1.4;color:var(--ink-on-dark);font-weight:600;padding-top:12px;border-top:1px solid var(--line-dark);margin:0;}
.marco-acao-ic{flex:none;width:16px;height:16px;margin-top:1px;color:var(--green-lt);}

.reforma-cta{text-align:center;margin-top:44px;}

@media(min-width:761px) and (max-width:900px){
  .reforma-marcos{grid-template-columns:1fr 1fr;}
  /* 5 milestones in 2 columns leaves the last one alone in its row —
     center it at column width instead of stranding it in column 1. Scoped
     to this band only: below 760px .reforma-marcos switches to a flex
     column rail, where max-width/margin-inline:auto would misalign the
     card and its dot instead of centering anything. */
  .marco:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 7px);margin-inline:auto;}
}

@media(max-width:760px){
  .reforma-stats{grid-template-columns:1fr;gap:12px;margin-bottom:40px;}
  .reforma-tl-svg{display:none;}
  .reforma-marcos{display:flex;flex-direction:column;gap:0;grid-template-columns:none;padding-left:26px;}
  .reforma-marcos::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line-dark);}
  .marco{background:none;border:none;border-radius:0;padding:0 0 28px;position:relative;}
  .marco:hover{background:none;}
  .marco:last-child{padding-bottom:0;}
  .marco-dot{display:block;position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;border:3px solid var(--navy);}
  .marco--amber .marco-dot{background:#FFC259;}
  .marco--blue .marco-dot{background:var(--blue-lt);}
  .marco--green .marco-dot{background:var(--green-lt);}
  .marco-acao{border-top:none;padding-top:0;}
}

/* =====================================================================
   Prova + Problema — Task 7. Treatment C (prova): a thin, dark authority
   band of capability facts — not a trust-badge row, no metrics. Treatment
   B (problema): warm/human, asymmetric two-column composition on --sand —
   illustration on one side, the six pains as an icon-led list on the
   other. Deliberately not a .grid-3 card grid: sections 3/5/9 already
   share that pattern and the point of this task is to break it here.
   ===================================================================== */

/* ---- prova: thin dark capability band ----
   Mobile-first: a clean single-column stack (bottom-rule dividers) up to
   1099px, where there still isn't reliably enough width for four nowrap
   items on one line. From 1100px up — comfortably true at the 1280px
   design width — it becomes one row with vertical rule dividers. This
   avoids the flex-wrap 3+1 break: the row layout only ever turns on at a
   width where all four items are known to fit without wrapping. */
.prova.u-dark{
  padding:0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.prova-inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:6px 24px;
}
.prova-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 2px;
  position:relative;
}
.prova-item:not(:last-child){border-bottom:1px solid var(--line-dark);}
.prova-ic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
}
.prova-ic svg{width:16px;height:16px;}
.prova-ic--blue{background:rgba(91,155,243,.18);color:var(--blue-lt);}
.prova-ic--green{background:rgba(143,211,160,.18);color:var(--green-lt);}
.prova-ic--amber{background:rgba(255,194,89,.18);color:#FFC259;}
.prova-text{
  font-size:var(--step--1);
  font-weight:600;
  color:var(--ink-on-dark);
  white-space:normal;
}

@media(min-width:1100px){
  .prova-inner{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    padding:18px 24px;
  }
  .prova-item{
    padding:8px 14px;
    border-bottom:none;
  }
  .prova-item:not(:first-child)::before{
    content:"";
    position:absolute;
    left:0;top:8px;bottom:8px;
    width:1px;
    background:var(--line-dark);
  }
  .prova-text{white-space:nowrap;}
}

/* ---- problema: warm, asymmetric composition ---- */
.problema{position:relative;}
.problema .section-head{margin-bottom:44px;}

.problema-composition{
  display:grid;
  grid-template-columns:1.14fr .86fr;
  gap:56px;
  align-items:center;
}

.problema-figure{
  position:relative;
  margin:0;
}
.problema-figure::before{
  content:"";
  position:absolute;
  inset:6%;
  background:radial-gradient(60% 60% at 50% 42%, rgba(30,111,217,.10), transparent 72%);
  border-radius:50%;
  z-index:0;
}
.problema-illustration{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  display:block;
}

.problema-list{list-style:none;margin:0;padding:0;}
.problema-item{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.problema-item:first-child{padding-top:0;}
.problema-item:last-child{border-bottom:none;padding-bottom:0;}

.problema-ic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  margin-top:2px;
  border-radius:var(--r-md);
  background:var(--amber-bg);
  color:var(--amber);
}
.problema-ic svg{width:20px;height:20px;}

.problema-item p{
  color:var(--ink);
  font-size:var(--step-0);
  line-height:1.5;
  padding-top:6px;
}

@media(max-width:860px){
  .problema-composition{grid-template-columns:1fr;gap:32px;}
  .problema-figure{max-width:320px;margin:0 auto;}
}
@media(max-width:560px){
  .problema-item{gap:14px;padding:16px 0;}
  .problema-ic{width:38px;height:38px;}
}

/* =====================================================================
   Como funciona — Task 8. Treatment C: the reform timeline's drawn-track
   idiom reused for a process instead of a chronology — four numbered
   markers (each carrying its own step icon) on a horizontal track,
   collapsing to a left-rule vertical stack on mobile. On the white/alt
   surface, no cards: text sits directly under each marker so the section
   reads lighter than reforma's dark milestone boxes and lighter than
   incluso's elevated cards below it.

   Draw animation: .cf-track-line is a decorative overlay drawn via JS
   (see the matching IIFE in site.js). .cf-track-base renders the same
   path permanently, with no dasharray manipulation at all, so the track
   is never dependent on the animation to be visible — belt and braces
   on top of the standard reveal failsafe (rect-check + timeout).
   ===================================================================== */
.cf-track{position:relative;}
.cf-track-svg{display:block;width:100%;height:auto;margin-bottom:-6px;}
.cf-track-base{stroke:var(--line);stroke-width:3;stroke-linecap:round;}
.cf-track-line{stroke:var(--blue);stroke-width:3;stroke-linecap:round;}
.cf-track-tail{stroke:var(--line);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9;opacity:.7;}
.cf-track-dot{fill:var(--surface);stroke:var(--blue);stroke-width:3;}

.cf-steps{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.cf-step{display:flex;flex-direction:column;align-items:center;text-align:center;}
.cf-marker{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.cf-marker--blue{background:var(--blue-dark);}
.cf-marker--green{background:var(--green-dark);}
.cf-marker-ic{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;color:var(--navy);box-shadow:var(--shadow-sm);}
.cf-marker-ic svg{display:block;width:14px;height:14px;}
.cf-step h3{font-size:var(--step-0);margin-bottom:8px;}
.cf-step p{color:var(--muted);font-size:var(--step--1);line-height:1.5;max-width:24ch;}

@media(max-width:860px){
  .cf-track-svg{display:none;}
  .cf-steps{grid-template-columns:1fr 1fr;gap:36px 24px;}
}
@media(max-width:560px){
  .cf-steps{grid-template-columns:1fr;gap:0;}
  .cf-step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding-bottom:28px;position:relative;}
  .cf-step:last-child{padding-bottom:0;}
  .cf-step::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--line);}
  .cf-step:last-child::before{display:none;}
  .cf-marker{margin-bottom:0;}
  .cf-step p{max-width:none;}
}

/* =====================================================================
   O que está incluso — Task 8. Treatment A: product surface. Elevated
   white cards with real depth (shadow-md, shadow-lg on hover) on the
   page's neutral --bg tone, distinct from como-funciona's white/alt
   ground above it. Fiscal is visually featured (soft gradient, deeper
   shadow, a badge) as the module every plan shares — all four cards
   stay in the same grid track (4 → 2×2 → 1) so the feature reads as a
   surface treatment, never as a layout break.
   ===================================================================== */
.incluso{background:var(--bg);}
.incluso-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;}
.incluso-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow-md);transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out);}
/* Use transform, NOT translate, for element motion: the reveal system owns the
   `translate` property and its .is-visible rule (specificity 0,3,0) silently wins
   over any element hover rule that also uses translate. */
.incluso-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.incluso-card--featured{background:linear-gradient(165deg,#FFFFFF 0%,#EEF5FE 100%);border-color:transparent;box-shadow:var(--shadow-lg);}
.incluso-badge{display:inline-block;background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px;}
.incluso-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-md);margin-bottom:16px;}
.incluso-ic svg{display:block;width:24px;height:24px;}
.incluso-ic--blue{background:rgba(30,111,217,.10);color:var(--blue-dark);}
.incluso-ic--green{background:rgba(63,163,77,.10);color:var(--green-dark);}
.incluso-ic--amber{background:var(--amber-bg);color:var(--amber);}
.incluso-card h3{font-size:var(--step-1);margin-bottom:8px;}
.incluso-card--featured h3{font-size:var(--step-2);}
.incluso-card p{color:var(--muted);font-size:var(--step--1);line-height:1.55;}

@media(max-width:860px){.incluso-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.incluso-grid{grid-template-columns:1fr;}}

/* =====================================================================
   Para quem é / Migração / Depoimentos — Task 9. Treatment B: the human
   beat, all three on --sand (warm, distinct from incluso's --bg and
   planos/diferenciais' neutral --section above and below). None of the
   three reuses an existing idiom: segmentos is flat icon tiles in a grid
   that only ever divides evenly (4 → 2 → 2 columns, never a ragged
   last row) rather than problema's illustration+list or incluso's
   elevated cards; migração is a zigzag pair of illustrated blocks, not
   a numbered track; depoimentos is one honest illustrated statement,
   not a quote grid — there is nothing to quote yet.
   ===================================================================== */

/* ---- segmentos: organic icon tiles ---- */
.segmentos-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.segmento-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 22px;
  /* Use transform, NOT translate, for element motion: the reveal system owns
     the `translate` property and its .is-visible rule (specificity 0,3,0)
     silently wins over any element hover rule that also uses translate. */
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out);
}
.segmento-card:hover{
  border-color:transparent;
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.segmento-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:var(--r-md);
  margin-bottom:16px;
  transform:rotate(-4deg);
}
.segmento-card:nth-child(even) .segmento-ic{transform:rotate(4deg);}
.segmento-ic svg{width:22px;height:22px;}
.segmento-ic--blue{background:rgba(30,111,217,.10);color:var(--blue-dark);}
.segmento-ic--green{background:rgba(63,163,77,.10);color:var(--green-dark);}
.segmento-ic--amber{background:var(--amber-bg);color:var(--amber);}
.segmento-ic--navy{background:rgba(10,38,71,.09);color:var(--navy);}
.segmento-card h3{font-size:var(--step-0);margin-bottom:6px;}
.segmento-card p{color:var(--muted);font-size:var(--step--1);line-height:1.5;}

/* Extend the stagger primitive for two extra items (it only defines
   delays for nth-child 1–6) instead of touching the shared rule. */
.js-reveal .segmentos-grid.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.36s}
.js-reveal .segmentos-grid.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.42s}

@media(max-width:860px){
  .segmentos-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .segmento-card{padding:20px 18px;}
  .segmento-ic{width:40px;height:40px;margin-bottom:12px;}
  .segmento-ic svg{width:19px;height:19px;}
}

/* ---- migração: zigzag illustrated intent blocks ---- */
.migracao-grid{display:flex;flex-direction:column;gap:24px;}
.migracao-card{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:36px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 36px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease-out);
}
.migracao-card:hover{box-shadow:var(--shadow-md);}
.migracao-card:nth-child(2){grid-template-columns:1fr 200px;}
.migracao-card:nth-child(2) .migracao-figure{order:2;}
.migracao-figure svg{width:100%;height:auto;display:block;}
.migracao-body h3{font-size:var(--step-2);margin-bottom:10px;}
.migracao-body p{color:var(--muted);font-size:var(--step-0);line-height:1.55;margin-bottom:22px;max-width:46ch;}

@media(max-width:760px){
  .migracao-card,.migracao-card:nth-child(2){grid-template-columns:1fr;padding:28px;}
  .migracao-card:nth-child(2) .migracao-figure{order:0;}
  .migracao-figure{max-width:200px;margin:0 auto;}
  .migracao-body{text-align:center;}
  .migracao-body p{margin-left:auto;margin-right:auto;}
}

/* ---- depoimentos: one honest illustrated statement ---- */
.depoimentos-inner{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  align-items:center;
}
.depoimentos-figure{position:relative;}
.depoimentos-figure::before{
  content:"";
  position:absolute;
  inset:8%;
  background:radial-gradient(60% 60% at 50% 42%, rgba(63,163,77,.12), transparent 72%);
  border-radius:50%;
  z-index:0;
}
.depoimentos-figure svg{position:relative;z-index:1;width:100%;height:auto;display:block;}
.depoimentos-body h2{font-size:26px;margin:0 0 12px;}
.depoimentos-body p{color:var(--muted);font-size:var(--step-0);line-height:1.6;max-width:52ch;}

@media(max-width:760px){
  .depoimentos-inner{grid-template-columns:1fr;text-align:center;gap:28px;}
  .depoimentos-figure{max-width:200px;margin:0 auto;}
  .depoimentos-body p{margin-left:auto;margin-right:auto;}
}

/* =====================================================================
   Planos + Diferenciais + FAQ + Contato + Footer — Task 10.
   Treatment A (planos, contato): real product elevation — shadow-lg
   where it matters, a lifted featured plan, a form that reads as a
   surface, not a bordered box. Treatment C (diferenciais): dark surface,
   numbered facts, typographic authority — deliberately not a card grid
   (no boxes, no icon tiles, no drawn track): a bordered two-column
   "spec sheet" of six rows where the numeral itself carries the weight.
   It is the last section that still read as the old repeated grid.
   FAQ: legibility first, real icon() plus/minus indicators, and a
   height transition on <details> that is pure progressive enhancement —
   unsupported browsers keep the native instant toggle, so the accordion
   never depends on it to work. Footer: dark, token-based, contact/CNPJ
   explicitly marked pending rather than invented.
   ===================================================================== */

/* ---- planos: real elevation, featured plan lifted ---- */
.plan-cards{align-items:stretch;}
.plan-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 26px 26px;
  box-shadow:var(--shadow-sm);
  /* transform, not translate: .plan-card is a direct child of the
     .reveal-stagger grid, and .js-reveal .reveal-stagger.is-visible > *
     forces translate:none at higher specificity once revealed — using
     the translate property here would make the lift vanish the moment
     scroll-reveal fires. transform is untouched by that rule (Hard Rule 3). */
  transform:translateY(0);
  transition:box-shadow .22s var(--ease-out),transform .22s var(--ease-out),border-color .22s var(--ease-out);
}
.plan-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.plan-card--featured{
  border-color:transparent;
  background:linear-gradient(165deg,#FFFFFF 0%,#EEF5FE 100%);
  box-shadow:var(--shadow-lg);
  transform:translateY(-14px);
  z-index:1;
}
.plan-card--featured:hover{transform:translateY(-17px);}
.ribbon{
  position:absolute;top:-15px;left:26px;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--blue);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  padding:6px 14px 6px 10px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
}
.ribbon-ic{flex:none;width:13px;height:13px;}
.plan-tag{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px;}
.plan-card--featured .plan-tag{color:var(--blue-dark);}
.plan-card h3{font-size:var(--step-1);}
.price{font-family:var(--font-display);font-weight:800;color:var(--navy);font-size:var(--step-3);margin:8px 0 16px;letter-spacing:-.01em;}
.price small{font-size:13px;color:var(--muted);font-weight:600;}
.plan-card ul{list-style:none;padding:0;margin:0 0 22px;flex:1;}
.plan-card li{display:flex;align-items:flex-start;gap:10px;font-size:var(--step--1);line-height:1.45;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--line);}
.plan-card li:last-child{border-bottom:none;}
.plan-check{flex:none;width:17px;height:17px;margin-top:1px;color:var(--green-dark);}
.plan-card .btn{width:100%;margin-top:2px;}

.addons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:28px;}
.addon{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md);padding:14px 22px;text-align:center;}
.addon b{display:block;color:var(--navy);font-family:var(--font-display);font-size:var(--step--1);}
.addon span{display:block;color:var(--muted);font-size:11.5px;margin:2px 0 4px;}
.addon em{color:var(--green-dark);font-weight:700;font-style:normal;}

@media(max-width:560px){
  /* single-column stack: a permanent lift would overlap the card above it */
  .plan-card--featured{transform:translateY(0);}
  .plan-card--featured:hover{transform:translateY(-3px);}
}

/* ---- diferenciais: dark, bordered "spec sheet" of numbered facts ---- */
.dif-list{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
}
.dif-item{
  display:flex;align-items:flex-start;gap:22px;
  padding:34px 32px;
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  transition:background-color .2s var(--ease-out);
}
.dif-item:hover{background-color:rgba(255,255,255,.03);}
.dif-num{
  flex:none;
  font-family:var(--font-display);font-weight:800;
  font-size:var(--step-3);
  line-height:1;
  letter-spacing:-.02em;
}
.dif-item--blue .dif-num{color:var(--blue-lt);}
.dif-item--green .dif-num{color:var(--green-lt);}
.dif-item--amber .dif-num{color:#FFC259;}
.dif-body h3{font-size:var(--step-1);color:#fff;margin-bottom:8px;line-height:1.3;}
.dif-body p{color:var(--muted-on-dark);font-size:var(--step--1);line-height:1.55;}

@media(max-width:760px){
  .dif-list{grid-template-columns:1fr;}
  .dif-item{padding:26px 4px;gap:18px;}
}

/* ---- faq: legibility-first accordion, icon-driven indicator ---- */
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-list{display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:0 24px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.faq-item:hover{border-color:#D6E2F2;box-shadow:var(--shadow-md);}
.faq-item summary{
  list-style:none;cursor:pointer;
  padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px;}
.faq-q{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:var(--step-1);line-height:1.4;}
.faq-ic{position:relative;flex:none;width:22px;height:22px;color:var(--blue);}
.faq-ic svg{position:absolute;inset:0;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);}
.faq-ic-plus{opacity:1;transform:rotate(0) scale(1);}
.faq-ic-minus{opacity:0;transform:rotate(-90deg) scale(.6);}
.faq-item[open] .faq-ic-plus{opacity:0;transform:rotate(90deg) scale(.6);}
.faq-item[open] .faq-ic-minus{opacity:1;transform:rotate(0) scale(1);}
.faq-a{padding:0 0 24px;color:var(--muted);font-size:var(--step-0);line-height:1.65;max-width:64ch;}

/* Smooth open/close height — pure progressive enhancement. Unsupported
   browsers simply keep the native, instant <details> toggle: the
   accordion is fully functional either way, with or without this rule
   ever taking effect, and needs no JS in either case. */
@supports (interpolate-size: allow-keywords) {
  .faq-item{interpolate-size:allow-keywords;}
  .faq-item::details-content{
    height:0;
    overflow:hidden;
    transition:height .32s var(--ease-out),content-visibility .32s allow-discrete;
  }
  .faq-item[open]::details-content{height:auto;}
}

/* ---- contato: elevated form surface + supporting column ---- */
/* isolation:isolate establishes a stacking context here so
   .lead-form.big::before (z-index:-1) paints above this section's own
   background instead of being pulled below it. */
.contato{background:linear-gradient(180deg,#fff,var(--bg));isolation:isolate;}
.contato-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;}
.contato-copy h2{font-size:var(--step-3);margin-bottom:12px;}
.contato-copy p{color:var(--muted);font-size:var(--step-0);line-height:1.55;max-width:38ch;}
.contato-benes{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px;}
.contato-benes li{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:var(--step--1);font-weight:600;}
.contato-bene-ic{flex:none;width:19px;height:19px;color:var(--green-dark);}

.lead-form.big{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--shadow-lg);
}
.lead-form.big::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(150deg,rgba(30,111,217,.16),rgba(63,163,77,.12));
  transform:translate(16px,16px);
}

@media(max-width:860px){
  .contato-grid{grid-template-columns:1fr;}
  .contato-copy{text-align:center;}
  .contato-copy p{margin-left:auto;margin-right:auto;}
  .contato-benes{align-items:center;}
  .lead-form.big::before{display:none;}
}

/* ---- footer: dark, organized, contact/CNPJ marked as pending ---- */
.site-footer{background:var(--navy-900);color:var(--muted-on-dark);margin-top:40px;padding:56px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;}
.footer-grid h3{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px;}
.footer-grid a{display:block;color:var(--muted-on-dark);font-size:14px;padding:4px 0;transition:color .15s var(--ease-out);}
.footer-grid a:hover{color:#fff;}
.footer-grid a:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;border-radius:3px;}
.footer-tag{color:var(--muted-on-dark);font-size:14px;line-height:1.5;margin-top:12px;max-width:260px;}
.footer-pending{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-dark);color:var(--muted-on-dark);font-size:12px;font-style:italic;line-height:1.5;}
.footer-pending-ic{flex:none;width:15px;height:15px;margin-top:1px;opacity:.85;}
.footer-legal{border-top:1px solid var(--line-dark);margin-top:36px;padding-top:18px;font-size:12.5px;color:var(--muted-on-dark);}

@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;gap:26px;}}

/* =====================================================================
   reforma-tributaria.php — Task 11: the dedicated capture page. Reuses
   the reforma-section idiom (dark authority timeline, --sand mitos
   accordion) from Task 6 rather than inventing a new visual language —
   this page and the home #reforma section are the same subject and
   should read as one family. New here: the hero (its own dark band,
   above the fold, deliberately carries no .reveal — see site rules),
   the MEI/Simples split cards, and the CTA form surface.
   ===================================================================== */

/* ---- hero ---- */
.rt-hero{position:relative;overflow:hidden;padding:72px 0 56px;isolation:isolate;}
.rt-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 65% at 88% 0%, rgba(255,194,89,.16), transparent 60%),
    radial-gradient(40% 50% at 4% 100%, rgba(91,155,243,.20), transparent 65%);
}
.rt-hero-inner{position:relative;z-index:1;max-width:760px;}
.rt-hero h1{font-size:var(--step-hero);letter-spacing:-.02em;line-height:1.1;color:#fff;margin:0 0 20px;max-width:19ch;text-wrap:balance;}
.rt-hero .lede{color:var(--muted-on-dark);font-size:var(--step-1);line-height:1.6;max-width:60ch;margin-bottom:28px;}
.rt-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.rt-hero .btn-primary{box-shadow:var(--glow-green);}
.rt-hero .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line-dark);}
.rt-hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);}
.rt-hero .btn-primary:focus-visible,.rt-hero .btn-ghost:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;}
.rt-hero .trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;}
.rt-hero .trust li{display:flex;align-items:center;gap:8px;color:var(--muted-on-dark);font-size:var(--step--1);font-weight:600;}
.rt-hero .trust li svg{flex:none;width:16px;height:16px;color:var(--green-lt);}
@media(max-width:560px){.rt-hero{padding:52px 0 40px;}.rt-hero-cta{flex-direction:column;align-items:stretch;}}

/* ---- full timeline grid: always an even 4 / 2 / 1 split for 8 items,
   never a ragged last row at any width. Reuses .marco/.marco-* from the
   home condensed timeline (Task 6) — same visual family, new grid. ---- */
.rt-marcos{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.rt-marcos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){
  .rt-marcos{display:flex;flex-direction:column;gap:0;padding-left:26px;position:relative;}
  .rt-marcos::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line-dark);}
  .rt-marcos .marco{background:none;border:none;border-radius:0;padding:0 0 28px;position:relative;}
  .rt-marcos .marco:hover{background:none;}
  .rt-marcos .marco:last-child{padding-bottom:0;}
  .rt-marcos .marco-dot{display:block;position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;border:3px solid var(--navy);}
  .rt-marcos .marco--amber .marco-dot{background:#FFC259;}
  .rt-marcos .marco--blue .marco-dot{background:var(--blue-lt);}
  .rt-marcos .marco--green .marco-dot{background:var(--green-lt);}
  .rt-marcos .marco-acao{border-top:none;padding-top:0;}
}

/* ---- impacto: MEI vs Simples, two distinct cards (never merged into
   one generic list — the reform treats the two regimes differently and
   the layout should say so at a glance) ---- */
.rt-impacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.rt-impacto-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 28px;
  box-shadow:var(--shadow-sm);
}
.rt-impacto-card--mei{border-top:3px solid var(--blue);}
.rt-impacto-card--simples{border-top:3px solid var(--green);}
.rt-impacto-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--r-md);margin-bottom:16px;
}
.rt-impacto-card--mei .rt-impacto-ic{background:rgba(30,111,217,.10);color:var(--blue-dark);}
.rt-impacto-card--simples .rt-impacto-ic{background:rgba(63,163,77,.10);color:var(--green-dark);}
.rt-impacto-card h3{font-size:var(--step-1);margin-bottom:14px;}
.rt-impacto-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.rt-impacto-list li{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:var(--step--1);line-height:1.55;}
.rt-impacto-check{flex:none;width:18px;height:18px;margin-top:2px;color:var(--green-dark);}
@media(max-width:760px){
  .rt-impacto-grid{grid-template-columns:1fr;}
  .rt-impacto-card{padding:26px 22px;}
}

/* ---- cta: form surface reusing .lead-form.big (Task 10's contato
   card idiom) on its own copy + form grid ---- */
/* isolation:isolate — same fix as .contato above, same reason:
   .lead-form.big::before (z-index:-1) needs a stacking context to paint
   above this section's background. */
.rt-cta{background:linear-gradient(180deg,var(--bg),#fff);isolation:isolate;}
.rt-cta-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;}
.rt-cta-copy h2{font-size:var(--step-3);margin-bottom:12px;}
.rt-cta-copy p{color:var(--muted);font-size:var(--step-0);line-height:1.55;max-width:42ch;}
.rt-cta-benes{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px;}
.rt-cta-benes li{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:var(--step--1);font-weight:600;}
.rt-cta-cross{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted);}
.rt-cta-cross a{color:var(--blue-dark);font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.rt-cta-cross a:hover{text-decoration:underline;}
.rt-cta-cross a svg{width:15px;height:15px;}
@media(max-width:860px){
  .rt-cta-grid{grid-template-columns:1fr;}
  .rt-cta-copy{text-align:center;}
  .rt-cta-copy p{margin-left:auto;margin-right:auto;}
  .rt-cta-benes{align-items:center;}
  .rt-cta-cross{text-align:center;}
}

/* =====================================================================
   /reforma/ hub — Task 5. Reuses the reforma-tributaria idiom (eyebrow,
   .btn, .reveal, shadow tokens) rather than inventing anything new. The
   heading is deliberately reveal-free (same rule as .rt-hero): it is the
   first thing painted on this page, and content that starts visible must
   never depend on an IntersectionObserver firing.
   ===================================================================== */

/* ---- heading ---- */
.hub-head{padding:56px 0 8px;}
.hub-head-inner{max-width:760px;}
.hub-head h1{font-size:var(--step-4);letter-spacing:-.02em;line-height:1.15;margin:0 0 16px;max-width:20ch;text-wrap:balance;}
.hub-head .lede{color:var(--muted);font-size:var(--step-1);line-height:1.6;max-width:64ch;}
@media(max-width:560px){.hub-head{padding:40px 0 4px;}}

/* ---- category filters: real links, wrap instead of overflowing — 21
   of them (Todos + 20 categories) will never fit one row at any width. ---- */
.hub-filtros{padding:28px 0 8px;}
.hub-filtros-inner{display:flex;flex-wrap:wrap;gap:10px;}
.hub-filtro{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-size:var(--step--1);font-weight:600;
  transition:background-color .16s var(--ease-out),color .16s var(--ease-out),border-color .16s var(--ease-out);
}
.hub-filtro:hover{border-color:var(--blue-lt);color:var(--blue-dark);}
.hub-filtro.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.hub-filtro-n{font-size:.85em;opacity:.7;}

/* ---- card grid: flex-wrap, not CSS grid. A fixed-column grid track
   (even an auto-fit one) reserves the same N column tracks for every
   row, so a partial last row just leaves empty cells — that's exactly
   the "3+1 orphan" shape this rule exists to prevent, confirmed by
   rendering this at 1280 with grid-template-columns:repeat(auto-fit,...)
   before switching to this. Flex items in an incomplete row grow to
   fill it instead, so the last row (whether it has 1, 2 or 3 cards
   left over) always fills the full width — at 20 items today, however
   many tomorrow, at any width from 375 to 1280. */
.hub-grade{padding-top:32px;}
.hub-grid{display:flex;flex-wrap:wrap;gap:22px;}
/* Não deixar o card crescer: com 20 artigos a última fila fica com 2, e
   flex-grow os esticava para 525px contra 343px dos demais — 53% mais
   largos, o que lê como defeito. Fila final curta, alinhada à esquerda,
   lê como "a lista acabou aqui". calc() reproduz as 3 colunas com o gap. */
.hub-grid .artigo-card{flex:0 1 calc((100% - 44px) / 3);min-width:260px;}
.hub-vazio{text-align:center;color:var(--muted);padding:40px 0;}
.hub-vazio a{color:var(--blue-dark);font-weight:700;display:inline-flex;align-items:center;gap:6px;}

.artigo-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);
  /* transform, NOT translate — the reveal system's .is-visible rule owns
     `translate` and would silently cancel a hover rule that also used it. */
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out);
}
.artigo-card:hover,.artigo-card:focus-visible{
  border-color:transparent;box-shadow:var(--shadow-md);transform:translateY(-3px);
}
.artigo-card:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;}
.hub-chip{
  display:inline-flex;align-self:flex-start;
  background:rgba(30,111,217,.09);color:var(--blue-dark);
  font-size:var(--step--1);font-weight:700;
  padding:4px 11px;border-radius:var(--r-pill);margin-bottom:14px;
}
.artigo-card h2{font-size:var(--step-1);line-height:1.3;margin-bottom:10px;}
.artigo-card p{color:var(--muted);font-size:var(--step--1);line-height:1.55;flex:1;margin-bottom:18px;}
.artigo-card-cta{display:inline-flex;align-items:center;gap:6px;color:var(--blue-dark);font-weight:700;font-size:var(--step--1);}
.artigo-card-cta svg{width:15px;height:15px;}
.artigo-card:hover .artigo-card-cta{text-decoration:underline;}

@media(max-width:560px){
  .hub-grid{gap:16px;}
  .artigo-card{padding:20px 18px;}
}

/* ---- cta band back to the capture page ---- */
.hub-cta{padding:64px 0;background:linear-gradient(180deg,#fff,var(--bg));}
.hub-cta-inner{max-width:600px;margin:0 auto;text-align:center;}
.hub-cta-inner h2{font-size:var(--step-3);margin-bottom:12px;}
.hub-cta-inner p{color:var(--muted);font-size:var(--step-0);line-height:1.55;margin-bottom:24px;}
@media(max-width:560px){.hub-cta{padding:44px 0;}}

/* =====================================================================
   /reforma/<slug> — article page (Task 6). Reading column capped near
   68 characters at the body's own font size, not a fixed pixel width —
   ch is the right unit here because it tracks the actual glyph width of
   --font-body instead of guessing a px number that only happens to work
   at one zoom level. Deliberately reveal-free above the fold: breadcrumb,
   category chip, title and date are the first thing painted, same rule
   as .hub-head and .rt-hero (a blank hero has shipped before from a
   .reveal that never got observed).
   ===================================================================== */
.artigo-wrap{max-width:68ch;}

.artigo-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:28px 0 0;font-size:var(--step--1);color:var(--muted);
}
.artigo-breadcrumb a{color:var(--muted);font-weight:600;}
.artigo-breadcrumb a:hover{color:var(--blue-dark);text-decoration:underline;}
.artigo-breadcrumb [aria-current]{color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch;}

.artigo-head{padding:18px 0 8px;}
.artigo-head h1{font-size:var(--step-4);letter-spacing:-.02em;line-height:1.15;margin:14px 0 12px;text-wrap:balance;}
.artigo-meta{color:var(--muted);font-size:var(--step--1);}

.artigo-corpo{padding:28px 0 8px;font-size:var(--step-0);line-height:1.75;color:var(--ink);}
.artigo-corpo h2{font-size:var(--step-2);margin:38px 0 14px;letter-spacing:-.01em;}
.artigo-corpo h2:first-child{margin-top:0;}
.artigo-corpo h3{font-size:var(--step-1);margin:28px 0 12px;}
.artigo-corpo p{margin:0 0 18px;}
.artigo-corpo ul{margin:0 0 18px;padding-left:1.3em;display:flex;flex-direction:column;gap:8px;}
.artigo-corpo li{line-height:1.65;}
.artigo-corpo strong{color:var(--navy);font-weight:700;}
.artigo-corpo a{color:var(--blue-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.artigo-corpo a:hover{color:var(--blue);}

/* ---- informational disclaimer: reuses the amber notice tokens that
   .incluso-ic--amber / .segmento-ic--amber already established, so a new
   "warning" hue isn't invented for a single box. ---- */
.artigo-aviso{
  display:flex;gap:14px;align-items:flex-start;
  margin:8px 0 0;padding:20px 22px;
  background:var(--amber-bg);border-radius:var(--r-md);
}
.artigo-aviso-ic{flex:none;width:22px;height:22px;color:var(--amber);margin-top:1px;}
.artigo-aviso p{color:var(--amber);font-size:var(--step--1);line-height:1.6;margin:0;}

/* ---- related articles: same card idiom as the hub grid, narrower
   section-head copy since it's introducing a slice, not the whole hub. ---- */
.artigo-relacionados{padding-top:56px;}

/* ---- 404: same centered-band shape as other single-purpose notices on
   the site, no .reveal — a missing-article page is itself the entire
   above-the-fold content. ---- */
.artigo-404{padding:96px 0;}
.artigo-404-inner{max-width:520px;margin:0 auto;text-align:center;}
.artigo-404-inner h1{font-size:var(--step-3);margin:0 0 14px;}
.artigo-404-inner p{color:var(--muted);font-size:var(--step-0);line-height:1.6;margin-bottom:26px;}

@media(max-width:560px){
  .artigo-head h1{margin-top:10px;}
  .artigo-corpo{font-size:var(--step-0);}
  .artigo-aviso{padding:16px 18px;}
  .artigo-404{padding:64px 0;}
}