/* Gabriel Andrade — site comercial e painel antigo.

   Visual trocado em 05/11/2026, a pedido do Gabriel, pelo do modelo
   Framer que ele trouxe ("Quiver"): títulos serifados com a segunda
   linha em itálico colorido, rótulos em mono com um quadradinho
   ("■ 03 · PLANOS"), botões em pílula com a seta num círculo, seções
   que alternam escuro e creme, a planta baixa no método, perguntas com
   filtro e o título gigante no fim. Do modelo NÃO vieram: o livro dos
   cases ("ele não gostou") e os robôs — no lugar, desenhos dos objetos
   que o sistema resolve (nota, caixa, maquininha, planilha, cabo).
   A cor de destaque era o verde dele; no mesmo dia ele pediu o laranja
   do modelo (#FF5A36), "assim como o modelo do site".

   PALETA AZUL (11/11/2026, escolhida pelo Gabriel numa prévia completa):
   azul escuro #060431 (fundo), azul royal #3B32D9, verde #B9E483 e
   off-white #FAFFF3 — e títulos sem serifa (Manrope), retos. O verde é o
   destaque nas faixas escuras; nas claras, quem destaca é o azul royal.

   CLARO E ESCURO
   O padrão é escuro (o gosto dele); o botão do topo troca para claro e
   lembra a escolha (localStorage "ga-tema"). As cores moram em
   variáveis: a página inteira e cada seção leem --fundo, --texto,
   --forte… Uma ".secao-gelo" usa a OUTRA paleta — creme no tema escuro,
   escura no tema claro —, e assim o ritmo de faixas do modelo continua
   nos dois.

   As classes antigas (.secao-gelo, .botao-azul, .heroi-ondas…) seguem
   valendo, para as páginas não precisarem mudar todas de uma vez. */

:root, :root[data-tema="claro"] .secao-gelo {
  --fundo: #060431; --superficie: #0C0A45; --superficie-2: #110E52;
  --linha: rgba(250, 255, 243, .12); --linha-forte: rgba(250, 255, 243, .26);
  --leve: rgba(250, 255, 243, .04); --leve-2: rgba(250, 255, 243, .08);
  --forte: #FAFFF3; --texto: rgba(250, 255, 243, .88); --texto-suave: rgba(250, 255, 243, .68); --texto-fraco: rgba(250, 255, 243, .48);
  --acento: #3B32D9; --acento-texto: #B9E483; --acento-fundo: rgba(185, 228, 131, .14); --acento-borda: rgba(185, 228, 131, .5);
  --pilula: #B9E483; --pilula-texto: #060431; --pilula-2: rgba(250, 255, 243, .06);
  --sombra: 0 30px 80px rgba(0, 0, 0, .5);
  --erro: #FF8A80;
  color-scheme: dark;
}
/* as faixas claras: o off-white, com o texto no azul escuro e o destaque
   no azul royal (o verde não teria leitura sobre o claro) */
:root[data-tema="claro"], :root:not([data-tema="claro"]) .secao-gelo {
  --fundo: #FAFFF3; --superficie: #FFFFFF; --superficie-2: #EEF4E6;
  --linha: rgba(6, 4, 49, .1); --linha-forte: rgba(6, 4, 49, .22);
  --leve: rgba(6, 4, 49, .04); --leve-2: rgba(6, 4, 49, .08);
  --forte: #060431; --texto: #1A1850; --texto-suave: #4A4875; --texto-fraco: #7D7B9C;
  --acento: #3B32D9; --acento-texto: #3B32D9; --acento-fundo: rgba(59, 50, 217, .1); --acento-borda: rgba(59, 50, 217, .4);
  --pilula: #060431; --pilula-texto: #FAFFF3; --pilula-2: rgba(6, 4, 49, .05);
  --sombra: 0 30px 70px rgba(6, 4, 49, .14);
  --erro: #B3261E;
  color-scheme: light;
}
:root {
  --raio: 16px;
  --largura: 1240px;
  --titulo: 'Manrope', system-ui, sans-serif;
  --corpo: 'Manrope', system-ui, sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* nomes antigos, para o que ainda os usa */
  --preto: var(--fundo); --verde: var(--acento-texto);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--fundo); }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1rem/1.62 var(--corpo); -webkit-font-smoothing: antialiased;
       transition: background-color .3s, color .3s; }
img { max-width: 100%; height: auto; }
a { color: var(--acento-texto); }
::selection { background: #B9E483; color: #060431; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.05; color: var(--forte); margin: 0 0 .45em; letter-spacing: -.035em; }
h1 { font-size: clamp(2.7rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: 0; }
/* a segunda linha do título, na cor de destaque (reta: a fonte agora é sem serifa) */
h1 em, h2 em, h3 em, .titulo-gigante em { font-style: normal; color: var(--acento-texto); }
p { margin: 0 0 1em; }

.faixa { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .faixa { padding: 0 40px; } }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 30; background: var(--pilula); color: var(--pilula-texto); padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* o rótulo técnico: "■ 03 · PLANOS" */
.chapeu { display: inline-flex; align-items: center; gap: 10px; font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase;
          color: var(--texto-suave); margin-bottom: 22px; }
.chapeu::before { content: ''; width: 7px; height: 7px; background: var(--acento); flex: none; }
.lead { font-size: clamp(1.02rem, 1.35vw, 1.14rem); color: var(--texto-suave); max-width: 38rem; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; padding: 14px 0; background: color-mix(in srgb, var(--fundo) 82%, transparent);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo .faixa { display: flex; align-items: center; gap: 18px; }
.marca { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; color: var(--forte); text-decoration: none; font: 600 1rem var(--corpo); letter-spacing: -.01em; margin-right: auto; }
.marca img { border-radius: 50%; }
.abre-menu { display: none; background: var(--pilula-2); border: 1px solid var(--linha-forte); color: var(--forte); border-radius: 999px;
             padding: 9px 16px; font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a:not(.botao) { position: relative; color: var(--texto-suave); text-decoration: none; font: 500 .92rem var(--corpo); padding: 8px 14px; transition: color .2s; }
.menu a:not(.botao):hover, .menu a[aria-current]:not(.botao) { color: var(--forte); }
.menu a[aria-current]:not(.botao)::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--acento); transform: translateX(-50%); }
.menu .botao { margin-left: 12px; }
.menu .botao-painel { padding: 10px 16px; font-size: .7rem; }
.menu .botao-painel + .botao { margin-left: 8px; }
@media (max-width: 960px) {
  .abre-menu { display: block; }
  .menu { display: none; position: absolute; top: 66px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 0;
          border: 1px solid var(--linha); border-radius: 20px; padding: 10px; background: var(--superficie); box-shadow: var(--sombra); }
  .menu.aberto { display: flex; }
  .menu a:not(.botao) { padding: 14px; font-size: 1rem; }
  .menu a[aria-current]:not(.botao)::after { left: 4px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .menu .botao { margin: 8px 0 0; justify-content: center; }
}

/* ---------- o botão claro/escuro (☀ ◯ ☾), no topo do site e dos painéis ---------- */
.tema { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--linha-forte); border-radius: 999px;
        background: var(--pilula-2); color: var(--texto-suave); cursor: pointer; font: inherit; line-height: 0; }
.tema svg { width: 16px; height: 16px; flex: none; transition: color .25s, opacity .25s; }
.tema .trilho { position: relative; width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--leve); }
.tema .bola { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--forte); transition: transform .3s cubic-bezier(.3,.7,.2,1); }
:root:not([data-tema="claro"]) .tema .bola { transform: translateX(16px); }
:root:not([data-tema="claro"]) .tema .sol, :root[data-tema="claro"] .tema .lua { opacity: .45; }
:root:not([data-tema="claro"]) .tema .lua, :root[data-tema="claro"] .tema .sol { color: var(--forte); }
.tema:hover { border-color: var(--acento-borda); }

@media (max-width: 480px) { .tema svg { display: none; } .tema { padding: 6px; } .topo .faixa { gap: 10px; } }

/* ---------- botões em pílula, com a seta num círculo ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 22px; border-radius: 999px;
         font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; line-height: 1.2;
         border: 1px solid transparent; cursor: pointer; transition: transform .25s, background .25s, border-color .25s, color .25s; }
.botao-verde, .botao-azul { background: var(--pilula); color: var(--pilula-texto) !important; padding-left: 7px; }
.botao-verde::before, .botao-azul::before { content: '→'; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
         background: var(--acento); color: #0B0B0C; font: 600 .95rem var(--corpo); letter-spacing: 0; transition: transform .25s; }
.botao-verde:hover::before, .botao-azul:hover::before { transform: rotate(-45deg); }
.botao-contorno { border-color: var(--linha-forte); color: var(--forte); background: var(--pilula-2); }
.botao-contorno:hover { border-color: var(--acento-borda); }
.botao:hover { transform: translateY(-1px); }
.menu .botao-verde { padding: 6px 16px 6px 6px; font-size: .7rem; }
.menu .botao-verde::before { width: 26px; height: 26px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ---------- seções ---------- */
.secao { padding: clamp(56px, 7vw, 96px) 0; position: relative; background: var(--fundo); color: var(--texto); }
.secao-gelo, .secao-escura { background: var(--fundo); color: var(--texto); }
.cabeca-secao { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.cabeca-secao h2 { margin: 0; }
.cabeca-secao .lead { margin: 0; justify-self: end; }
@media (max-width: 860px) { .cabeca-secao { grid-template-columns: 1fr; } .cabeca-secao .lead { justify-self: start; } }

.heroi { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.heroi h1 { max-width: 14ch; }
.heroi-ondas { position: relative; overflow: hidden; }
.heroi-ondas::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--linha); }
.heroi-ondas .lead { max-width: 40rem; }

