:root{
  --bg: #fbfaf8;
  --text: #141414;
  --muted: rgba(20,20,20,.62);
  --line: rgba(20,20,20,.12);
  --shadow: 0 18px 45px rgba(0,0,0,.08);
  --radius: 22px;
  --container: 1120px;
  --accent: #800000;
  --accent-soft: rgba(128,0,0,.10);
  --wa: #25D366;
  --dot: rgba(20,20,20,.07);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto;}

.skip{position:absolute; left:-999px; top:12px; padding:10px 14px; background:#000; color:#fff; border-radius:999px; z-index:9999;}
.skip:focus{left:16px}

.header{position:sticky; top:0; z-index:50; background: rgba(251,250,248,.82); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}

.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand__mark{width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, var(--accent) 0%, rgba(128,0,0,.55) 100%); box-shadow: 0 10px 20px rgba(128,0,0,.18);}
.brand__name{letter-spacing:-.2px}
.brand__logo{height:34px; width:auto; max-width:220px; display:block}

.nav{display:none; gap:18px; align-items:center}
.nav__slot{display: contents;}

.nav__link{font-weight:600; font-size:14px; color: rgba(20,20,20,.78)}
.nav__link--active{color: var(--text); text-decoration:underline}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid var(--line); background: transparent; font-weight:700; font-size:14px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;}
.btn:focus{outline: 3px solid rgba(128,0,0,.28); outline-offset:3px}
.btn:hover{transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,.06)}
.btn--primary{background:#111; border-color:#111; color:#fff;}
.btn--primary:hover{background:#0b0b0b}
.btn--ghost{background: rgba(255,255,255,.8);}
.btn--light{background: rgba(255,255,255,.9);}

.hero{padding: 62px 0 28px;}
.hero__inner{max-width: 920px; text-align:center;}
.pill-row{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.pill{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid var(--line); background: rgba(255,255,255,.7);}
.pill--accent{color: var(--accent); background: var(--accent-soft); border-color: rgba(128,0,0,.22);}
.pill--ghost{color: rgba(20,20,20,.72)}

.hero__title{font-size: clamp(40px, 6vw, 74px); line-height:.98; margin: 0 0 18px; letter-spacing:-1.2px;}
.accent{color: var(--accent)}
.hero__subtitle{margin: 0 auto 22px; max-width: 760px; font-size: 18px; color: var(--muted);}
.hero__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top: 10px}
.hero__meta{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top: 26px;}
.meta{background: rgba(255,255,255,.75); border:1px solid var(--line); border-radius: 999px; padding: 10px 14px;}
.meta__kpi{font-weight:800; font-size:14px}
.meta__txt{font-size:13px; color: var(--muted)}

.section{padding: 72px 0}
.section--soft{background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.section--tight{padding: 56px 0}
.section__head{text-align:center; max-width: 860px; margin: 0 auto 26px}
.section__head h2{margin:0 0 10px; font-size: clamp(26px, 3.4vw, 40px); letter-spacing:-.6px}
.section__head p{margin:0; color: var(--muted)}

.cards{display:grid; gap: 14px; margin-top: 28px;}
.card{background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);}
.card__icon{width:42px; height:42px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: var(--accent-soft); color: var(--accent); font-weight:900; margin-bottom: 14px;}
.card h3{margin:0 0 6px; font-size: 18px}
.card p{margin:0; color: var(--muted)}

.cta-strip{margin-top: 22px; display:flex; gap: 14px; align-items:center; justify-content:space-between; flex-wrap:wrap; background: rgba(255,255,255,.84); border:1px solid var(--line); border-radius: var(--radius); padding: 18px;}
.cta-strip__text{display:flex; flex-direction:column; gap:2px}
.cta-strip__text span{color: var(--muted); font-size:14px}

.steps{list-style:none; margin: 30px 0 0; padding:0; display:grid; gap: 12px}
.step{display:flex; gap: 14px; align-items:flex-start; background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);}
.step__num{width:34px; height:34px; border-radius: 999px; display:flex; align-items:center; justify-content:center; background: #111; color:#fff; font-weight:800;}
.step__body h3{margin: 2px 0 4px; font-size: 17px}
.step__body p{margin:0; color: var(--muted)}

.compare{margin-top: 18px; display:grid; gap: 14px;}
.compare__col{background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);}
.compare__col--good{border-color: rgba(128,0,0,.24); box-shadow: 0 18px 45px rgba(128,0,0,.10);}
.compare h3{margin:0 0 10px}
.compare ul{margin:0; padding-left: 18px; color: var(--muted); display:grid; gap: 6px}

.center{display:flex; justify-content:center; margin-top: 18px}

.slider{position:relative; margin-top: 26px;}
.slider__track{display:flex; gap: 14px; overflow:hidden; scroll-behavior:smooth;}
.quote{min-width: 100%; background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);}
.quote p{margin:0 0 14px; color: rgba(20,20,20,.78); font-size:16px}
.quote__who{display:flex; flex-direction:column; gap:2px}
.quote__who span{color: var(--muted); font-size:14px}

