/* 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".

   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: #070708; --superficie: #111113; --superficie-2: #18181B;
  --linha: rgba(255, 255, 255, .09); --linha-forte: rgba(255, 255, 255, .2);
  --leve: rgba(255, 255, 255, .04); --leve-2: rgba(255, 255, 255, .08);
  --forte: #FFFFFF; --texto: #E9E8E4; --texto-suave: #9C9B98; --texto-fraco: #67666A;
  --acento: #FF5A36; --acento-texto: #FF6A48; --acento-fundo: rgba(255, 90, 54, .1); --acento-borda: rgba(255, 90, 54, .45);
  --pilula: #FFFFFF; --pilula-texto: #0B0B0C; --pilula-2: rgba(255, 255, 255, .06);
  --sombra: 0 30px 80px rgba(0, 0, 0, .55);
  --erro: #FF8A80;
  color-scheme: dark;
}
:root[data-tema="claro"], :root:not([data-tema="claro"]) .secao-gelo {
  --fundo: #F3EFE8; --superficie: #FBF9F5; --superficie-2: #E8E3DA;
  --linha: rgba(20, 18, 14, .1); --linha-forte: rgba(20, 18, 14, .22);
  --leve: rgba(20, 18, 14, .04); --leve-2: rgba(20, 18, 14, .08);
  --forte: #0B0B0C; --texto: #26252A; --texto-suave: #5C5A57; --texto-fraco: #8C8984;
  --acento: #FF5A36; --acento-texto: #C2401F; --acento-fundo: rgba(255, 90, 54, .09); --acento-borda: rgba(194, 64, 31, .38);
  --pilula: #0B0B0C; --pilula-texto: #FFFFFF; --pilula-2: rgba(20, 18, 14, .05);
  --sombra: 0 30px 70px rgba(60, 50, 30, .16);
  --erro: #B3261E;
  color-scheme: light;
}
:root {
  --raio: 16px;
  --largura: 1240px;
  --titulo: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --corpo: 'Wix Madefor Text', 'Inter', 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: var(--acento); color: #0B0B0C; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; line-height: 1.02; color: var(--forte); margin: 0 0 .45em; letter-spacing: -.01em; }
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, em itálico e na cor de destaque */
h1 em, h2 em, .titulo-gigante em { font-style: italic; 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; }
.heroi-casa h1 { font-size: clamp(2.8rem, 6.2vw, 5.4rem); max-width: 10ch; }
.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: #F7F4EF; --tinta: #0B0B0C; --tinta-suave: #55524D; --picote: rgba(11, 11, 12, .32);
         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-suave); font-size: .9rem; }
.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: var(--acento); --tinta-suave: #2A1009; --picote: rgba(11, 11, 12, .45); filter: drop-shadow(0 20px 36px rgba(255, 90, 54, .3)); }
.passe.destaque .passe-lista li::before { background: var(--tinta); color: var(--acento); }

.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 */
.integracoes-todas { display: flex; justify-content: center; margin-top: 26px; }
.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: #F4F1EC; color: #0B0B0C; 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; }