/* ---------- herói da home: título, a figura dos objetos e o pedido andando ---------- */
.heroi-casa { padding: clamp(36px, 5vw, 72px) 0 clamp(72px, 7vw, 100px); overflow: hidden; }
.heroi-casa .faixa { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* a manchete virou frase inteira (09/11/2026): menor e mais larga, para não passar de seis linhas */
.heroi-casa h1 { font-size: clamp(2.3rem, 4.3vw, 3.9rem); max-width: 15ch; }
.fecho { margin: 36px 0 0; font: 400 clamp(1.35rem, 2.4vw, 1.8rem)/1.25 var(--titulo); color: var(--forte, inherit); max-width: 32ch; }
.numeros-heroi { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--linha); list-style: none; }
.numeros-heroi li { display: inline-flex; align-items: center; gap: 10px; font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.numeros-heroi li::before { content: ''; width: 6px; height: 6px; background: var(--acento); }
@media (max-width: 960px) { .heroi-casa .faixa { grid-template-columns: 1fr; } }

/* a moldura "de museu", com a luz em cima e a legenda "Fig." */
.moldura { position: relative; margin: 40px 0 0; }
.moldura::before { content: ''; position: absolute; top: -26px; left: 50%; width: 46%; height: 3px; transform: translateX(-50%); border-radius: 3px;
                   background: #FFD9CC; box-shadow: 0 0 26px 6px color-mix(in srgb, var(--acento) 55%, transparent), 0 40px 90px 10px color-mix(in srgb, var(--acento) 14%, transparent); }
.moldura-tela { border: 1px solid var(--linha-forte); border-radius: 18px; padding: 10px; background: var(--superficie-2); box-shadow: var(--sombra); }
.moldura-tela > svg, .moldura-tela > .cena { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--superficie); }
.legenda { position: absolute; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: 10px;
           background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(8px); font-size: .82rem; color: var(--texto-suave); }
.legenda b { font: 400 1.05rem var(--titulo); color: var(--forte); }
.legenda small { font: 500 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
.moldura .legenda-fig { left: -18px; bottom: -34px; }
.moldura { margin-bottom: 120px; }
/* o cartão do pedido fica abaixo do quadro, sem tapar a planilha (pedido do Gabriel) */
.moldura .pedido-vivo { right: -18px; bottom: -150px; min-width: 230px; }
.pedido-vivo ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.pedido-vivo li { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--texto-fraco); transition: color .4s; }
.pedido-vivo li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--linha-forte); transition: background .4s, border-color .4s, box-shadow .4s; }
.pedido-vivo li.feito { color: var(--texto); }
.pedido-vivo li.feito::before { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 10px var(--acento-borda); }
@media (max-width: 600px) {
  .moldura .pedido-vivo { position: relative; right: auto; top: auto; margin: 14px 0 0; }
  .moldura .legenda-fig { left: 10px; bottom: -24px; }
}

/* os desenhos: traço na cor do texto, detalhe na cor de destaque */
.desenho { color: var(--forte); }
.desenho .t { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.desenho .t2 { fill: none; stroke: var(--texto-fraco); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 3 4; }
.desenho .c { fill: var(--superficie-2); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.desenho .a { fill: var(--acento); }
.desenho .as { fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; }
.desenho .txt { font: 500 9px var(--mono); letter-spacing: .1em; fill: var(--texto-fraco); }
.desenho .fluxo { stroke-dasharray: 4 10; animation: corre 2.4s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -28; } }

/* ---------- placas: os problemas, como placas na parede ---------- */
.placas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.placa { position: relative; padding: 26px 24px 22px; border-radius: 12px; border: 1px solid var(--linha-forte);
         background: linear-gradient(160deg, var(--superficie-2), var(--superficie)); box-shadow: 0 18px 40px rgba(0,0,0,.18); transition: transform .35s, border-color .35s; }
.placa::before, .placa::after { content: ''; position: absolute; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--texto-fraco); }
.placa::before { left: 9px; } .placa::after { right: 9px; }
.placa:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--acento-borda); }
.placa h3 { font-size: 1.55rem; margin-bottom: 14px; }
.placa p { margin: 0; padding-top: 12px; border-top: 1px solid var(--linha); font-size: .92rem; color: var(--texto-suave); }
.placa .numero { margin-bottom: 18px; }

/* ---------- serviços em pedestais ---------- */
.vitrine { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 2px solid var(--forte); }
.vitrine-item { position: relative; display: grid; justify-items: center; align-content: start; gap: 18px; padding: 40px 6px 0; cursor: pointer; text-align: left;
                background: none; border: 0; color: inherit; font: inherit; }
/* o foco de luz que desce do trilho */
.vitrine-item::before { content: ''; position: absolute; top: -12px; left: 50%; width: 14px; height: 10px; transform: translateX(-50%); background: var(--forte); border-radius: 0 0 3px 3px; }
.vitrine-item::after { content: ''; position: absolute; top: -2px; left: 50%; width: 92%; height: 300px; transform: translateX(-50%); pointer-events: none;
                       background: linear-gradient(color-mix(in srgb, var(--forte) 7%, transparent), transparent 75%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
                       transition: background .4s; }
/* a luz acende em laranja-claro quando o mouse passa (ou no escolhido) */
.vitrine-item:hover::after, .vitrine-item[aria-pressed="true"]::after { background: linear-gradient(color-mix(in srgb, var(--acento) 30%, transparent), transparent 78%); }
.vitrine-item:hover::before, .vitrine-item[aria-pressed="true"]::before { background: var(--acento); box-shadow: 0 0 14px var(--acento); }
.vitrine-item .objeto { position: relative; z-index: 1; width: 100%; max-width: 150px; height: 130px; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.vitrine-item:hover .objeto, .vitrine-item[aria-pressed="true"] .objeto { transform: translateY(-6px); }
.pedestal { width: 74%; height: 120px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--superficie-2), var(--superficie) 45%, var(--superficie-2));
            border: 1px solid var(--linha); border-bottom: 0; display: grid; align-items: end; justify-items: center; padding-bottom: 10px;
            font: 500 .66rem var(--mono); letter-spacing: .12em; color: var(--texto-fraco); }
.vitrine-item[aria-pressed="true"] .pedestal { color: var(--acento-texto); }
.vitrine-legenda { width: 100%; display: grid; gap: 6px; padding: 14px 4px 0; font-size: .86rem; color: var(--texto-suave); }
.vitrine-legenda { position: relative; z-index: 1; border-top: 1px solid var(--linha); margin-top: 6px; }
.vitrine-legenda b { font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--forte); }
.vitrine-legenda b em { font-style: normal; color: var(--acento-texto); margin-right: 4px; }
.vitrine-detalhe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 24px 48px; align-items: start;
                   margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--linha-forte); }
.vitrine-detalhe h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.etiquetas li { font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--texto-suave); }
@media (max-width: 900px) {
  .vitrine { grid-template-columns: repeat(6, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .vitrine::-webkit-scrollbar { display: none; }
  .vitrine-item { scroll-snap-align: start; }
  .vitrine-detalhe { grid-template-columns: 1fr; }
}
.vitrine-detalhe { margin-top: 26px; padding-top: 26px; }

/* ---------- a planta baixa do método ---------- */
.obra { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.planta { width: 100%; height: auto; display: block; }
.planta .parede { fill: none; stroke: var(--forte); stroke-width: 3; }
.planta .parede-fina { fill: none; stroke: var(--forte); stroke-width: 1.2; }
.planta .sala { fill: var(--acento-fundo); transition: fill .4s; }
.planta .sala.atual { fill: color-mix(in srgb, var(--acento) 26%, transparent); }
.planta .rota { fill: none; stroke: var(--acento-texto); stroke-width: 2.4; stroke-linejoin: round; }
.planta .num { font: 400 22px var(--titulo); fill: var(--forte); }
.planta .nome { font: 600 8px var(--mono); letter-spacing: .14em; fill: var(--texto-suave); }
.planta .grade-fundo { stroke: var(--linha); stroke-width: .6; }
.planta .voce { fill: var(--acento-texto); }
.passo-atual { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; margin: 28px 0; padding: 26px 0; border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte); }
.passo-atual .grande { grid-row: span 2; font: 400 clamp(4rem, 8vw, 6rem)/.9 var(--titulo); color: var(--forte); }
.passo-atual h3 { font-size: 1.9rem; margin: 6px 0 0; }
.passo-atual p { margin: 0; color: var(--texto-suave); }
.trilha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; }
.trilha button { width: 100%; text-align: left; background: none; border: 0; border-top: 2px solid var(--linha-forte); padding: 10px 0 0; cursor: pointer;
                 font: 500 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); transition: color .3s, border-color .3s; }