.slider__btn{position:absolute; top:50%; transform: translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.92); box-shadow: var(--shadow); cursor:pointer;}
.slider__btn--prev{left: -10px}
.slider__btn--next{right: -10px}
.slider__dots{display:flex; gap:8px; justify-content:center; margin-top: 10px}
.dot{width: 26px; height: 6px; border-radius: 999px; background: rgba(20,20,20,.16); border:none; cursor:pointer;}
.dot--active{background: var(--accent)}

.faq{display:grid; gap: 10px; margin-top: 26px}
.faq__item{background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow);}
.faq__item summary{cursor:pointer; font-weight:800}
.faq__content{color: var(--muted); margin-top: 10px}

.cta-final{margin-top: 30px; text-align:center; background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: var(--radius); padding: 28px 18px; box-shadow: var(--shadow);}
.cta-final h2{margin:0 0 10px}
.cta-final p{margin:0 0 14px; color: var(--muted)}

.footer{padding: 48px 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.65);}
.footer__inner{display:grid; gap: 24px;}
.footer__col{display:flex; flex-direction:column; gap:10px}
.footer__col strong{font-weight:800}
.footer__col a{color: rgba(20,20,20,.78)}
.footer__brand p{margin:8px 0 0}
.footer__bottom{margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line)}

.tiny{font-size: 12px}
.muted{color: var(--muted)}

.wa-float{position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 999px; background: var(--wa); color:#fff; box-shadow: 0 18px 40px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; z-index: 60;}
.wa-float__text{display:none}
.wa-float__icon{width: 100%; height: 100%; background: url("../img/whatsapp.png") center/100% 100% no-repeat; border-radius: 999px;}

.h1{font-size: clamp(34px, 4.6vw, 52px); letter-spacing:-.8px; margin:0 0 10px}

.about-hero{padding-top: 54px}
.about-grid{display:grid; gap: 14px; margin-top: 18px}
.about-card{background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);}
.about-card ul{margin: 10px 0 0; padding-left: 18px; color: var(--muted); display:grid; gap:6px}

.team{margin-top: 24px}
.team-grid{display:grid; gap: 12px; margin-top: 14px}
.person{display:flex; gap: 14px; align-items:flex-start; background: rgba(255,255,255,.82); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);}
.avatar{width: 74px; height: 74px; border-radius: 18px; background: rgba(20,20,20,.06); border: 1px dashed rgba(20,20,20,.18); display:flex; align-items:center; justify-content:center; font-weight:800; color: rgba(20,20,20,.55);}
.person__body h3{margin: 2px 0 6px; font-size: 16px}
.person__body p{margin:0; color: var(--muted)}

@media (min-width: 768px){
  .nav{display:flex}
  .cards{grid-template-columns: repeat(3, 1fr)}
  .compare{grid-template-columns: 1fr 1fr}
  .quote{min-width: calc(50% - 7px)}
  .about-grid{grid-template-columns: 1fr 1fr}
  .team-grid{grid-template-columns: 1fr 1fr}
}
@media (min-width: 1024px){
  .quote{min-width: calc(33.333% - 9.33px)}
}


.card__icon img{width: 28px; height: 28px; object-fit: contain; display:block;}


/* WhatsApp green buttons (v3.1) */
.btn--wa{background: var(--wa); border-color: var(--wa); color:#fff;}
.btn--wa:hover{filter: brightness(0.95);}

.brand__logo--footer{height:34px; width:auto; max-width:220px; display:block}

/* ===== Microinterações (desktop hover) ===== */
@media (hover: hover) and (pointer: fine) {
  .card, .quote, .step, .faq__item, .slider__btn {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    will-change: transform;
  }

  .card:hover, .quote:hover, .step:hover, .faq__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(0,0,0,.10);
    border-color: rgba(128,0,0,.22);
    background-color: rgba(128,0,0,.03);
  }

  .slider__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }
}

