/* ============================================================
   MEI → ME — Landing Page (Contabilizei)
   style.css — vanilla, sem build
   ============================================================ */

/* ----------------------------------------------------------
   RESET / BASE
---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: #2D3342;
  background: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }
::selection { background: #0E53C0; color: #fff; }

/* ----------------------------------------------------------
   TOKENS DE COR (DS Contabilizei)
---------------------------------------------------------- */
:root {
  --blue-50:  #E5F0FF;
  --blue-100: #C9E0FF;
  --blue-600: #1169F5;
  --blue-700: #0E53C0;
  --blue-800: #093CA3;
  --blue-900: #002868;
  --cyan:     #04F7F7;
  --cyan-700: #00d9d9;

  --slate-50:  #F7F9FF;
  --slate-100: #EBEFFA;
  --slate-200: #E1E6F5;
  --slate-300: #CCD4E8;
  --slate-400: #B0B9D1;
  --slate-500: #757D92;
  --slate-600: #545B6F;
  --slate-700: #3F4658;
  --slate-800: #2D3342;
  --slate-900: #202636;

  --emerald-50:  #AADFC1;
  --emerald-500: #128243;
}

/* ----------------------------------------------------------
   GRID GLOBAL — .pcon (page container) max 1200px
---------------------------------------------------------- */
.pcon {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 600px)  { .pcon { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1280px) { .pcon { padding-left: 40px; padding-right: 40px; } }

/* Espaçamento vertical padrão de seção */
.section-pad   { padding-top: 30px; padding-bottom: 30px; }
@media (min-width: 1024px) { .section-pad { padding-top: 60px; padding-bottom: 60px; } }

/* ----------------------------------------------------------
   TIPOGRAFIA FLUIDA
---------------------------------------------------------- */
.fluid-h2 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); line-height: 1.2857; letter-spacing: -0.03em; font-weight: 700; }
.fluid-h3 { font-size: clamp(1.25rem, 2vw, 1.5rem);   line-height: 1.2917; letter-spacing: -0.03em; font-weight: 700; }
.fluid-h4 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.3;  letter-spacing: -0.02em; font-weight: 700; }
.fluid-b1 { font-size: clamp(1rem, 1.5vw, 1.125rem);  line-height: 1.65; }
.fluid-hero-title {
  font-size: clamp(1.875rem, 5vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* ----------------------------------------------------------
   CTA PADRÃO — btn-cta
---------------------------------------------------------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 329px;
  max-width: 100%;
  height: 48px;
  padding: 0 24px;
  background: #04F7F7;
  color: #0E1829;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 20px rgba(4,247,247,.30);
}
.btn-cta:hover  { background: #00d9d9; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(4,247,247,.35); }
.btn-cta:active { transform: translateY(0); box-shadow: none; }
.btn-cta:focus-visible { outline: 2px solid #0E53C0; outline-offset: 3px; }

.btn-cta--interaction { background: #0E53C0; color: #fff; box-shadow: 0 4px 20px rgba(14,83,192,.25); }
.btn-cta--interaction:hover { background: #093CA3; box-shadow: 0 6px 24px rgba(14,83,192,.35); }
.btn-cta--card { width: 279px; }
.btn-cta svg { width: 16px; height: 16px; }

/* ============================================================
   ORGANISM CSS — Header + Footer (Contabilizei)
   Espelha o site oficial — não alterar classes.
   ============================================================ */
.d-none { display: none !important; }
@media (min-width: 992px) {
  .d-lg-none  { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-none.d-lg-block { display: block !important; }
}
@media (max-width: 991px) {
  .d-lg-none  { display: flex !important; }
  .d-none.d-lg-block { display: none !important; }
}

.main-header {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 1045;
  transition: all .3s ease-in-out;
  max-width: 100vw;
  box-shadow: 0 2px 12px rgba(0,40,104,.06);
}
.main-header__navbar { padding: 0; min-height: 68px; display: flex; align-items: center; width: 100%; }
.main-header__container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; flex-wrap: nowrap;
}
.main-header__navbar-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.main-header__logo-desktop, .main-header__logo-mobile { height: 22px; width: auto; }

.navbar-menu { display: none; background: transparent; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; }
.navbar-menu__icon-wrapper { position: relative; display: flex; }
.navbar-menu__icon,
.navbar-menu__icon::before,
.navbar-menu__icon::after {
  display: block; background-color: #0a2a5e; width: 30px; height: 3px;
  border-radius: 100px; transition: .3s ease-in-out;
}
.navbar-menu__icon { position: relative; margin: 8px 0; }
.navbar-menu__icon::before, .navbar-menu__icon::after { content: ''; position: absolute; width: 100%; }
.navbar-menu__icon::before { top: -8px; }
.navbar-menu__icon::after  { bottom: -8px; }
.navbar-menu:not(.collapsed) .navbar-menu__icon { transform: rotate(90deg); background-color: transparent; }
.navbar-menu:not(.collapsed) .navbar-menu__icon::before { transform: rotate(-45deg); top: 0; }
.navbar-menu:not(.collapsed) .navbar-menu__icon::after  { transform: rotate(45deg); bottom: 0; }

.navbar-collapse { display: flex; justify-content: center; align-items: center; flex: 1; }
.navbar-nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link, .dropdown-toggle-mobile {
  display: block; color: #0a2a5e; font-size: 14px; font-weight: 700; line-height: 28px;
  text-decoration: none; padding: .5rem 1.25rem; white-space: nowrap; cursor: pointer; transition: color .15s;
}
.nav-link:hover, .dropdown-toggle-mobile:hover { color: #0E53C0; }
@media (min-width: 1024px) and (max-width: 1399px) {
  .nav-link, .dropdown-toggle-mobile { padding: .5rem .5rem; }
}
.dropdown-toggle-desktop > a,
.dropdown-toggle-desktop > .dropdown-toggle-mobile { padding-right: 40px !important; position: relative; }
.dropdown-toggle-desktop::after {
  content: ''; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); position: absolute; right: 18px; top: 35%; transition: transform .3s ease-in-out;
  pointer-events: none; color: #0a2a5e;
}
.dropdown-toggle-desktop:hover::after { transform: rotate(225deg); top: 42%; }

.dropdown .dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; list-style: none; margin: 0; padding: 8px 0;
  min-width: 200px; background: #F7F9FC; border-radius: 4px; border-top: 1px solid #0033B7;
  box-shadow: 0 4px 11px 0 rgba(207,212,214,.73); z-index: 200;
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-item {
  display: block; color: #0a2a5e; font-size: 16px; line-height: 24px; text-decoration: none;
  padding: 11px 33px 11px 18px; transition: all .15s;
}
.dropdown-item:hover { background-color: #fff; color: #0E53C0; text-decoration: underline; }

.dropdown-menu-group {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; background: #F7F9FC; border-radius: 4px;
  border-top: 1px solid #0033B7; box-shadow: 0 4px 11px 0 rgba(207,212,214,.73); padding: 16px; z-index: 200; gap: 24px;
}
.dropdown:hover .dropdown-menu-group { display: flex; }
.dropdown-menu-group__group { display: flex; flex-direction: column; width: max-content; }
.dropdown-menu-group__title { padding: 0 18px 8px; color: #0E1829; font-weight: 700; font-size: 13px; line-height: 18px; }
.dropdown-menu-group ul { list-style: none; padding: 0; margin: 0; }

.main-header__cta-btn {
  display: inline-flex; align-items: center; background: #04F7F7; color: #0E1829; font-size: 14px; font-weight: 700;
  text-decoration: none; padding: 9px 22px; border-radius: 64px; white-space: nowrap; margin-left: 1rem; transition: background .15s;
}
.main-header__cta-btn:hover { background: #00d9d9; text-decoration: none; }

.main-header__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

@media (max-width: 991px) {
  .main-header { background-color: #f4f7fb; }
  .main-header__navbar { min-height: 64px; padding: 0; }
  .main-header__container { justify-content: space-between; }
  .main-header__navbar-brand { order: 1; flex: 0 0 auto; margin-right: auto; }
  .main-header__navbar-brand img { transform: none; }
  .main-header__logo-mobile { height: 33px; }   /* logo ~50% maior, alinhado à esquerda */
  .main-header__actions { display: none; }       /* esconde login/CTA desktop no mobile */
  .navbar-menu { display: block; order: 2; flex: 0 0 auto; }
  .navbar-collapse {
    display: none; flex-direction: column; align-items: flex-start; background-color: #f4f7fb;
    height: calc(100vh - 64px); left: 0; top: 64px; width: 100%; overflow-y: auto; padding: 1rem 16px;
    position: absolute; z-index: 1050;
  }
  .navbar-collapse.show { display: flex; }
  .navbar-nav { flex-direction: column; align-items: flex-start; width: 100%; }
  .navbar-nav .navbar-nav { width: 100%; }
  .nav-item { border-bottom: 1px solid rgba(158,175,199,.50); margin: 0 0 1rem; width: 100%; }
  .nav-link, .dropdown-toggle-mobile {
    color: #0E1829; font-size: 14px; padding: 0; margin: 0 0 1rem; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
  }
  .nav-link:hover, .dropdown-toggle-mobile:hover { color: #0E1829; }
  .dropdown-toggle-desktop::after { display: none; }
  .dropdown .dropdown-menu, .dropdown .dropdown-menu-group {
    display: block; position: static; background: transparent; border: none; box-shadow: none; padding: 0; margin: 0 0 .5rem;
  }
  .dropdown-menu-group__group { width: 100%; margin-bottom: 20px; }
  .dropdown-menu-group__title { padding: 0 0 8px; }
  .dropdown-item { color: #0E1829; font-size: 16px; line-height: 18px; padding: 11px 0; }
  .dropdown-item:hover { background: transparent; color: #0a2a5e; }
  .main-header__cta-btn { width: 100%; justify-content: center; margin: 0; }
}

/* FOOTER */
.organism-footer { background-color: #0a2a5e; color: #c5d3e8; font-size: 14px; padding: 56px 0 64px; }
.organism-footer a { color: #c5d3e8; text-decoration: none; transition: color .15s; }
.organism-footer a:hover { color: #fff; }
.organism-footer .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.organism-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.organism-footer__top-row { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 8px; }
.organism-footer__brand { display: flex; flex-shrink: 0; }
.organism-footer__logo img { height: 48px; width: auto; }
.organism-footer__manifest { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.45; max-width: 200px; margin: 0; }
.organism-footer__manifest .ciano { color: #04F7F7; }
.organism-footer__divider { height: 1px; background: rgba(255,255,255,.18); margin: 24px 0 20px; }
.organism-footer__social { display: flex; list-style: none; gap: 12px; padding: 0; margin: 0 0 24px; }
.organism-footer__social a {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: #0E53C0; color: #fff; transition: background .15s;
}
.organism-footer__social a svg { width: 20px; height: 20px; display: block; }
.organism-footer__social a:hover { background: #1a65d6; }
.organism-footer__ombudsman p { margin: 0 0 6px; font-size: 14px; }
.organism-footer__menu-title { color: #04F7F7; font-size: 15px; font-weight: 700; margin: 0 0 20px; }
.organism-footer__menu-list { list-style: none; padding: 0; margin: 0; }
.organism-footer__menu-list li { margin-bottom: 18px; }
.organism-footer__menu-list a { font-size: 14px; }
.footer-accordion > summary { list-style: none; cursor: default; }
.footer-accordion > summary::-webkit-details-marker { display: none; }
.footer-accordion__chevron { display: none; }
@media (min-width: 992px) {
  .footer-accordion > summary { pointer-events: none; }
  .organism-footer__badges--mobile { display: none !important; }
}
@media (max-width: 991px) { .organism-footer__badges--desktop { display: none !important; } }
.organism-footer__badges { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
.badge-ra1000 img { display: block; height: auto; max-width: 115px; }
.badge-ethics { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.badge-ethics img { display: block; width: 92px; height: auto; }
.badge-ethics__by { font-size: 9px; color: #fff; font-weight: 700; text-align: center; margin: 4px 0 0; line-height: 1.3; width: 92px; }
.organism-footer__hr { height: 1px; background: rgba(255,255,255,.15); margin: 40px 0 32px; }
.organism-footer__about { color: #8ba3c7; font-size: 14px; line-height: 1.6; margin: 0 0 32px; }
.organism-footer__legal-title { color: #6f88ad; font-size: 22px; font-weight: 700; margin: 0 0 24px; }
.organism-footer__address { margin-bottom: 20px; }
.organism-footer__city { color: #8ba3c7; font-size: 14px; font-weight: 600; margin: 0 0 4px; text-transform: uppercase; }
.organism-footer__address p { color: #6f88ad; font-size: 14px; line-height: 1.6; margin: 0 0 2px; }
.organism-footer__copyright { color: #6f88ad; font-size: 13px; margin: 32px 0 0; }
@media (max-width: 991px) {
  .organism-footer { padding: 40px 0 48px; }
  .organism-footer__top { grid-template-columns: 1fr; gap: 0; }
  .organism-footer__top-row { flex-direction: column; align-items: center; gap: 16px; }
  .organism-footer__brand { justify-content: center; }
  .organism-footer__manifest { text-align: center; max-width: 320px; margin: 0 auto; }
  .organism-footer__divider { margin: 24px auto; width: 100%; }
  .organism-footer__social { justify-content: center; }
  .organism-footer__ombudsman { text-align: center; margin-bottom: 24px; }
  .organism-footer__badges { align-items: center; margin-top: 0; margin-bottom: 24px; }
  .badge-ra1000 { display: none; }
  .badge-ethics { align-items: center; }
  .badge-ethics__by { text-align: center; }
  .footer-accordion { border-top: 1px solid rgba(255,255,255,.15); padding: 0; }
  .footer-accordion > summary {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; margin: 0; text-transform: uppercase; font-size: 15px; user-select: none;
  }
  .footer-accordion__chevron {
    display: block; width: 11px; height: 11px; border-right: 2px solid #04F7F7; border-bottom: 2px solid #04F7F7;
    transform: rotate(45deg); transition: transform .25s ease; margin-right: 4px; flex-shrink: 0;
  }
  .footer-accordion[open] .footer-accordion__chevron { transform: rotate(-135deg); }
  .footer-accordion .organism-footer__menu-list { padding: 0 0 18px; }
  .organism-footer__top .footer-accordion:last-of-type { border-bottom: 1px solid rgba(255,255,255,.15); }
  .organism-footer__legal-title { font-size: 18px; }
}

/* ============================================================
   PATCH DE CORREÇÃO — auditoria 10/08/2026
   Colar sempre no FINAL do arquivo: precisa vir depois das regras
   de .dropdown (linhas ~342-406) e do bloco mobile (~426-526).
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   HEADER — o menu que exigia "dar um salto" com o mouse

   O painel do dropdown abre em `top: calc(100% + 6px)` e a abertura
   depende de `.dropdown:hover .dropdown-menu { display: block }`.
   Esses 6px entre a base do <li> e o topo do painel não pertenciam
   a nenhum elemento hoverável: ao atravessar a faixa o :hover se
   perdia, o painel voltava a `display: none` e sumia antes de o
   mouse chegar nele.

   ATENÇÃO: as regras de .dropdown das linhas ~342-406 são GLOBAIS.
   O @media (min-width: 992px) da linha ~217 fecha na linha ~220.
   O @media abaixo NÃO é redundante — sem ele isto vaza para o menu
   mobile, onde os painéis são position:static e já nascem abertos.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 992px) {

  /* Fonte única do deslocamento: sobrescreve o `top` das duas
     regras originais para que a ponte nunca saia de sincronia com
     o vão. Para mudar o respiro visual, mexa só em --dd-gap. */
  #menu .nav-item.dropdown > .dropdown-menu,
  #menu .nav-item.dropdown > .dropdown-menu-group {
    --dd-gap: 6px;
    top: calc(100% + var(--dd-gap));
  }

  /* A ponte: faixa transparente e HOVERÁVEL que ocupa exatamente o
     vão entre a base do <li> e o topo do painel.

     A altura tem que ser igual a --dd-gap, nem 1px a mais: o painel
     tem ~800px de largura, então qualquer excedente invade a faixa
     dos <li> vizinhos e engole cliques em "Planos", "Dúvidas?" e no
     CTA "Abra sua empresa" (regressão medida com 10px).

     - `position: absolute` é obrigatório: sem isso o pseudo vira
       flex item do .dropdown-menu-group e quebra as colunas.
     - NÃO usar `pointer-events: none` — a ponte precisa receber o
       hover, é essa a função dela.
     - Os painéis precisam continuar com `overflow: visible`.
       Qualquer overflow:hidden/auto futuro recorta a ponte e o
       problema volta. */
  #menu .nav-item.dropdown > .dropdown-menu::before,
  #menu .nav-item.dropdown > .dropdown-menu-group::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--dd-gap));
    height: var(--dd-gap);
  }

  /* Abertura por teclado. Não havia nenhum :focus-within no arquivo:
     o menu era inalcançável via Tab. */
  #menu .nav-item.dropdown:focus-within > .dropdown-menu       { display: block; }
  #menu .nav-item.dropdown:focus-within > .dropdown-menu-group { display: flex; }

  /* Tira o tranco do chevron: a regra original anima `top` mas só
     declara transição para `transform`. */
  #menu .dropdown-toggle-desktop::after {
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
  }

  /* ───────────────────────────────────────────────────────────
     MEGA MENU cortado entre ~992px e ~1240px

     Os painéis de "Serviços" e "Conteúdos" têm ~800px de largura e
     estavam ancorados no próprio <li> (`left: 0` + `.nav-item
     { position: relative }`). Como o <li> de "Conteúdos" começa
     lá no meio da barra, 800px a partir dele estouram a viewport;
     com `html { overflow-x: hidden }` o excedente não vira scroll,
     ele simplesmente desaparece — a coluna "Cursos" e parte de
     "Nosso blog" ficavam inalcançáveis. Medido a 1024px: 175px
     cortados.

     Correção: os mega painéis passam a ser ancorados no container
     do header em vez do <li>. `position: static` no <li> faz o
     `absolute` do painel resolver contra o container, e `left: 0`
     alinha o painel com a borda do container (mesma guia do logo).

     Só vale para os mega painéis (.dropdown--mega). O dropdown
     simples do "Login" continua ancorado no próprio item, senão
     ele saltaria para a esquerda da barra.
     ─────────────────────────────────────────────────────────── */
  #menu .main-header__container { position: relative; }

  #menu .nav-item.dropdown--mega { position: static; }

  #menu .nav-item.dropdown--mega > .dropdown-menu-group {
    left: 0;
    right: auto;
    /* Alinha a borda do painel com o conteúdo do container (mesma guia do
       logo), compensando o padding lateral dele.

       ATENÇÃO ao fallback do var(): a token --s5 existe no CSS da
       calculadora-mei (20px), mas NÃO existe no do nfs-e nem no do
       simulador — essas duas usam padding fixo de 24px aqui e 40px a
       partir de 1280px. Sem o fallback, `var(--s5)` fica inválido nessas
       páginas, o `margin-left` é descartado e o painel volta a estourar a
       viewport (medido: 65px cortados no nfs-e). O segundo argumento do
       var() é o que garante que a regra valha nas três. */
    margin-left: var(--s5, 24px);
    max-width: calc(100% - 2 * var(--s5, 24px));
  }
}

@media (min-width: 1280px) {
  /* nfs-e e simulador aumentam o padding do container para 40px aqui */
  #menu .nav-item.dropdown--mega > .dropdown-menu-group {
    margin-left: var(--s5, 40px);
    max-width: calc(100% - 2 * var(--s5, 40px));
  }
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — estilos dos links novos do rodapé canônico
   (endereços com link para o Google Maps, selos clicáveis e a
   linha "File for LLMs")
   ───────────────────────────────────────────────────────────── */
.organism-footer__address a { color: inherit; text-decoration: none; }
.organism-footer__address a:hover { color: #fff; text-decoration: underline; }
.organism-footer__copyright a { color: #6f88ad; text-decoration: underline; }
.organism-footer__copyright a:hover { color: #fff; }
.badge-ethics__by a { color: inherit; text-decoration: none; }
.badge-ethics__by a:hover { text-decoration: underline; }
.badge-ra1000 a,
.badge-ethics > a { display: block; }

/* ============================================================
   PÁGINA — Jornada Contabilizei × Ju
   3 dobras em bandas de azul (navy → azul-50 → azul-700)

   Referência de composição: layout editorial de "bandas de cor"
   com cards atravessando a emenda entre dobras. Traduzido 100%
   para os tokens do DS: nenhuma cor fora da paleta oficial e
   tipografia única em Inter.
   ============================================================ */

/* ----------------------------------------------------------
   TOKENS DESTA PÁGINA — nomes oficiais do DS (tokens.md)

   O `exemplo/style.css` herdou variáveis com nomenclatura de
   Tailwind (`--slate-*`, `--emerald-*`) que estão catalogadas
   como desvio e não devem ser replicadas em blocos novos. Os
   blocos desta página usam os nomes semânticos oficiais — os
   hexadecimais são exatamente os da paleta do DS.
---------------------------------------------------------- */
:root {
  --text-title:   #2D3342;   /* Texto título */
  --text-body:    #3F4658;   /* Texto corpo */
  --text-caption: #545B6F;   /* Texto caption */
  --neutral-300:  #CCD4E8;   /* Cinzas 300 — bordas */
  --neutral-400:  #B0B9D1;   /* Cinzas 400 — placeholder */
  --neutral-500:  #757D92;   /* Cinzas 500 — secundário */
  --success-100:  #AADFC1;   /* Sucesso 100 */
  --success-500:  #128243;   /* Sucesso 500 */
  --error-500:    #DF1642;   /* Erro 500 */
}


/* O atributo `hidden` do HTML vem do stylesheet do navegador e
   perde para qualquer regra de classe com `display` (o form usa
   `display:flex`, então `form.hidden = true` não escondia nada na
   tela de sucesso). Este reset garante que `hidden` sempre vença. */
[hidden] { display: none !important; }

/* ----------------------------------------------------------
   ALINHAMENTO DE GRID — header/footer no MESMO grid do conteúdo

   Os containers oficiais de header e footer têm padding fixo de
   16px, enquanto o .pcon do conteúdo escala 16 → 24 → 40. Sem
   este patch o logo do header e o rodapé ficam desalinhados do
   conteúdo em ≥600px (8px) e em ≥1280px (24px). Só o padding é
   ajustado — nenhuma classe oficial é reescrita.
---------------------------------------------------------- */
/* --s5 declarado aqui de propósito: o patch do mega menu usa
   `margin-left: var(--s5, …)` para alinhar o painel com a borda do
   container. Declarando o token no próprio container, o painel passa
   a acompanhar o padding automaticamente em cada breakpoint, em vez
   de depender do fallback. */
.main-header__container,
.organism-footer .container { --s5: 16px; }

@media (min-width: 600px) {
  .main-header__container,
  .organism-footer .container { --s5: 24px; padding-left: 24px; padding-right: 24px; }
}

/* ⚠️ BUG DO HEADER OFICIAL — scroll horizontal entre 992px e ~1040px
   (reproduzido também no `exemplo/` canônico, não é desta página).

   CAUSA RAIZ: o nav desktop aparece em `min-width: 992px` (regra
   `.d-lg-*`), mas a mitigação de padding dos links existe só a
   partir de 1024px:
       @media (min-width:1024px) and (max-width:1399px) {
         .nav-link, .dropdown-toggle-mobile { padding: .5rem .5rem; }
       }
   Ou seja: em 992–1023px os 5 itens do nav mantêm `padding: .5rem
   1.25rem` (20px de cada lado) e o conjunto logo + nav + Login +
   CTA passa da largura disponível. O excedente vaza porque o
   `.main-header__container` não tem `overflow` — vira scroll
   horizontal na página inteira. Medido com fonte de fallback:
   +149px a 992px e +9px a 1024px.

   CORREÇÃO: estender a própria mitigação do DS para onde o nav
   desktop realmente começa (992px) e apertar o respiro do chevron
   e o gap do container nessa faixa. Nenhuma classe oficial é
   reescrita — só valores de espaçamento dentro da faixa.

   → Vale para toda a esteira: sugiro levar para `ds-referencia.md`
     como bug nº 5 do header. */
@media (min-width: 992px) and (max-width: 1023px) {
  .nav-link, .dropdown-toggle-mobile { padding: .5rem .5rem; }
}
@media (min-width: 992px) and (max-width: 1079px) {
  .main-header__container { gap: 8px; }
  #menu .dropdown-toggle-desktop > a,
  #menu .dropdown-toggle-desktop > .dropdown-toggle-mobile { padding-right: 28px !important; }
  #menu .dropdown-toggle-desktop::after { right: 10px; }
}

/* ⚠️ FAIXA 992–1079px — EXCEÇÃO MEDIDA, não mexer sem re-testar.
   Entre 992px (onde o nav desktop aparece) e ~1079px, o header
   oficial não tem folga para 24px de padding: medido a 1024px, o
   CTA "Abra sua empresa" estoura 17px além da viewport e cria
   scroll horizontal. Nessa faixa o header volta ao padding de
   16px do componente oficial. O rodapé não tem esse aperto e
   continua alinhado com o conteúdo. */
@media (min-width: 992px) and (max-width: 1079px) {
  .main-header__container { --s5: 16px; padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 1280px) {
  .main-header__container,
  .organism-footer .container { --s5: 40px; padding-left: 40px; padding-right: 40px; }
}

/* Sombra do header ao rolar (microinteração de acabamento) */
.main-header { transition: box-shadow .2s ease; }
.main-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,40,104,.14); }

/* ----------------------------------------------------------
   DISPLAY — Inter 800 comprimida ao máximo que a fonte permite

   A referência usa uma condensada ultra-bold. Inter não condensa,
   então o volume vem de: tamanho em vw + tracking negativo forte
   + entrelinha abaixo de 1. É o limite honesto do DS.
---------------------------------------------------------- */
.display {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}
/* AJUSTE DE ESCALA (rev. 2) — o gargalo do tamanho não era a fonte,
   era a quebra de linha. Com 23-24 caracteres por linha a Inter não
   passava de 72px por geometria (a linha já ocupava 98% do container).
   Reescrita em 5 linhas de ~9-15 caracteres, o mesmo texto sobe para
   ~100px: cap height de 52px → 73px.

   O teto de 6.5rem é deliberado, não arbitrário: a linha mais longa
   ("NÃO DEVERIA SER", 15 caracteres) precisa caber em 1120px mesmo
   se a Inter não carregar e o navegador cair numa fonte de fallback
   mais larga. Medido no pior caso (fallback): 94% de ocupação da
   linha. Subir mais do que isso quebra a linha quando a fonte falha.

   O outro limite é a dobra: o CTA do hero tem que ficar acima de
   900px de viewport. Na rev.2 o teto por esse critério era 6.8vw;
   com a microcopy removida e o título a -10% sobra folga. Se um dia
   valer trocar "CTA na primeira tela" por mais volume tipográfico, o
   número a mexer é o vw daqui. */
.display--hero {
  /* -10% em relação à rev.2, por pedido: em 1440px o corpo sai de
     98px para 88px (= o teto de 5.5rem).

     O vw subiu de 6.8 para 7.5 justamente para o teto entrar mais
     cedo. Motivo medido: o `vw` cresce sem parar mas o container
     trava em 1200px, então com o coeficiente antigo a linha ocupava
     62% do container em 1024px e 85% em 1920px — a headline parecia
     bem mais fraca em notebook do que em monitor grande. Com
     7.5vw + teto de 5.5rem a ocupação fica constante em ~75-78% de
     600px para cima, e o valor de 1440px é exatamente o -10% pedido.

     O piso de 2rem é o corpo do mobile: com as quebras manuais ativas
     a linha mais longa ("NÃO DEVERIA SER") ocupa 94% de 360px e 89%
     de 375px na fonte de fallback — ou seja, sobra folga mesmo se a
     Inter não carregar. Com 2.125rem batia 100% em 360px, sem margem
     de erro nenhuma. */
  font-size: clamp(2rem, 7.5vw, 5.5rem);
  text-transform: uppercase;
}
/* Abaixo de 360px nem 2rem cabe: a linha refluiria e as 5 linhas
   viravam 8. Passo extra só para essa faixa. */
@media (max-width: 359px) { .display--hero { font-size: 1.75rem; } }

/* Faísca inline dentro da headline — o adesivo como pontuação, no
   papel que na referência era da estrela amarela. Fica na primeira
   linha, que é a mais curta, ocupando o vazio à direita. */
.spark {
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .12em;
  vertical-align: .34em;
  transform: rotate(-8deg);
  fill: var(--cyan, #04F7F7);
}
.display--h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.display--on-dark {
  text-transform: none;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.display__accent      { color: var(--cyan, #04F7F7); }
.display__accent-blue { color: var(--blue-700, #0E53C0); }

/* AJUSTE — quebras manuais agora valem em TODAS as larguras.

   Na rev.2 o <br> era desligado abaixo de 768px e a linha refluía
   sozinha: no mobile o texto caía no piso do clamp (28px) porque a
   linha "cheia" já consumia toda a largura. Com as mesmas 5 quebras
   do desktop, a linha mais longa no mobile passa a ser "NÃO DEVERIA
   SER" (15 caracteres) em vez de ~20, o que libera piso maior —
   34px, +21% de corpo no mobile. É de onde vem o "mesmo efeito"
   pedido: o ganho vem da quebra, não do font-size sozinho.

   ⚠️ O pedido falava em 4 linhas. Medido: 4 linhas obrigam a linha
   mais longa a 19 caracteres e travam o corpo em ~29px; 5 linhas
   (as mesmas do desktop) chegam a 34px. Como o pedido priorizava o
   EFEITO de corpo maior, fiquei com 5. Para forçar 4 linhas, é
   trocar os <br> do h1 e baixar o piso do clamp para 1.8125rem. */
.display br { display: inline; }

.emoji {
  font-weight: 400;
  letter-spacing: 0;
  font-size: .8em;
  white-space: nowrap;
}

/* Eyebrow — pílula translúcida (idioma do DS no escuro) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-700, #0E53C0);
}
.eyebrow--dark {
  color: var(--cyan, #04F7F7);
  background: rgba(4,247,247,.10);
  border: 1px solid rgba(4,247,247,.35);
  border-radius: 9999px;
  padding: 6px 14px;
}

/* ============================================================
   DOBRA 1 — HERO (banda navy #002868)
   ============================================================ */
.d1 {
  background: var(--blue-900, #002868);
  position: relative;
  overflow: hidden;
}
/* Halo sutil de profundidade — sem canvas, sem JS, sem peso */
.d1::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(4,247,247,.16) 0%, rgba(4,247,247,0) 62%);
  pointer-events: none;
}
.d1__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 96px;
  padding-bottom: 104px;
}
@media (min-width: 1024px) {
  /* padding-top menor que a versão anterior (168px): a headline em 5
     linhas a ~105px cresceu ~250px de altura e o CTA tem que continuar
     acima da dobra num viewport de 900px (medido: 1440×900 ok). */
  .d1__inner { padding-top: 84px; padding-bottom: 148px; }
}
.d1 h1 { color: #fff; max-width: 20ch; }
@media (min-width: 1024px) { .d1 h1 { max-width: none; } }

.d1__sub {
  /* +10% sobre o .fluid-b1 do DS — clamp(1rem, 1.5vw, 1.125rem).
     Escrito por extenso em vez de sobrescrever a classe do DS, para
     não afetar os outros parágrafos da página. */
  font-size: clamp(1.1rem, 1.65vw, 1.2375rem);
  color: var(--blue-100, #C9E0FF);
  max-width: 46ch;
  margin-top: 0;
}
.d1__sub strong { color: var(--cyan, #04F7F7); font-weight: 700; }

.d1__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  width: 100%;
}
@media (min-width: 600px) { .d1__actions { width: auto; } }
.d1__actions .btn-cta { width: 100%; }
@media (min-width: 600px) { .d1__actions .btn-cta { width: 329px; } }

/* ============================================================
   DOBRA 2 — HISTÓRIA (banda azul-50 #E5F0FF)
   A polaroid atravessa a emenda navy → azul-50.
   ============================================================ */
.d2 {
  background: var(--blue-50, #E5F0FF);
  padding-bottom: 40px;
}
@media (min-width: 1024px) { .d2 { padding-bottom: 148px; } }

.d2__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: 0;
}
@media (min-width: 1024px) {
  .d2__grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: start;
    padding-top: 72px;
  }
}
.d2__text { display: flex; flex-direction: column; gap: 20px; }
.d2 h2 { color: var(--blue-900, #002868); }
.d2__lead { color: var(--text-body, #3F4658); max-width: 54ch; }
.d2__body { color: var(--text-caption, #545B6F); max-width: 54ch; }

/* No mobile a polaroid vem primeiro e também atravessa a emenda */
/* SOBREPOSIÇÃO IMAGEM × TEXTO (rev. 2) — antes a polaroid só invadia o
   padding vazio do hero (-196px). Agora ela sobe até cruzar a faixa da
   headline, como o card da About da Ref A, que passa por cima do texto.
   O valor é calibrado para a foto tangenciar o fim das linhas curtas sem
   cobrir glifo (as linhas são alinhadas à esquerda e a direita fica
   livre). Medido: 0 colisão com as caixas de linha do h1. */
.d2__media {
  order: -1;
  display: flex;
  justify-content: center;
  margin-top: -72px;
}
@media (min-width: 1024px) {
  .d2__media { order: 0; justify-content: flex-end; margin-top: -352px; position: relative; z-index: 3; }
}

/* ---- Polaroid ---------------------------------------------
   Moldura branca com margem inferior grossa, rotação leve e
   sombra. Cantos quase retos de propósito: contrasta com o
   raio suave dos cards do DS e é o que dá a leitura de "foto".
---------------------------------------------------------- */
.polaroid {
  position: relative;
  width: clamp(240px, 74vw, 380px);
  perspective: 900px;
}
.polaroid__frame {
  background: #fff;
  padding: 14px 14px 0;
  border-radius: 6px;
  box-shadow: 0 20px 48px rgba(0,40,104,.24), 0 2px 6px rgba(0,40,104,.10);
  transform: rotate(-3deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  will-change: transform;
}
.polaroid:hover .polaroid__frame { box-shadow: 0 28px 60px rgba(0,40,104,.30), 0 2px 6px rgba(0,40,104,.12); }
.polaroid__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: var(--blue-100, #C9E0FF);
}
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid__caption {
  padding: 16px 6px 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-500, #757D92);
}

/* ---- Chips flutuantes (prova/contexto colados na foto) ---- */
.chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,40,104,.18);
}
.chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.chip--top {
  top: 26px; right: -14px;
  background: #fff;
  color: var(--blue-700, #0E53C0);
  transform: rotate(4deg);
}
.chip--bottom {
  bottom: 74px; left: -16px;
  background: var(--cyan, #04F7F7);
  color: #0E1829;
  transform: rotate(-4deg);
}
@media (min-width: 1024px) {
  .chip--top { right: -22px; }
  .chip--bottom { left: -26px; }
}

/* ---- Card de notificação flutuante (colagem, rev. 2) -------
   Terceiro elemento da colagem, no papel do card branco de
   "notificação" da referência. O conteúdo sai da própria copy da
   dobra 2 ("do controle das contas pessoais à estrutura para
   profissionalizar a carreira como PJ") — nada inventado.
   `aria-hidden`: é reforço visual do texto que já está do lado.
---------------------------------------------------------- */
.note {
  position: absolute;
  z-index: 2;
  right: -8px;
  bottom: 62px;              /* sobre a FOTO, não sobre a legenda:
                                a -10px o card cobria "…da jornada" */
  width: 150px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,40,104,.22);
  transform: rotate(3deg);
}
/* offset do adesivo é responsivo: em 992–1079px o container do
   conteúdo só tem 16-24px de padding lateral, então um -34px vaza da
   viewport e cria scroll horizontal (medido: +12px a 1024). O respiro
   maior entra só quando há folga (idem para o selo). */
@media (min-width: 600px)  { .note { width: 168px; } }
/* -34px só a partir de 1280px: entre 1080 e 1279 o container já está
   no teto de 1200px sem margem sobrando, e o adesivo vaza da viewport
   (medido: +12px a 1080). */
@media (min-width: 1280px) { .note { right: -34px; } }
.note__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-500, #757D92);
  margin-bottom: 8px;
}
.note__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body, #3F4658);
}
.note__row + .note__row { margin-top: 7px; }
.note__row--done { color: var(--blue-900, #002868); }
.note__dot {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 9999px;
  background: var(--cyan, #04F7F7);
  color: var(--blue-900, #002868);
}
.note__dot svg { width: 10px; height: 10px; }
.note__dot--open {
  background: transparent;
  border: 2px solid var(--neutral-300, #CCD4E8);
}

/* ---- Selo serrilhado (rev. 2) ------------------------------
   Adesivo estourando o canto do card do formulário — o movimento
   da referência, em que a estrela amarela nasce metade fora do
   card. Aqui em ciano, o único acento da página.
---------------------------------------------------------- */
.seal {
  position: absolute;
  top: -20px;
  right: -10px;
  width: 64px;
  height: 64px;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 14px rgba(0,40,104,.20));
}
.seal__body { fill: var(--cyan, #04F7F7); }
.seal__mark { fill: var(--blue-900, #002868); }
@media (min-width: 600px)  { .seal { width: 76px; height: 76px; top: -24px; right: -10px; } }
/* mesmo motivo do .note: entre 1080 e 1279 o container está no teto de
   1200px e não há margem lateral sobrando (medido: +5px a 1150). */
@media (min-width: 1280px) { .seal { top: -26px; right: -22px; } }

/* ============================================================
   DOBRA 3 — CAPTURA (banda azul-700 #0E53C0)
   O card branco do form atravessa a emenda azul-50 → azul-700.
   ============================================================ */
.d3 {
  background: var(--blue-700, #0E53C0);
  padding-bottom: 48px;
}
@media (min-width: 1024px) { .d3 { padding-bottom: 88px; } }

.d3__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .d3__grid {
    grid-template-columns: 6fr 6fr;
    gap: 56px;
    align-items: start;
    padding-top: 0;
  }
}
.d3__text { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .d3__text { padding-top: 104px; } }

/* MONO-HUE (rev. 2) — antes a headline era branco puro, o que fazia o
   ciano do destaque competir com o texto base. Agora o texto base recua
   para Azul 100 sobre Azul 700 (mesma matiz, valores diferentes) e o
   ciano fica como único ponto de luz máxima — é o movimento da
   referência (azul sobre azul-claro, verde sobre verde).
   Contraste: #C9E0FF sobre #0E53C0 = 5.4:1 (AA folgado para display). */
.d3 h2 { color: var(--blue-100, #C9E0FF); max-width: 22ch; }
.d3__sub { color: var(--blue-50, #E5F0FF); max-width: 44ch; }

.d3__card-wrap { display: flex; justify-content: center; }
@media (min-width: 1024px) { .d3__card-wrap { justify-content: flex-end; margin-top: -104px; } }

/* ---- Card do formulário ---- */
.fcard {
  position: relative;         /* âncora do selo */
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 56px rgba(0,40,104,.28);
}
@media (min-width: 600px) { .fcard { padding: 32px; } }
.fcard__title { color: var(--blue-900, #002868); }
.fcard__hint { margin-top: 6px; font-size: 14px; color: var(--neutral-500, #757D92); }
.fcard form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--text-body, #3F4658); transition: color .15s ease; }
.field:focus-within .field__label { color: var(--blue-700, #0E53C0); }
.field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 16px;               /* 16px evita o zoom automático no iOS */
  color: var(--text-title, #2D3342);
  background: #fff;
  border: 1px solid var(--neutral-300, #CCD4E8);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: var(--neutral-400, #B0B9D1); }
.field__input:focus {
  border-color: var(--blue-700, #0E53C0);
  box-shadow: 0 0 0 3px rgba(14,83,192,.16);
}
.field__input.has-error { border-color: var(--error-500, #DF1642); }
.field__input.has-error:focus { box-shadow: 0 0 0 3px rgba(223,22,66,.16); }
.field__error { font-size: 13px; color: var(--error-500, #DF1642); }

/* Select: chevron próprio (sem Font Awesome, sem dependência) */
.field__select-wrap { position: relative; }
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.field__select:invalid { color: var(--neutral-400, #B0B9D1); }
.field__select-wrap::after {
  content: '';
  position: absolute;
  right: 16px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--neutral-500, #757D92);
  border-bottom: 2px solid var(--neutral-500, #757D92);
  transform: rotate(45deg);
  pointer-events: none;
}

.fcard__submit { width: 100%; margin-top: 2px; }
.fcard__legal { font-size: 12px; line-height: 1.5; color: var(--neutral-500, #757D92); }
.fcard__legal a { color: var(--blue-700, #0E53C0); text-decoration: underline; }

.fcard__success { text-align: center; padding: 8px 0 4px; }
.fcard__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 9999px;
  background: var(--success-100, #AADFC1);
  color: var(--success-500, #128243);
}
.fcard__success-icon svg { width: 26px; height: 26px; }
.fcard__success h3 { color: var(--blue-900, #002868); }
.fcard__success p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-caption, #545B6F); }

/* ============================================================
   REVEAL ON SCROLL — só entra em ação quando o JS confirma
   suporte (html.js-reveal). Sem JS, tudo nasce visível.
   ============================================================ */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.js-reveal .reveal:nth-child(2).is-in { transition-delay: .07s; }
.js-reveal .reveal:nth-child(3).is-in { transition-delay: .14s; }
.js-reveal .reveal:nth-child(4).is-in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .polaroid__frame { transition: none; }
  html { scroll-behavior: auto; }
}