.trilha button[aria-pressed="true"] { border-color: var(--acento-texto); color: var(--forte); }
@media (max-width: 900px) { .obra { grid-template-columns: 1fr; } }

/* ---------- a ficha do case (no lugar do livro, que saiu) ---------- */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--linha-forte); border-radius: 20px; overflow: hidden; background: var(--superficie); }
.ficha > div { padding: clamp(24px, 4vw, 48px); }
.ficha > div + div { border-left: 1px solid var(--linha); background: var(--superficie-2); }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; margin: 0; }
.ficha dt { font: 500 .66rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
.ficha dd { margin: 0; color: var(--texto); }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } .ficha > div + div { border-left: 0; border-top: 1px solid var(--linha); } }

/* ---------- perguntas, com filtro ---------- */
.perguntas { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtros button { font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; cursor: pointer;
                  border: 1px solid var(--linha-forte); background: var(--pilula-2); color: var(--texto-suave); }
.filtros button sup { font-size: .55rem; margin-left: 3px; color: var(--texto-fraco); }
.filtros button[aria-pressed="true"] { background: var(--pilula); color: var(--pilula-texto); border-color: var(--pilula); }
.pergunta { border-top: 1px solid var(--linha-forte); }
.pergunta:last-child { border-bottom: 1px solid var(--linha-forte); }
.pergunta summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 0; cursor: pointer; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary small { font: 500 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
.pergunta summary small b { color: var(--acento-texto); font-weight: 500; margin-right: 8px; }
.pergunta summary span { grid-column: 1; font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.2 var(--titulo); color: var(--forte); }
.pergunta summary i { grid-row: 1 / span 2; grid-column: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center;
                      font: 400 1.2rem/1 var(--corpo); font-style: normal; color: var(--forte); transition: transform .3s, background .3s; }
.pergunta[open] summary i { transform: rotate(45deg); background: var(--acento); border-color: var(--acento); color: #0B0B0C; }
.pergunta p { margin: 0 0 22px; max-width: 40rem; color: var(--texto-suave); }
.pergunta[hidden] { display: none; }
@media (max-width: 860px) { .perguntas { grid-template-columns: 1fr; } }

/* ---------- o fim: o título gigante ---------- */
.titulo-gigante { font: 400 clamp(2.6rem, 6.4vw, 5.2rem)/.95 var(--titulo); letter-spacing: -.02em; color: color-mix(in srgb, var(--forte) 62%, transparent); margin: 0 0 40px; }
.titulo-gigante em { padding-left: 0; }
.titulo-gigante.titulo-pergunta { font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 18ch; }
.chamada-final { overflow: hidden; }
.chamada-final .faixa { position: relative; }
.chamada-final .lead { color: var(--texto); font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 30rem; }

/* ---------- cartões e grades (páginas internas) ---------- */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grade-larga { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; transition: border-color .25s, transform .25s; color: var(--texto); }
.cartao:hover { border-color: var(--linha-forte); }
.cartao h3 { color: var(--forte); }
.cartao p { color: var(--texto-suave); }
.cartao p:last-child { margin-bottom: 0; }
.cartao .chapeu { margin-bottom: 14px; }
.cartao a.mais { font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--acento-texto); }
.cartao a.mais::after { content: ' →'; }
.numero { font: 500 .7rem var(--mono); color: var(--texto-fraco); letter-spacing: .12em; display: block; margin-bottom: 36px; }

.lista-limpa { list-style: none; padding: 0; margin: 0; }
.lista-check li { padding-left: 1.6em; position: relative; margin-bottom: .7em; color: var(--texto-suave); }
.lista-check li strong { color: var(--forte); font-weight: 600; }
.lista-check li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--acento); }

.passos { counter-reset: passo; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 0; margin: 0; }
.passos li { counter-increment: passo; list-style: none; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; }
.passos li::before { content: counter(passo, decimal-leading-zero); display: block; font: 400 2.6rem/1 var(--titulo); color: var(--forte); margin-bottom: 28px; }
.passos p { color: var(--texto-suave); margin: 0; }

/* ---------- planos ---------- */
.planos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 18px; padding: 30px 28px 28px;
         box-shadow: 0 1px 0 var(--linha); }
/* a barra escura em cima de cada cartão, como no modelo */
.plano::before { content: ''; position: absolute; top: -1px; left: 18px; right: 18px; height: 4px; border-radius: 0 0 4px 4px; background: var(--forte); opacity: .85; }
.plano.destaque { border-color: var(--acento-borda); box-shadow: 0 0 0 1px var(--acento-borda), var(--sombra); }
.plano.destaque::before { background: var(--acento); opacity: 1; }
.plano .selo { align-self: flex-start; color: var(--acento-texto); border: 1px solid var(--acento-borda); font: 600 .64rem var(--mono); letter-spacing: .12em;
               text-transform: uppercase; border-radius: 999px; padding: 4px 10px; margin-bottom: 14px; }