/* ===== Foco em formulários ===== */
input, textarea, select {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
  color: var(--text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: rgba(255,255,255,.92);
}

/* Wrapper opcional: destacar o bloco inteiro do campo */
.field {
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: border-color .16s ease, background-color .16s ease;
}
.field:focus-within {
  border-color: rgba(128,0,0,.25);
  background: rgba(128,0,0,.04);
}

.page-buscarcnae .field{display:block;}

/* ===== Scroll reveal (subir suavemente ao entrar em view) ===== */
[data-animate="up"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}

[data-animate="up"].in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate="up"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.footer__slot{display: contents;}


/* ===== CLT x PJ – valores subtraendos ===== */
.page-clt-pj .value--minus{color:var(--danger);}


/* ===== Página: Buscar CNAE (escopo) ===== */
.page-buscarcnae .section{padding:36px 0;}
.page-buscarcnae .buscarcnae-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; align-items:center;}
.page-buscarcnae .buscarcnae-results{margin-top:16px;}
.page-buscarcnae .buscarcnae-help{display:grid; gap:12px; margin-top:16px;}
@media (min-width:768px){
  .page-buscarcnae .buscarcnae-help{grid-template-columns:1fr 1fr 1fr;}
}

/* ===== Página: CLT x PJ (escopo) ===== */
.page-clt-pj .cltpj-grid{display:grid; gap:16px;}
@media (min-width:1024px){
  .page-clt-pj .cltpj-grid{grid-template-columns: 1fr 1.25fr; align-items:start;}
}
.page-clt-pj .cltpj-grid-2{display:grid; gap:12px; margin-top:12px;}
@media (min-width:768px){
  .page-clt-pj .cltpj-grid-2{grid-template-columns:1fr 1fr;}
}
.page-clt-pj .cltpj-checks{display:grid; gap:10px; margin-top:12px;}
.page-clt-pj .check{display:flex; gap:10px; align-items:flex-start;}
.page-clt-pj .check input{margin-top:3px;}
.page-clt-pj .cltpj-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:14px;}
.page-clt-pj .cltpj-result-grid{display:grid; gap:12px; margin-top:12px;}
@media (min-width:768px){
  .page-clt-pj .cltpj-result-grid{grid-template-columns:1fr 1fr;}
}
.page-clt-pj .cltpj-panel{padding:0;}
.page-clt-pj .kv{list-style:none; padding:0; margin:0;}
.page-clt-pj .kv li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.page-clt-pj .kv li:last-child{border-bottom:0;}
.page-clt-pj .kv .k{color:var(--muted);}
.page-clt-pj .kv .v{font-weight:700;}
.page-clt-pj .divider{height:1px; background:var(--line); margin:16px 0;}
.page-clt-pj .notice{margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface);}

/* subtraendos em vermelho (já existente no pack v3.1.5; mantido) */

.page-buscarcnae .notice{margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface);}


/* ===== Ajustes de disposição (ref. layouts legados) ===== */
.page-clt-pj .cltpj-grid{gap:14px;}
@media (min-width:1024px){
  .page-clt-pj .cltpj-grid{grid-template-columns:1fr 1fr;}
}
.page-clt-pj .cltpj-checks{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;}
.page-clt-pj .check{align-items:center;}
.page-clt-pj .check input{margin-top:0;}

.page-buscarcnae .cnae-inline{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.page-buscarcnae .cnae-inline input{flex:1 1 260px;}
.page-buscarcnae #status:empty{display:none;}


/* ===== CLT x PJ – bullets e FAQ CTA (layout legado) ===== */
.page-clt-pj .cltpj-premissas{margin-top:12px;}
.page-clt-pj .cltpj-bullets{margin:0; padding-left:18px;}
.page-clt-pj .cltpj-bullets li{margin:8px 0; color:var(--muted);}
.page-clt-pj .cltpj-faq-cta{margin-top:14px;}


/* ===== v3.2.6 – CLT x PJ: reduzir espaçamento entre seções + remover CTAs duplicados ===== */
.page-clt-pj .section{padding:36px 0;}