.plano h3 { font: 600 .74rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.plano .foco { color: var(--forte); font: 400 1.35rem/1.2 var(--titulo); margin: 0; }
.plano .preco { font: 400 3rem/1 var(--titulo); color: var(--forte); margin: 22px 0 0; }
.plano .preco small { font: 400 .9rem var(--corpo); color: var(--texto-fraco); }
.plano ul { flex: 1; margin: 24px 0 28px; padding-top: 20px; border-top: 1px dashed var(--linha-forte); }
.plano .botao { justify-content: center; }
.plano-custom { background: linear-gradient(165deg, var(--acento-fundo), var(--superficie) 70%) !important; }
.plano-custom .preco { font-size: 2.2rem; }

.nota { font-size: .88rem; color: var(--texto-fraco); }
.planos + .nota { margin-top: 18px; }

/* tabelas */
.tabela-rola { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .94rem; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; }
thead th { background: var(--superficie-2); color: var(--texto-suave); font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
tbody th { color: var(--forte); font-weight: 600; }
tbody td { color: var(--texto-suave); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
.estado { display: inline-block; font: 600 .66rem var(--mono); letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.estado-sim { background: var(--acento-fundo); color: var(--acento-texto); }
.estado-nao { background: var(--leve); color: var(--texto-fraco); }
.estado-extra { background: var(--leve-2); color: var(--texto); }
.estado-custom { background: var(--pilula); color: var(--pilula-texto); }

/* ---------- formulário ---------- */
.formulario { display: grid; gap: 18px; max-width: 680px; }
.formulario label { display: grid; gap: 8px; font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.formulario .opcional { color: var(--texto-fraco); text-transform: none; letter-spacing: 0; }
.formulario input, .formulario select, .formulario textarea {
  font: 400 1rem var(--corpo); letter-spacing: 0; text-transform: none; padding: 14px 16px; border: 1px solid var(--linha-forte); border-radius: 12px;
  background: var(--superficie); color: var(--forte); width: 100%; }
.formulario textarea { min-height: 150px; resize: vertical; }
.formulario :focus-visible { outline: 2px solid var(--acento-borda); outline-offset: 1px; border-color: var(--acento-texto); }
.formulario .duas { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.formulario .isca { position: absolute; left: -9999px; }
.formulario .consentimento { display: flex; gap: 12px; font: 400 .92rem var(--corpo); letter-spacing: 0; text-transform: none; align-items: flex-start; }
.formulario .consentimento input { width: auto; margin-top: 4px; accent-color: var(--acento); }
.resposta { padding: 14px 16px; border-radius: 12px; display: none; }
.resposta.ok { display: block; background: var(--acento-fundo); color: var(--acento-texto); border: 1px solid var(--acento-borda); }
.resposta.erro { display: block; background: color-mix(in srgb, var(--erro) 10%, transparent); color: var(--erro); border: 1px solid color-mix(in srgb, var(--erro) 35%, transparent); }

/* ---------- texto longo ---------- */
.texto-longo { max-width: 46rem; }
.faixa.texto-longo { max-width: var(--largura); }
.faixa.texto-longo > * { max-width: 46rem; }
.texto-longo h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.texto-longo h2 { margin-top: 1.6em; font-size: 1.7rem; }
.texto-longo p, .texto-longo li { color: var(--texto-suave); }

/* ---------- diagnóstico ---------- */
.secao-diagnostico { padding-top: clamp(56px, 8vw, 96px); }
.duas-colunas { display: grid; gap: clamp(32px, 6vw, 88px); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.duas-colunas .formulario { max-width: none; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: 20px; padding: clamp(20px, 3vw, 36px); }
.coluna-texto h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.proximos { list-style: none; counter-reset: p; padding: 0; margin: 36px 0 28px; display: grid; gap: 4px; }
.proximos li { counter-increment: p; display: grid; grid-template-columns: 52px 1fr; row-gap: 2px; padding: 16px 0; border-top: 1px solid var(--linha); }
.proximos li::before { content: counter(p, decimal-leading-zero); grid-row: span 2; font: 400 1.6rem/1.1 var(--titulo); color: var(--acento-texto); }
.proximos b { color: var(--forte); font-weight: 600; }
.proximos span { color: var(--texto-suave); font-size: .95rem; }
@media (max-width: 900px) {
  .duas-colunas { grid-template-columns: 1fr; gap: 28px; }
  .coluna-texto { display: contents; }
  .duas-colunas .formulario { order: 1; }
  .coluna-texto .proximos, .coluna-texto .nota { order: 2; }
  .coluna-texto .proximos { margin: 8px 0 0; }
}

/* ---------- entrada suave ao rolar ---------- */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .desenho .fluxo { animation: none; }
}

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); color: var(--texto-suave); padding: 64px 0 28px; background: var(--fundo); }
.rodape-grade { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rodape h2 { font: 600 .68rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 14px; }
.rodape nav a { display: block; color: var(--texto-suave); text-decoration: none; padding: 4px 0; font-size: .94rem; }
.rodape nav a:hover { color: var(--forte); }
.rodape .marca { margin-bottom: 12px; }
.rodape-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linha); margin-top: 48px; padding-top: 22px;
              font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
.rodape-fim a { color: var(--texto-suave); text-decoration: none; }
.rodape-fim a:hover { color: var(--forte); }

/* ---------- telas de acesso: formulário de um lado, a figura do outro ---------- */
.voltar-site { color: var(--texto-suave); text-decoration: none; font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
               padding: 10px 16px; border: 1px solid var(--linha); border-radius: 999px; }
.voltar-site:hover { color: var(--forte); border-color: var(--linha-forte); }
.acesso-dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - 74px - 61px); }
.acesso-lado { display: flex; align-items: center; justify-content: center; padding: 48px 32px 64px; }
.acesso-lado .acesso { width: 100%; max-width: 420px; }
.acesso-mar { position: relative; overflow: hidden; border-left: 1px solid var(--linha); background: var(--superficie);
              display: grid; align-content: center; padding: clamp(28px, 5vw, 64px); }
.acesso-mar .mar { display: none; }
.acesso-frase { position: relative; margin-bottom: 30px; }
.acesso-frase p { font: 400 clamp(2rem, 3.4vw, 3rem)/1.05 var(--titulo); color: var(--forte); max-width: 13ch; margin: 0; }
.acesso-mar .desenho { width: 100%; max-width: 520px; height: auto; }
.rodape-minimo { padding: 20px 0; font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
.rodape-minimo a { color: var(--texto-suave); text-decoration: none; }
.rodape-minimo a:hover { color: var(--forte); }
@media (max-width: 860px) {
  .acesso-dividido { grid-template-columns: 1fr; min-height: 0; }
  .acesso-mar { display: none; }
  .acesso-lado { padding: 32px 16px 56px; align-items: flex-start; }
}

/* o mar de pontos saiu com o visual novo; o que sobrou nas páginas some */
.mar { display: none; }

/* ================================================================
   PLATAFORMA: login, painel do cliente e área da equipe.
   Mesmo visual do site, mais denso: aqui se trabalha, não se lê.
   ================================================================ */
.secao-acesso { min-height: 78svh; display: flex; align-items: center; }
.acesso { max-width: 480px; width: 100%; }
.acesso h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.acesso .formulario { margin-top: 8px; }
.acesso .nota { margin-top: 22px; }
.titulo-passo { font-size: clamp(1.3rem, 2.4vw, 1.7rem); text-transform: none; letter-spacing: -.02em; }
.formulario input.codigo { font: 500 1.6rem var(--mono); letter-spacing: .4em; text-align: center; max-width: 260px; }
.qr { background: #fff; padding: 14px; border-radius: 12px; width: max-content; margin: 8px 0 24px; }
.qr svg { display: block; width: 184px; height: 184px; }
code { font-family: var(--mono); font-size: .9em; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 6px; padding: 2px 6px; color: var(--forte); }
.link-convite { display: block; margin: 10px 0; word-break: break-all; padding: 10px 12px; }
.botao.mini { padding: 7px 12px; font-size: .68rem; }

.secao-painel { padding-top: clamp(40px, 6vw, 72px); }
.cabeca-painel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px;
                 padding-bottom: 28px; border-bottom: 1px solid var(--linha); }
.cabeca-painel h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0; }
.cabeca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cabeca-acoes .quem { font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.troca-empresa { font: inherit; background: var(--superficie); color: var(--forte); border: 1px solid var(--linha-forte); border-radius: 999px; padding: 10px 14px; }
.resumo { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 56px; }
.resumo .numero { margin-bottom: 14px; }
.bloco { margin-bottom: 64px; }
.bloco h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.bloco .lead { margin-bottom: 24px; }
.bloco .formulario { margin-top: 20px; }
.grade-modulos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.modulo { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.modulo p { margin: 0; font-size: .94rem; }
.modulo h3 { margin: 0; font-size: 1.02rem; }
.modulo-nao_contratado { opacity: .62; }
.modulo-nao_contratado:hover { opacity: 1; }
.modulo-ativo { border-color: var(--acento-borda); }
.linha-modulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* no cartão de módulo o selo vai acima do título: ao lado, apertava o nome */
.modulo .linha-modulo { flex-direction: column-reverse; gap: 10px; }
.admin-grade { display: grid; gap: 28px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; margin-bottom: 48px; }
@media (max-width: 960px) { .admin-grade { grid-template-columns: 1fr; } }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover th, tr.clicavel:hover td, tr.clicavel:focus-visible th { color: var(--acento-texto); }
.detalhe-empresa:not(:empty) { border-top: 1px solid var(--linha); padding-top: 36px; }
.detalhe-empresa > h3 { margin: 36px 0 14px; font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento-texto); }
.avulsos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.avulsos .consentimento { font: 400 .95rem var(--corpo); text-transform: none; letter-spacing: 0; color: var(--forte); display: flex; gap: 10px; align-items: center; }

/* integrações no painel */
.conector { margin: 8px 0 28px; display: flex; flex-direction: column; gap: 12px; }
.conector h3 { margin: 0; font-size: 1.15rem; }
.conector .linha-modulo { flex-direction: row; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0; }
.numeros div { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.numeros b { font: 600 1.9rem/1 var(--titulo); color: var(--forte); letter-spacing: -.02em; }
.numeros span { font-size: .85rem; color: var(--texto-suave); }
.manual summary { cursor: pointer; color: var(--texto-suave); font-size: .9rem; }
.manual .formulario { margin-top: 14px; }
.titulo-tabela { margin: 28px 0 12px; font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acento-texto); }
.selo-piloto { margin-left: 8px; vertical-align: middle; }
.piloto { font: 400 .95rem var(--corpo) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--texto-suave); display: flex; gap: 10px; }

@media (max-width: 600px) {
  /* no celular o resumo é consulta rápida: cartões baixos, para o painel começar logo */
  .resumo { gap: 10px; margin-bottom: 40px; }
  .resumo .cartao { padding: 16px 18px; }
  .resumo .numero { margin-bottom: 4px; }
  .resumo h3 { margin-bottom: 4px; }
  .resumo p { font-size: .9rem; }
  .cabeca-painel { margin-bottom: 24px; padding-bottom: 20px; }
}

/* Melhor Envio: centros de despacho e simulador */
.origens { display: grid; gap: 10px; }
.origem { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: center; }
.conector .titulo-tabela { font-size: .74rem; margin-top: 18px; }
.itens-cotacao { display: grid; gap: 10px; }
.item-cotacao { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 10px; align-items: end; }
.item-cotacao label { font-size: .64rem; }
.cotacao .titulo-tabela { margin-top: 22px; }
@media (max-width: 760px) {
  .origem { grid-template-columns: 1fr 1fr; }
  .item-cotacao { grid-template-columns: 1fr 1fr; }
  .item-cotacao select { grid-column: 1 / -1; }
}
.origem-cabeca span { font: 500 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
@media (max-width: 760px) { .origem-cabeca { display: none; } }
.numeros .alerta { border-color: rgba(255,138,128,.45); } .numeros .alerta b { color: var(--erro); }

/* WhatsApp: a franquia do mês */
.franquia { display: grid; gap: 6px; margin: 4px 0 8px; }
.franquia-trilho { height: 8px; border-radius: 999px; background: var(--leve-2); overflow: hidden; }
.franquia-cheio { height: 100%; min-width: 6px; background: var(--acento); border-radius: 999px; }
.franquia span { font-size: .86rem; color: var(--texto-suave); }
.previa-modelo:not(:empty) { border-left: 2px solid var(--acento-texto); padding-left: 12px; font-style: italic; }
.valor-dns code { word-break: break-all; font-size: .8em; }

/* ---------- painel em áreas: menu na lateral (computador) ou em abas (celular) ---------- */
.painel-grade { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.menu-painel { position: sticky; top: 90px; display: grid; gap: 4px; }
.menu-painel a { color: var(--texto-suave); text-decoration: none; font: 500 .74rem var(--mono); letter-spacing: .09em; text-transform: uppercase;
                 padding: 11px 14px; border-radius: 10px; border: 1px solid transparent; }
.menu-painel a:hover { color: var(--forte); background: var(--leve); }
.menu-painel a[aria-current] { color: var(--forte); background: var(--superficie); border-color: var(--linha); box-shadow: inset 2px 0 0 var(--acento-texto); }
.area-painel > .bloco:first-child, .area-painel > .resumo:first-child { margin-top: 0; }
.grade-conexoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.conexao { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; padding: 20px; }
.conexao h3 { margin: 0; font-size: 1rem; }
.conexao .linha-modulo { flex-direction: row; align-items: center; }
.conexao-numero { font: 600 2.2rem/1 var(--titulo); color: var(--forte); letter-spacing: -.02em; margin-top: 10px; }
.conexao .mais { margin-top: auto; padding-top: 10px; font: 500 .72rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--acento-texto); }
.conexao .mais::after { content: ' →'; }
.conexao:hover { border-color: var(--linha-forte); }
.conexao-off { opacity: .72; }
@media (max-width: 860px) {
  .painel-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .menu-painel { position: sticky; top: 60px; z-index: 4; display: flex; overflow-x: auto; gap: 6px; padding: 8px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
                 background: linear-gradient(var(--fundo) 80%, transparent); scrollbar-width: none; }
  .menu-painel::-webkit-scrollbar { display: none; }
  .menu-painel a { white-space: nowrap; border-color: var(--linha); border-radius: 999px; padding: 9px 14px; }
  .menu-painel a[aria-current] { box-shadow: none; border-color: var(--acento-texto); }
}

/* webhooks de saída */
.formulario .eventos { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; margin: 0; min-width: 0; }
.formulario .eventos legend { font: 500 .74rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); padding: 0 6px; }
.botoes-linha { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#webhooks code { word-break: break-all; }
.formulario .eventos code { word-break: normal; white-space: nowrap; }

/* leitura de documento pela IA: a linha cujo preço não bate */
.leitura-ia tr.difere td:nth-child(4), .leitura-ia tr.difere td:nth-child(6) { color: var(--erro); }
.leitura-ia { margin-top: 18px; }

/* IA: classificação e respostas */
.formulario textarea, .cartao textarea { width: 100%; min-width: 0; box-sizing: border-box; background: transparent; color: inherit; border: 1px solid var(--linha-forte, var(--linha)); border-radius: 12px; padding: 12px 14px; font: 400 .95rem/1.5 var(--corpo); resize: vertical; }
.cartao td select { width: 100%; min-width: 140px; }
.campo-linha { display: inline-flex; gap: 10px; align-items: center; font: 500 .74rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); margin: 6px 0 12px; }
#ia .cartao + .cartao { margin-top: 18px; }

/* ================================================================
   PLANOS COMO PASSES: corpo, picote e canhoto com código de barras.
   Os quatro lado a lado e menores; o Intermediário em laranja. O
   canhoto fica reto e só se solta quando o mouse passa — pedido do
   Gabriel ("só ter o destaque do canhoto quando passar o mouse").
   ================================================================ */
.passes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; padding-top: 10px; }
.passe { --papel: #FAFFF3; --tinta: #060431; --tinta-suave: #4A4875; --picote: rgba(6, 4, 49, .3);
         position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; color: var(--tinta); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .2)); }
.passe-corpo, .passe-canhoto { background: var(--papel); }
.passe-corpo { position: relative; padding: 24px 20px 20px; border-radius: 14px 0 0 14px; display: flex; flex-direction: column; min-width: 0; }
.passe-corpo::before { content: ''; position: absolute; top: 0; left: 24px; width: 44px; height: 5px; border-radius: 0 0 4px 4px; background: var(--tinta); }
.passe-canhoto { position: relative; border-radius: 0 14px 14px 0; border-left: 2px dashed var(--picote); margin-left: -1px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
                 padding: 16px 0; font: 600 .58rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta);
                 transform-origin: 0 100%; transition: transform .55s cubic-bezier(.3, .7, .2, 1); }
.passe-canhoto span { writing-mode: vertical-rl; transform: rotate(180deg); }
.passe-canhoto span:first-child { transform: none; }
.barras { align-self: center; width: 18px; height: 50px; background: repeating-linear-gradient(0deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 8px); }
/* os furos do picote são RECORTES (máscara), não bolas pintadas da cor do
   fundo: a bola pintada aparecia com outra cor no tema escuro, porque a
   sombra do passe escurece o fundo em volta dele */
.passe-corpo { -webkit-mask: radial-gradient(circle 8px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
               mask: radial-gradient(circle 8px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.passe-canhoto { -webkit-mask: radial-gradient(circle 8px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
                 mask: radial-gradient(circle 8px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.passe:hover .passe-canhoto, .passe:focus-within .passe-canhoto { transform: rotate(5deg) translate(6px, 4px); }
.passe-topo { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(11, 11, 12, .14);
              font: 600 .6rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); white-space: nowrap; }
.passe h3 { font: 400 1.75rem/1 var(--titulo); color: var(--tinta); margin: 0 0 6px; }
.passe .foco { margin: 0; color: var(--tinta); font-size: .92rem; font-weight: 600; line-height: 1.35; }
/* para quem é o plano, logo abaixo da manchete (diretrizes comerciais de 09/11/2026) */
.passe .publico { margin: 6px 0 0; color: var(--tinta-suave); font-size: .82rem; line-height: 1.4; }
.passe .preco { display: grid; margin: 16px 0 0; padding-top: 16px; border-top: 1px dashed rgba(11, 11, 12, .22); font: 400 2.35rem/1 var(--titulo); color: var(--tinta); white-space: nowrap; }
.passe .preco small { font: 600 .6rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 6px; }
.passe-lista { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.passe-lista li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--tinta); }
.passe-lista li::before { content: '✓'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--acento); color: #fff; font: 700 .62rem/1 var(--corpo); }
.passe .botao { background: var(--tinta); color: #fff !important; justify-content: flex-start; width: 100%; white-space: nowrap; font-size: .64rem; padding: 6px 14px 6px 6px; gap: 10px; }
.passe .botao::before { background: var(--acento); color: #0B0B0C; width: 26px; height: 26px; }
.passe.destaque { --papel: #3B32D9; --tinta: #FAFFF3; --tinta-suave: rgba(250, 255, 243, .75); --picote: rgba(250, 255, 243, .4); filter: drop-shadow(0 20px 36px rgba(59, 50, 217, .35)); }
.passe.destaque .passe-lista li::before { background: #B9E483; color: #060431; }

.passes-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 22px 0 0; padding: 12px 18px; border-top: 5px solid var(--forte);
               background: var(--superficie-2); font: 600 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
@media (max-width: 1100px) { .passes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 600px) { .passes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .passe-canhoto { transition: none; } }

/* ================================================================
   A FAIXA DAS INTEGRAÇÕES: duas esteiras em sentidos opostos, devagar,
   apagando nas pontas. Para com o mouse; parada para quem pediu menos
   movimento (aí vira uma lista que quebra linha).
   ================================================================ */
.secao-curta { padding-bottom: clamp(48px, 6vw, 80px); }
.integracoes-faixa { display: grid; gap: 14px; overflow: hidden;
                     -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.esteira { display: flex; width: max-content; animation: esteira 60s linear infinite; }
.esteira.volta { animation-direction: reverse; animation-duration: 70s; }
.esteira.lenta { animation-duration: 80s; }
/* o botão da lista completa: do mesmo feitio dos chips, em laranja */
/* o mesmo respiro acima e abaixo do botão (pedido do Gabriel, 10/11): o de baixo é o fim da .secao-curta */
.integracoes-todas { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); }
.chip-todas { display: inline-grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 24px 12px 14px;
              border: 1px solid var(--acento); border-radius: 999px; background: var(--acento); color: #0B0B0C; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.chip-todas i { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #0B0B0C; color: var(--acento); font-style: normal; font-weight: 600; transition: transform .2s; }
.chip-todas span { font: 600 .95rem var(--corpo); line-height: 1.1; }
.chip-todas small { font: 600 .56rem var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.chip-todas:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px var(--acento); }
.chip-todas:hover i { transform: translateX(3px); }
.integracoes-faixa:hover .esteira { animation-play-state: paused; }
.esteira ul { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 12px 0 0; }
.esteira li { display: inline-grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 22px 12px 14px;
              border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--superficie); white-space: nowrap; }
.esteira li svg, .esteira li b, .esteira li img { grid-row: span 2; width: 30px; height: 30px; }
.esteira li img { border-radius: 8px; object-fit: contain; }
.esteira li .envelope { color: var(--forte); }
.esteira li b { display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha-forte); font: 600 .62rem var(--mono); letter-spacing: .06em; color: var(--forte); }
.esteira li span { font: 500 .95rem var(--corpo); color: var(--forte); line-height: 1.1; }
.esteira li small { font: 600 .56rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); }
/* o estado real de cada plataforma na faixa (plano de 09/11/2026): a vitrine não pode sugerir que todas já funcionam */
.esteira .chip-estado { font-style: normal; font-weight: 600; color: var(--texto-fraco); white-space: nowrap; }
.esteira .chip-estado.estado-sim { color: var(--acento-texto); }
.esteira li:hover { border-color: var(--acento-borda); }
@keyframes esteira { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .esteira { animation: none; width: auto; }
  .esteira ul[aria-hidden] { display: none; }
  .esteira ul { flex-wrap: wrap; padding: 0 16px; }
  .integracoes-faixa { -webkit-mask-image: none; mask-image: none; }
}

/* ================================================================
   O MÉTODO: a parede de quadros que anda com a rolagem (o gif que o
   Gabriel mostrou). A seção é alta; o palco fica preso na tela, e a
   rolagem escolhe a etapa: o quadro dela acende e vem para o centro.
   A planta baixa saiu — as linhas cruzavam as paredes.
   ================================================================ */
.metodo { padding: 0; }
.metodo { height: 240svh; } /* 09/11: era 380svh — a etapa 01 demorava a sair (pedido do Gabriel) */
.metodo-palco { position: sticky; top: 64px; height: calc(100svh - 64px); display: grid; align-items: center; overflow: hidden; }
.metodo-grade { width: 100%; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.metodo-texto h2 { margin-bottom: 26px; }
.cartao-etapa { background: #FAFFF3; color: #060431; border-radius: 14px; padding: 22px 24px; box-shadow: var(--sombra); max-width: 420px; }
.cartao-etapa .passe-topo { color: #55524D; }
.cartao-etapa .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }
.cartao-etapa h3 { color: #0B0B0C; font-size: 2rem; margin: 0 0 10px; }
.etapa-num { display: flex; align-items: baseline; gap: 4px; margin: 0 0 8px; padding-top: 12px; border-top: 1px solid rgba(11,11,12,.14); font: 400 3.4rem/1 var(--titulo); }
.etapa-num::after { content: '.'; color: var(--acento); }
.etapa-num small { order: 2; font: 600 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8A8780; margin-left: 10px; }
.etapa-num::after { order: 1; }
.cartao-etapa p:last-child { margin: 0; color: #3E3B37; }
.metodo .trilha { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; list-style: none; padding: 0; }
.metodo .trilha button { width: auto; border: 0; border-bottom: 2px solid var(--linha-forte); border-top: 0; padding: 0 0 6px; background: none; cursor: pointer;
                         font: 600 .7rem var(--mono); letter-spacing: .1em; color: var(--texto-fraco); }
.metodo .trilha button[aria-pressed="true"] { color: var(--forte); border-color: var(--acento); }
.trilha-dica { font: 600 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); margin-left: 6px; }
.parede { position: relative; perspective: 1400px; height: min(64svh, 560px); overflow: hidden;
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 90%, transparent); }
.metodo-texto { position: relative; z-index: 2; }
.parede::before { content: ''; position: absolute; left: -10%; right: -40%; top: 8%; height: 1px; background: var(--linha-forte); transform: rotate(-3deg); }
.parede-trilho { position: absolute; inset: 0; display: flex; align-items: center; gap: 46px; padding-left: 8%; transform-style: preserve-3d;
                 transform: rotateY(-14deg) translateX(var(--anda, 0px)); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.quadro { flex: none; width: clamp(200px, 22vw, 300px); margin: 0; display: grid; gap: 14px; opacity: .32; filter: saturate(.3) brightness(.7);
          transition: opacity .7s, filter .7s, transform .7s; transform: scale(.94); }
.quadro.aceso { opacity: 1; filter: none; transform: scale(1); }
.quadro-tela { position: relative; padding: 10px; border: 1px solid var(--linha-forte); border-radius: 12px; background: var(--superficie-2); box-shadow: var(--sombra); }
/* a luz de quadro, em cima */
.quadro-tela::before { content: ''; position: absolute; top: -16px; left: 18%; right: 18%; height: 3px; border-radius: 3px; background: var(--forte); opacity: .5; }
.quadro.aceso .quadro-tela::before { opacity: 1; box-shadow: 0 6px 30px 6px color-mix(in srgb, var(--acento) 40%, transparent); background: #FFE2D9; }
.quadro-tela svg { display: block; width: 100%; height: auto; aspect-ratio: 200 / 220; border-radius: 8px; background: var(--superficie); }
.quadro figcaption { font: 600 .62rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); }
@media (max-width: 900px) {
  .metodo { height: 270svh; }
  .metodo-grade { grid-template-columns: 1fr; gap: 18px; }
  .metodo-texto h2 { font-size: 2rem; margin-bottom: 14px; }
  .cartao-etapa { padding: 16px 18px; }
  .cartao-etapa h3 { font-size: 1.5rem; }
  .etapa-num { font-size: 2.4rem; }
  .parede { height: 34svh; order: -1; }
  .parede-trilho { transform: translateX(var(--anda, 0px)); gap: 22px; }
  .quadro { width: 46vw; }
  .trilha-dica { display: none; }
}
/* sem movimento: as cinco etapas viram uma lista comum, sem prender a tela */
@media (prefers-reduced-motion: reduce) {
  .metodo { height: auto; padding: 64px 0; }
  .metodo-palco { position: static; height: auto; overflow: visible; }
  .parede { display: none; }
}
.passe .preco-texto { font-size: 1.7rem; padding-top: 22px; }

/* ---------- quem constrói: a foto do Gabriel numa moldura ----------
   Foto normal, nunca em pontos (o retrato pontilhado foi recusado em
   04/11/2026). Enquanto a foto não chega, a moldura mostra as iniciais —
   Até a foto chegar, fica o monograma GA (plano de site de 09/11/2026, seção 10). */
.sobre-mim { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.retrato { position: relative; margin: 30px 0 30px; }
.retrato::before { content: ''; position: absolute; top: -22px; left: 50%; width: 46%; height: 3px; transform: translateX(-50%); border-radius: 3px;
                   background: #FFD9CC; box-shadow: 0 0 26px 6px color-mix(in srgb, var(--acento) 55%, transparent); }
.retrato-tela { aspect-ratio: 4 / 5; border: 1px solid var(--linha-forte); border-radius: 16px; padding: 10px; background: var(--superficie-2); box-shadow: var(--sombra); }
.retrato-tela span, .retrato-tela img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; object-fit: cover;
                   background: radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--acento) 18%, var(--superficie)), var(--superficie));
                   font: 400 clamp(4rem, 9vw, 7rem) var(--titulo); color: var(--forte); }
.retrato .legenda { left: -18px; bottom: -26px; }
.sobre-mim .lead + .lead { margin-top: -4px; }
@media (max-width: 860px) { .sobre-mim { grid-template-columns: 1fr; } .retrato { max-width: 320px; } }

/* ---------- PT / EN, no lugar do claro/escuro (que ficou só no painel) ---------- */
.idioma { display: inline-flex; padding: 3px; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--pilula-2); }
.idioma a { font: 600 .66rem/1 var(--mono); letter-spacing: .12em; color: var(--texto-suave); text-decoration: none; padding: 8px 10px; border-radius: 999px; }
.idioma a[aria-current] { background: var(--pilula); color: var(--pilula-texto); }
.idioma a:hover:not([aria-current]) { color: var(--forte); }

/* ---------- a lista completa das integrações (09/11/2026): um bloco por
   tipo, cartões com ícone, nome, o que faz e a situação ---------- */
.secao-lista-integ { padding-top: clamp(40px, 6vw, 72px); }
.integ-resumo { display: grid; grid-template-columns: auto 1fr; gap: 18px 36px; align-items: center; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--linha); }
.integ-resumo p { margin: 0; display: grid; font: 500 .9rem var(--corpo); color: var(--texto); }
.integ-resumo p b { font: 400 clamp(2.6rem, 5vw, 3.6rem)/1 var(--titulo); color: var(--forte); }
.integ-resumo p span { font: 600 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); margin-top: 6px; }
.integ-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.integ-atalhos a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--forte);
                   font: 500 .86rem var(--corpo); text-decoration: none; transition: border-color .2s, background .2s; }
.integ-atalhos a small { font: 600 .6rem var(--mono); color: var(--texto-fraco); }
.integ-atalhos a:hover { border-color: var(--acento); background: var(--acento-fundo); }
.tipo-integ { display: grid; grid-template-columns: minmax(200px, .8fr) 2.2fr; gap: 20px clamp(24px, 4vw, 56px); padding: 34px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 90px; }
.tipo-integ header h3 { margin: 10px 0 8px; font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1.1 var(--titulo); color: var(--forte); }
.tipo-integ header p { margin: 0; color: var(--texto); font-size: .92rem; line-height: 1.5; max-width: 34ch; }
.integ-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; align-content: start; }
.integ { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 4px 14px; padding: 16px 16px 14px; border: 1px solid var(--linha); border-radius: 16px;
         background: var(--superficie); transition: border-color .2s, transform .2s; }
.integ:hover { border-color: var(--acento-borda); transform: translateY(-2px); }
.integ-icone { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; }
.integ-icone img, .integ-icone svg { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.integ-icone .envelope { color: var(--forte); padding: 6px; border: 1px solid var(--linha-forte); border-radius: 10px; }
.integ-texto { display: grid; gap: 3px; min-width: 0; }
.integ-texto b { font: 600 1rem var(--corpo); color: var(--forte); }
.integ-texto span { font-size: .84rem; line-height: 1.4; color: var(--texto); }
.integ .estado { grid-column: 2; justify-self: start; margin-top: 6px; }
.integ-legenda { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.integ-fim { align-items: end; }
@media (max-width: 760px) {
  .integ-resumo { grid-template-columns: 1fr; }
  .tipo-integ { grid-template-columns: 1fr; padding: 26px 0; }
  .integ-grade { grid-template-columns: 1fr; }
}
.chamada-final .nota { margin-top: 14px; }

/* ================================================================
   Grade, títulos e respiro (pedido do Gabriel, 10/11/2026: "os títulos
   das páginas internas estão exagerados; o site tem muita informação,
   precisa ser mais leve para leitura")
   ================================================================ */
/* títulos menores: a hierarquia continua, sem o título tomar a tela */
h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.8rem); }
.cabeca-secao h2 { max-width: 18ch; }

/* mais respiro entre as seções */
.secao { padding: clamp(72px, 9vw, 128px) 0; }
.secao-curta { padding-bottom: clamp(56px, 7vw, 96px); }
.cabeca-secao { margin-bottom: clamp(36px, 5vw, 64px); }
/* quando o texto da direita é longo, os dois começam na mesma linha */
.cabeca-topo { align-items: start; margin-bottom: 0; }
.cabeca-topo .lead + .lead { margin-top: 1em; }
.cabeca-topo .acoes { margin-top: 28px; }

/* o topo das páginas internas na mesma grade da home: o título à
   esquerda, o texto à direita, alinhados pela base */
.heroi { padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.heroi-ondas .faixa { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
.heroi-ondas .faixa > .chapeu { grid-column: 1 / -1; }
.heroi-ondas .faixa > h1 { grid-column: 1; grid-row: 2; max-width: 16ch; margin: 0; }
.heroi-ondas .faixa > .lead { grid-column: 2; grid-row: 2; margin: 0; }
.heroi-ondas .faixa > .acoes { grid-column: 2; grid-row: 3; margin-top: 24px; }
@media (max-width: 860px) {
  .heroi-ondas .faixa { grid-template-columns: 1fr; }
  .heroi-ondas .faixa > h1, .heroi-ondas .faixa > .lead, .heroi-ondas .faixa > .acoes { grid-column: 1; grid-row: auto; }
  .heroi-ondas .faixa > .lead { margin-top: 20px; }
}
.duas-colunas h2 { max-width: 18ch; }

/* a caixa das etapas (03 · Como trabalhamos): número, título e texto
   numa ordem só, com altura fixa — a caixa não pula a cada etapa */
.cartao-etapa { display: flex; flex-direction: column; width: 100%; max-width: 440px; min-height: 300px; padding: 26px 30px 30px; }
.cartao-etapa .passe-topo { order: 0; margin-bottom: 22px; }
.cartao-etapa .etapa-num { order: 1; margin: 0 0 14px; padding: 0; border: 0; font-size: 2.6rem; }
.cartao-etapa h3 { order: 2; font-size: 1.65rem; line-height: 1.1; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(11, 11, 12, .14); }
.cartao-etapa p:last-child { order: 3; font-size: .98rem; line-height: 1.6; }
/* a linha embaixo do topo saiu: cortava o título do texto que vem logo
   depois (pedido do Gabriel no Sobre); quem separa agora é o respiro */
.heroi-ondas::after { content: none; }
.passes-base + .nota, .passes + .passes-base + .nota { margin-top: 28px; }

/* ---------- os prints do portfólio (10/11/2026) ----------
   A imagem inteira, larga, com a moldura das outras peças do site; o
   clique abre o arquivo grande (no celular, dá para ampliar com os dedos
   em vez de ler reduzido). A tela de acesso vem menor, ao lado dos botões:
   é detalhe, não prova de nada. */
.print { margin: clamp(36px, 5vw, 56px) 0 0; }
.print a { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha-forte); box-shadow: var(--sombra); background: var(--superficie); transition: transform .3s, box-shadow .3s; }
.print a:hover { transform: translateY(-3px); }
.print img { display: block; width: 100%; height: auto; }
.print figcaption { margin-top: 14px; font-size: .9rem; color: var(--texto-suave); max-width: 60rem; }
.print figcaption span { display: block; margin-top: 4px; font: 600 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
.print-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: end; }
.print-menor { max-width: 520px; }
.print-acoes .acoes { margin-top: 16px; }
.print + .acoes, .print-par + .acoes { margin-top: 28px; }
@media (max-width: 860px) { .print-par { grid-template-columns: 1fr; } .print-menor { max-width: none; } }

/* o botão das conexões menor, só com a chamada; a frase de apoio embaixo,
   centralizada com ele (pedido do Gabriel, 10/11/2026) */
.integracoes-todas { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.chip-todas { grid-template-columns: 30px auto; grid-template-rows: auto; padding: 10px 22px 10px 12px; }
.chip-todas i { grid-row: auto; }
.chip-todas-nota { margin: 0; max-width: 56rem; text-wrap: balance; font: 600 .62rem/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
/* no celular, a chamada quebra antes de "conexões disponíveis": as duas linhas
   ficam do mesmo tamanho, em vez de "disponíveis" sozinho embaixo */
.chip-todas span b { font-weight: inherit; white-space: nowrap; }

/* ---------- celular (10/11/2026, no iPhone 13 Pro do Gabriel) ----------
   1) A caixa das etapas ganhou altura mínima de 300px no computador, e a
   regra vinha DEPOIS da versão compacta do celular — no iPhone, parede +
   título + caixa passavam da altura da tela e a caixa saía cortada. */
@media (max-width: 900px) {
  /* a faixa dos quadros tem altura fixa; o quadro se ajusta a ela para
     aparecer INTEIRO (a luz em cima, a moldura e o desenho). A legenda do
     quadro sai: a caixa logo abaixo já diz qual é a etapa. */
  .parede { height: 30svh; }
  .quadro { width: min(46vw, calc((30svh - 52px) / 1.1)); gap: 0; }
  .quadro figcaption { display: none; }
  .cartao-etapa { min-height: 0; padding: 16px 18px 18px; }
  .cartao-etapa .passe-topo { display: none; }           /* "Etapa 04" repete o número logo abaixo */
  .cartao-etapa .etapa-num { font-size: 2rem; margin-bottom: 8px; }
  .cartao-etapa h3 { font-size: 1.35rem; margin-bottom: 10px; padding-bottom: 10px; }
  .cartao-etapa p:last-child { font-size: .92rem; line-height: 1.5; min-height: 4.5em; } /* 3 linhas: a caixa não pula de tamanho */
}
/* tela baixa (iPhone SE, navegador com barra grande): a parede encolhe mais */
/* tela baixa (iPhone SE e afins): os quadros não caberiam inteiros com o
   título e a caixa — saem, e fica tudo o que importa sem corte */
@media (max-width: 900px) and (max-height: 620px) {
  .parede { display: none; }
  .metodo-texto h2 { font-size: 1.7rem; }
}

/* 2) Tabela mais larga que a tela: diz que há mais para o lado. A coluna
   do recurso fica parada, a borda direita esmaece enquanto houver
   conteúdo, e um aviso aparece em cima (o aviso e as classes vêm do
   site.js, que só os põe quando a tabela de fato rola). */
.tabela-moldura { position: relative; }
.tabela-moldura::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; pointer-events: none;
  border-radius: 0 var(--raio) var(--raio) 0; background: linear-gradient(90deg, transparent, var(--superficie) 85%); opacity: 0; transition: opacity .25s; }
.tabela-moldura.rola::after { opacity: 1; }
.tabela-moldura.rola.no-fim::after { opacity: 0; }
.tabela-moldura.rola th:first-child, .tabela-moldura.rola td:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--linha); }
.tabela-moldura.rola thead th:first-child { background: var(--superficie-2); }
.tabela-dica { display: none; margin: 0 0 10px; font: 600 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.tabela-dica.ve { display: block; }
@media (max-width: 760px) { .tabela-moldura.rola td:first-child, .tabela-moldura.rola th:first-child { min-width: 140px; max-width: 160px; } }

/* Faixa das integrações (pedido do Gabriel, 10/11): nome e "categoria ·
   em breve" centralizados sob a marca; no celular, o botão da lista
   completa mais estreito, com o respiro das laterais mais junto. */
/* 11/11 (pedido do Gabriel, com o balão do Digital Manager Guru como
   modelo): marca, e ao lado dela nome e o que faz, à esquerda e centrados
   na altura da marca; o "Em breve" é uma terceira coluna, na mesma linha
   da marca, ao lado do texto — não mais grudado na categoria. */
.esteira li { grid-template-columns: 30px auto auto; grid-template-rows: auto auto; row-gap: 2px; justify-content: start; }
.esteira li svg, .esteira li b, .esteira li img { grid-column: 1; grid-row: 1 / span 2; }
.esteira li span, .esteira li small { grid-column: 2; text-align: left; justify-self: start; }
.esteira li span { grid-row: 1; align-self: end; }
.esteira li small { grid-row: 2; align-self: start; }
.esteira li .chip-estado { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 600 .56rem var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--leve-2); color: var(--texto); }
.esteira li .chip-estado.estado-sim { background: var(--acento-fundo); color: var(--acento-texto); }
@media (max-width: 760px) {
  .chip-todas { max-width: 286px; padding: 7px 18px 7px 7px; column-gap: 10px; }
  .chip-todas span { font-size: .84rem; line-height: 1.25; text-align: center; }
  .chip-todas i { width: 26px; height: 26px; }
}

/* "O que fazemos" (pedido do Gabriel, 11/11): o que está na cor de destaque
   dentro dos ícones se mexe, como a ligação pontilhada do 02 — devagar,
   e parado para quem pediu menos movimento ao sistema. */
@media (prefers-reduced-motion: no-preference) {
  .vitrine-item .desenho .a { transform-box: fill-box; }
  /* 01: as barras do painel sobem e descem, cada uma no seu tempo */
  [data-servico="0"] .desenho rect.a { transform-origin: 50% 100%; animation: ga-barra 2.8s ease-in-out infinite alternate; }
  [data-servico="0"] .desenho rect.a[x="52"] { animation-delay: -.9s; }
  [data-servico="0"] .desenho rect.a[x="70"] { animation-delay: -1.8s; }
  /* 02: o ponto percorre a ligação entre os dois sistemas */
  [data-servico="1"] .desenho circle.a { cx: 0; cy: 0; offset-path: path("M36 82c0 34 88 34 88 0"); offset-rotate: 0deg; animation: ga-percurso 3.2s ease-in-out infinite alternate; }
  /* 03: o centro do chip pulsa e o sinal corre pelas trilhas */
  [data-servico="2"] .desenho rect.a { animation: ga-pulsa 2.4s ease-in-out infinite; }
  [data-servico="2"] .desenho path.t[d^="M64 58"] { stroke-dasharray: 5 5; animation: corre 1.6s linear infinite; }
  /* 04: a etiqueta da caixa acende, como quem foi conferida */
  [data-servico="3"] .desenho path.a { animation: ga-pulsa 2.6s ease-in-out infinite; }
  /* 05: a linha de código se escreve e o cursor pisca */
  [data-servico="4"] .desenho rect.a[x="34"] { transform-origin: 0 50%; animation: ga-escreve 3s steps(6) infinite; }
  [data-servico="4"] .desenho rect.a[x="108"] { animation: ga-pisca 1s steps(1) infinite; }
  /* 06: o resultado em destaque vai sendo encontrado */
  [data-servico="5"] .desenho rect.a { transform-origin: 0 50%; animation: ga-escreve 3.4s ease-in-out infinite; }
}
@keyframes ga-barra { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes ga-percurso { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes ga-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ga-escreve { 0% { transform: scaleX(.15); } 70%, 100% { transform: scaleX(1); } }
@keyframes ga-pisca { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Paleta azul (11/11/2026): o que não cabe nas variáveis. */
.botao-verde::before, .botao-azul::before { background: #3B32D9; color: #FAFFF3; }
.heroi-casa { background: radial-gradient(900px 520px at 88% 18%, rgba(59, 50, 217, .22), transparent 65%), var(--fundo); }
/* o desenho da primeira dobra: os detalhes em verde (pedido do Gabriel) */
.moldura { --acento: #B9E483; --acento-fundo: rgba(185, 228, 131, .14); }
/* "O que fazemos": o verde dentro dos ícones, com o contorno no azul escuro */
.vitrine-item .desenho .a { fill: #B9E483; stroke: #060431; stroke-width: 1.2; }
.vitrine-item .desenho .c { fill: #FFFFFF; }
/* títulos firmes em toda parte, como na prévia aprovada (vários blocos
   antigos pedem peso 400, que era o certo para a fonte serifada) */
h1, h2, h3, h4 { font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.05 !important; }

/* Ajustes da paleta azul (pedido do Gabriel, 11/11) */
/* 03 · Como trabalhamos: a luz do quadro aceso em verde, e o desenho de
   cada etapa com o detalhe em verde e um movimento próprio (antes só a
   04 tinha, a ligação pontilhada) */
.quadro.aceso .quadro-tela::before { background: #B9E483; box-shadow: 0 6px 30px 6px rgba(185, 228, 131, .45); }
.quadro .desenho { --acento: #B9E483; }
@media (prefers-reduced-motion: no-preference) {
  .quadro .desenho .a, .quadro .desenho .as { transform-box: fill-box; }
  .quadro.aceso[data-quadro="0"] .desenho .as { stroke-dasharray: 30; animation: ga-traco 2.6s ease-in-out infinite; }
  .quadro.aceso[data-quadro="0"] .desenho circle.a { transform-origin: 50% 50%; animation: ga-lupa 2.6s ease-in-out infinite; }
  .quadro.aceso[data-quadro="1"] .desenho .as { stroke-dasharray: 90; animation: ga-traco 3s ease-in-out infinite; }
  .quadro.aceso[data-quadro="1"] .desenho circle.a { animation: ga-pulsa 2.4s ease-in-out infinite; }
  .quadro.aceso[data-quadro="2"] .desenho rect.a { transform-origin: 0 50%; animation: ga-escreve 3s ease-in-out infinite; }
  .quadro.aceso[data-quadro="2"] .desenho circle.a { animation: ga-pisca 1.2s steps(1) infinite; }
  .quadro.aceso[data-quadro="3"] .desenho circle.a { animation: ga-pulsa 2s ease-in-out infinite; }
  .quadro.aceso[data-quadro="4"] .desenho rect.a { transform-origin: 50% 100%; animation: ga-barra 2.6s ease-in-out infinite alternate; }
  .quadro.aceso[data-quadro="4"] .desenho .as { stroke-dasharray: 160; animation: ga-traco 3.2s ease-in-out infinite; }
}
@keyframes ga-traco { 0% { stroke-dashoffset: var(--traco, 160); } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes ga-lupa { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
.quadro[data-quadro="0"] .desenho .as { --traco: 30; }
.quadro[data-quadro="1"] .desenho .as { --traco: 90; }

/* 04 · Conexões: o botão azul royal com a seta e o texto em verde */
.chip-todas { color: #B9E483; }
.chip-todas i { background: #060431; color: #B9E483; }

/* 07 · Planos: passes mais curtos */
.passe-corpo { padding: 18px 18px 16px; }
.passe-topo { margin-bottom: 12px; padding-bottom: 9px; }
.passe h3 { font-size: 1.5rem; margin-bottom: 4px; }
.passe .foco { font-size: .88rem; line-height: 1.3; }
.passe .publico { margin-top: 4px; font-size: .78rem; line-height: 1.35; }
.passe .preco { margin-top: 12px; padding-top: 12px; font-size: 2rem; }
.passe-lista { margin: 12px 0 14px; gap: 6px; }
.passe-lista li { font-size: .84rem; }
/* o botão "Pedir este plano": no passe de destaque o fundo e o texto
   ficavam os dois claros — o texto sumia */
.passe .botao { background: #060431; color: #FAFFF3 !important; }
.passe .botao::before { background: #3B32D9; color: #FAFFF3; }
.passe.destaque .botao { background: #B9E483; color: #060431 !important; }
.passe.destaque .botao::before { background: #060431; color: #B9E483; }