/* BASE de Projetos · landing
   Papel claro, tinta escura e a ameixa tirada dos renders da marca. Títulos em
   Archivo expandido, que conversa com o "BASE" da logo; as telas de exemplo em
   Jost, a fonte do produto. Sem enfeite: hierarquia por tamanho, peso e linhas
   finas, como numa prancha. */

:root {
  --papel: #f8f8f6;
  --papel-2: #f0f1ee;
  --branco: #ffffff;
  --tinta: #29262c;
  --tinta-2: #625d67;
  --tinta-3: #79737e;
  --linha: #dedddf;
  --linha-2: #e9e8eb;
  --ameixa: #2a1433;
  --ameixa-2: #3c2148;
  --ameixa-3: #6a4778;
  --lilas: #d8c6ea;
  --claro: rgba(255, 255, 255, .92);
  --claro-2: rgba(255, 255, 255, .7);
  --claro-linha: rgba(255, 255, 255, .16);
  --lilas-linha: rgba(216, 198, 234, .55);
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-ui: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* O tema das telas de exemplo: a paleta BASE. A personalização troca. */
  --p: #2a1433;
  --d: #9a7bc4;
  --f: #f4f2ee;
  --p-txt: #ffffff;
  --col: #e9e6e0;
  --av: #e7def0;
}

/* A versão escura, mais roxa: o papel vira a ameixa da noite e a tinta, o claro.
   As telas de exemplo continuam claras, como o produto. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --papel: #1d1d20;
  --papel-2: #252529;
  --branco: #2b2b30;
  --tinta: #f3edf6;
  --tinta-2: #c7bccf;
  --tinta-3: #9a8da4;
  --linha: #414147;
  --linha-2: #343439;
  --ameixa-3: #cdb7ea;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 90px; }
body { margin: 0; background: var(--papel); color: var(--tinta); transition: background-color .3s, color .3s; font-family: var(--fonte); font-size: 17px; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:focus-visible { outline: 2px solid var(--ameixa-3); outline-offset: 3px; border-radius: 2px; }

.caixa { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ------------------------------------------------------------------ tipografia */
h1, h2 { font-weight: 560; font-stretch: 108%; letter-spacing: -.034em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(46px, 7.2vw, 104px); max-width: 15ch; }
h2 { font-size: clamp(32px, 4.1vw, 54px); max-width: 19ch; }
h3 { font-size: 19px; font-weight: 620; font-stretch: 104%; letter-spacing: -.012em; line-height: 1.3; }
.texto { margin-top: 20px; max-width: 56ch; font-size: clamp(17px, 1.4vw, 19px); color: var(--tinta-2); text-wrap: pretty; }
.rotulo { margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--ameixa-3); }
.legenda, figcaption { font-size: 13px; color: var(--tinta-3); }

/* ------------------------------------------------------------------ botões */
.botao { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 4px; border: 1px solid transparent; font: 600 15.5px/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.botao-cheio { background: var(--ameixa); color: #fff; }
.botao-cheio:hover { background: var(--ameixa-2); }
.botao-linha { border-color: var(--tinta); color: var(--tinta); }
.botao-linha:hover { background: var(--tinta); color: var(--papel); }
.botao-claro { background: #f5f2ed; color: #2a1433; }
.botao-claro:hover { background: #fff; }
.botao-largo { width: 100%; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ topo */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo-linha { position: relative; display: flex; align-items: center; gap: 36px; height: 72px; }
.topo-logo img { width: 108px; height: auto; }
.topo-nav { display: flex; gap: 30px; margin-left: auto; }
.topo-nav a { font-size: 15px; font-weight: 500; color: var(--tinta-2); text-decoration: none; }
.topo-nav a:hover { color: var(--tinta); }
.topo-acoes { display: flex; align-items: center; gap: 10px; }
.topo-cta { height: 40px; padding: 0 16px; font-size: 14px; }
.tema-botao { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--linha); border-radius: 4px; background: transparent; color: var(--tinta); cursor: pointer; transition: border-color .15s; }
.tema-botao:hover { border-color: var(--tinta); }
.tema-icone { position: relative; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; overflow: hidden; }
.tema-icone::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: currentColor; }
[data-tema="escuro"] .tema-icone::before { left: 50%; }
.topo-menu { display: none; width: 44px; height: 44px; padding: 13px 11px; border: 0; background: transparent; cursor: pointer; }
.topo-menu span { display: block; height: 1.5px; background: var(--tinta); }
.topo-menu span + span { margin-top: 8px; }

/* ------------------------------------------------------------------ abertura */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }
.hero-pe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin-top: clamp(28px, 3.4vw, 44px); }
.hero-sub { max-width: 50ch; font-size: clamp(18px, 1.55vw, 21px); color: var(--tinta-2); text-wrap: pretty; }
.hero-acoes { display: flex; align-items: center; gap: 28px; }
.palco { position: relative; margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 1400 / 788; border-radius: 6px; overflow: hidden; background: var(--papel-2); }
.cena { position: absolute; left: 0; top: 0; width: 1400px; height: 788px; transform-origin: 0 0; }
.cena-esteira { position: absolute; left: 72px; top: 100px; width: 1150px; }
.cena-chat { position: absolute; left: 990px; top: 166px; width: 340px; }
.hero .legenda { margin-top: 14px; }

/* ------------------------------------------------------------------ as telas de exemplo */
.ui { font-family: var(--fonte-ui); font-size: 13px; line-height: 1.35; color: #2a2530; letter-spacing: 0; text-align: left; }
.ui b { font-weight: 600; }
.ui-janela { background: var(--f); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(10, 4, 14, .55), 0 0 0 1px rgba(20, 10, 25, .09); }
.ui-barra { display: flex; align-items: center; gap: 30px; height: 58px; padding: 0 22px; background: #fff; border-bottom: 1px solid #e6e2db; }
.ui-logo { display: flex; align-items: center; height: 40px; min-width: 0; flex: none; }
.ui-logo img { width: auto; max-width: 140px; max-height: 28px; object-fit: contain; }
.ui-abas { display: flex; gap: 24px; align-self: stretch; }
.ui-abas > span { display: flex; align-items: center; font-size: 14px; color: #6f6873; border-bottom: 2px solid transparent; }
.ui-abas > span.ativa { color: #1f1a24; border-bottom-color: var(--p); }
.ui-dir { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ui-perg { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid #ddd8d0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #4c4550; }
.ui-ico-chat { width: 12px; height: 10px; border: 1.4px solid currentColor; border-radius: 2px; }
.ui-sino { width: 15px; height: 15px; border: 1.5px solid #7a7280; border-radius: 8px 8px 3px 3px; }
.ui-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--av); color: #3a3340; font-size: 10.5px; font-style: normal; font-weight: 600; }
.ui-corpo { padding: 20px 22px 24px; }
.ui-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-titulo > b { font-size: 20px; font-weight: 500; color: #1f1a24; }
.ui-acoes { display: flex; gap: 8px; }
.ui-sel, .ui-sec { display: flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #dcd7cf; border-radius: 6px; background: #fff; font-size: 12px; color: #4c4550; white-space: nowrap; }
.ui-btn { display: flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 6px; background: var(--p); color: var(--p-txt); font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s; }
.ui-busca { display: flex; gap: 8px; margin-top: 12px; }
.ui-campo { display: flex; align-items: center; width: 240px; height: 32px; padding: 0 12px; border: 1px solid #dcd7cf; border-radius: 6px; background: #fff; color: #9a939d; font-size: 12px; white-space: nowrap; overflow: hidden; }
.ui-colunas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
.ui-colunas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-col { padding: 10px; border-radius: 10px; background: var(--col); transition: background .3s; }
.ui-col-cab { display: flex; justify-content: space-between; padding: 2px 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #2f2934; }
.ui-col-cab span { font-weight: 400; letter-spacing: 0; color: #938b96; }
.ui-card { padding: 10px 11px 11px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(30, 20, 35, .07); }
.ui-card + .ui-card { margin-top: 8px; }
.ui-nome { font-size: 13px; font-weight: 500; color: #1f1a24; }
.ui-nome b { margin-right: 2px; }
.ui-ff { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 3px; background: #ece8e1; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6f6873; vertical-align: 1px; }
.ui-tipo { margin-top: 1px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #958e98; }
.ui-meio { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 11.5px; color: #6f6873; }
.ui-atraso { color: #a3402f; }
.ui-avs { display: flex; padding-left: 6px; }
.ui-avs i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; background: var(--av); color: #3a3340; font-size: 8.5px; font-style: normal; font-weight: 600; }
.ui-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 10.5px; color: #958e98; }
.ui-prog i { flex: 1; height: 4px; border-radius: 4px; background: #ece9ee; overflow: hidden; }
.ui-prog i::before { content: ""; display: block; width: var(--feito); min-width: 3px; height: 100%; background: var(--d); transition: background .3s; }
.ui-mais { margin-top: 10px; padding: 0 4px; font-size: 11px; color: #938b96; }

/* o Perguntar */
.ui-chat { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -30px rgba(10, 4, 14, .65), 0 0 0 1px rgba(20, 10, 25, .1); }
.ui-chat-cab { padding: 14px 16px 12px; border-bottom: 1px solid #ebe7e1; }
.ui-chat-cab b { display: block; font-size: 15px; color: var(--p); }
.ui-chat-cab span { font-size: 11.5px; color: #8a838d; }
.ui-chat-corpo { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #f7f5f1; }
.ui-eu { align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--p); color: var(--p-txt); font-size: 12.5px; }
.ui-resp { padding: 10px 12px; border: 1px solid #e6e1d9; border-radius: 8px; background: #fff; }
.ui-resp-tit { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #1f1a24; }
.ui-resp-tit u { font-size: 11.5px; color: var(--p); text-underline-offset: 2px; }
.ui-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 8px; border: 1px solid #ebe7e1; border-radius: 6px; overflow: hidden; background: #ebe7e1; }
.ui-nums div { padding: 6px 8px; background: #fff; }
.ui-nums small { display: block; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a838d; }
.ui-nums b { font-size: 12px; color: #1f1a24; }
.ui-resp-txt { font-size: 12.5px; color: #4c4550; }
.ui-resp-txt b { color: #1f1a24; }
.ui-chat-pe { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #ebe7e1; }
.ui-chat-pe .ui-campo { flex: 1; width: auto; }
.ui-lista { margin-top: 6px; }
.ui-lista p { padding: 7px 0; border-top: 1px solid #f0ece6; font-size: 12px; color: #1f1a24; }
.ui-lista small { display: block; font-size: 11px; color: #8a838d; }

/* ------------------------------------------------------------------ parceiros */
.parceiros { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--linha); }
.parceiros-grade { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.parceiros-texto h2 { font-size: clamp(30px, 3.3vw, 44px); }
.parceiros-texto p { margin-top: 14px; max-width: 36ch; color: var(--tinta-2); }
.parceiros-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.parceiro-placa { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 0 13%; border-radius: 4px; }
.parceiro-placa img { width: 100%; height: auto; }
.parceiro-polyana .parceiro-placa { background: #efe6dc; }
.parceiro-andreza .parceiro-placa { padding: 0 17%; background: #0c3d49; }
.parceiro p { margin-top: 12px; font-size: 13px; color: var(--tinta-3); }
.parceiro p b { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); }

/* ------------------------------------------------------------------ os três produtos */
.produtos { padding: clamp(80px, 10vw, 136px) 0; background: var(--papel-2); }
.produtos-grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.produtos-imagem { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #2d133a; }
.produtos-imagem img { width: 100%; height: 100%; object-fit: cover; }
.produtos-lista { margin-top: 36px; border-top: 1px solid var(--tinta); }
.produtos-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome preco" "txt preco"; gap: 3px 24px; padding: 20px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.produtos-lista b { grid-area: nome; font-size: clamp(22px, 2.2vw, 27px); font-weight: 560; font-stretch: 106%; letter-spacing: -.022em; line-height: 1.2; transition: color .15s; }
.produtos-lista span { grid-area: txt; font-size: 16px; color: var(--tinta-2); }
.produtos-lista em { grid-area: preco; align-self: center; font-size: 15px; font-style: normal; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.produtos-lista a:hover b { color: var(--ameixa-3); }
.produtos-juntos { margin-top: 22px; color: var(--tinta-2); }
.produtos-juntos b { color: var(--tinta); }
.juridico-novo { display: inline-block; vertical-align: middle; margin-left: 8px; border: 1px solid var(--linha); padding: 4px 7px; font: 500 10px Jost, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.juridico-grade { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, 6vw, 90px); }
.juridico .olho { margin-bottom: 20px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.juridico .texto { margin-top: 24px; }
.juridico-passos { list-style: none; margin: 32px 0; padding: 0; border-top: 1px solid var(--linha); }
.juridico-passos li { display: flex; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.juridico-passos li > span { padding-top: 3px; font-size: 12px; color: var(--tinta-3); }
.juridico-passos h3 { font-size: 20px; font-weight: 500; }
.juridico-passos p { margin-top: 5px; color: var(--tinta-2); font-size: 16px; line-height: 1.55; }
.juridico-nota { margin-top: 20px; max-width: 420px; font-size: 13px; line-height: 1.6; color: var(--tinta-3); }
.juridico-previa { min-width: 0; padding: clamp(18px, 3vw, 34px); background: #e9e8e2; border: 1px solid #d9d8d2; color: #233b40; }
.juridico-janela { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 26px; font-size: 9px; letter-spacing: .1em; }
.juridico-janela span:last-child { max-width: 120px; text-align: right; }
.juridico-folha { padding: clamp(24px, 3vw, 40px); background: #fff; box-shadow: 0 10px 24px #233b400b; }
.juridico-olho { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid #d9dfde; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.juridico-folha h3 { margin-bottom: 20px; color: #1f4e5f; font-size: clamp(23px, 2.5vw, 31px); font-weight: 450; line-height: 1.2; letter-spacing: -.025em; }
.juridico-folha > p:not(.juridico-olho) { font-size: 14px; line-height: 1.7; }
.juridico-linhas { display: grid; gap: 11px; margin: 28px 0 32px; }
.juridico-linhas i { height: 1px; background: #e2e5e4; }.juridico-linhas i:last-child { width: 64%; }
.juridico-assinatura { display: flex; align-items: center; gap: 12px; padding-top: 19px; border-top: 1px solid #d9dfde; }
.juridico-sinal { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: #eaf0ec; color: #325d4d; }
.juridico-assinatura b { font-size: 14px; font-weight: 500; }.juridico-assinatura p { margin-top: 3px; font-size: 11px; color: #58706c; }
.juridico-previa figcaption { margin-top: 20px; color: #58706c; font-size: 12px; line-height: 1.5; }
@media (max-width: 900px) { .juridico-grade { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ seções de produto */
.sec { padding: clamp(80px, 10vw, 136px) 0; }
.sec-linha { border-top: 1px solid var(--linha); }
.sec-cab { max-width: 780px; }

.prancha { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2.6vw, 36px); border-radius: 4px; background: var(--papel-2); }
.prancha > figcaption { margin-top: clamp(18px, 2.4vw, 28px); padding-top: 12px; border-top: 1px solid var(--linha); }
.encaixe { position: relative; width: 100%; min-width: 0; overflow: hidden; }
/* a sombra da janela passa da caixa sem ser cortada (quando a tela inteira cabe) */
@supports (overflow-clip-margin: 1px) { .encaixe:not(.cortada) { overflow: clip; overflow-clip-margin: 56px; } }
.encaixe > * { transform-origin: 0 0; }
.encaixe.cortada { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }

.esteira-pranchas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
.esteira-pranchas .prancha > .encaixe { margin: auto 0; }

/* o detalhe do card, com as linhas de chamada */
.detalhe { position: relative; width: 560px; height: 270px; }
.ui-card-grande { position: absolute; left: 170px; top: 54px; width: 220px; padding: 16px 18px 18px; border-radius: 12px; box-shadow: 0 24px 44px -26px rgba(30, 15, 40, .4), 0 0 0 1px rgba(20, 10, 25, .07); }
.ui-card-grande .ui-nome { font-size: 17px; line-height: 23px; }
.ui-card-grande .ui-tipo { margin-top: 2px; font-size: 11.5px; }
.ui-card-grande .ui-meio { height: 30px; margin-top: 18px; font-size: 14px; }
.ui-card-grande .ui-avs i { width: 30px; height: 30px; margin-left: -8px; font-size: 10.5px; }
.ui-card-grande .ui-prog { height: 16px; margin-top: 30px; font-size: 12.5px; }
.ui-card-grande .ui-prog i { height: 6px; }
.chamada { position: absolute; width: 144px; font-size: 14.5px; font-weight: 560; line-height: 18px; color: var(--tinta); white-space: nowrap; }
.chamada::before { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ameixa-3); }
.chamada::after { content: ""; position: absolute; top: 50%; height: 1px; background: var(--ameixa-3); }
/* cada chamada aponta para a linha do card: dias e pessoas na do meio (y 144), o checklist na de baixo (y 197) */
.chamada-1 { left: 0; top: 135px; text-align: right; }
.chamada-1::after { left: 152px; width: 28px; }
.chamada-1::before { left: 180px; }
.chamada-2 { left: 416px; top: 135px; }
.chamada-2::after { right: 152px; width: 26px; }
.chamada-2::before { right: 178px; }
.chamada-3 { left: 416px; top: 188px; }
.chamada-3::after { right: 152px; width: 26px; }
.chamada-3::before { right: 178px; }

/* a semana da equipe */
.ui-semana { width: 560px; }
.ui-sem-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fff; border-bottom: 1px solid #e6e2db; }
.ui-sem-cab b { font-size: 15px; font-weight: 500; color: #1f1a24; }
.ui-seg { display: flex; border: 1px solid #dcd7cf; border-radius: 6px; overflow: hidden; }
.ui-seg span { padding: 5px 10px; font-size: 11.5px; color: #6f6873; background: #fff; }
.ui-seg span + span { border-left: 1px solid #dcd7cf; }
.ui-seg .ativa { background: var(--p); color: var(--p-txt); }
.ui-sem-dias, .ui-sem-linha { display: grid; grid-template-columns: 130px repeat(5, minmax(0, 1fr)); }
.ui-sem-dias { padding: 10px 0 8px; border-bottom: 1px solid #e6e2db; background: #fbfaf8; }
.ui-sem-dias span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a838d; text-align: center; }
/* as linhas dos dias são bordas de verdade (degradê repetido sai errado em PDF) */
.ui-sem-linha { position: relative; z-index: 0; align-items: center; min-height: 70px; padding: 8px 0; border-bottom: 1px solid #ece8e2; }
.ui-sem-linha::before, .ui-sem-linha::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 87px; border-left: 1px solid #f0ece6; border-right: 1px solid #f0ece6; }
.ui-sem-linha::before { left: 215px; }
.ui-sem-linha::after { left: 387px; }
.ui-sem-linha:last-child { border-bottom: 0; }
.ui-sem-quem { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; }
.ui-sem-quem p { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: #1f1a24; }
.ui-sem-quem small { display: block; font-size: 10.5px; font-weight: 400; color: #8a838d; }
.ui-carga { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: #ece9ee; overflow: hidden; }
.ui-carga i { display: block; width: var(--carga); height: 100%; background: var(--d); }
.ui-carga-alta i { background: #a3402f; }
.ui-tarefa { grid-row: 1; grid-column: var(--de) / var(--ate); margin: 0 4px; padding: 7px 8px; border-left: 3px solid var(--d); border-radius: 4px; background: color-mix(in srgb, var(--d) 18%, #fff); font-size: 11.5px; color: #2a2530; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-tarefa-ff { border-left-color: #a3402f; background: #f6e7e3; }

/* o orçamento e a proposta */
/* a proposta encosta só na borda do orçamento: os valores ficam à vista */
.ui-dupla { position: relative; width: 826px; padding: 0 186px 60px 0; }
.ui-orc { width: 640px; }
.ui-orc-cab { padding: 18px 20px 14px; background: #fff; }
.ui-orc-cab > small { display: block; font-size: 11px; color: #8a838d; }
.ui-orc-cab p { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.ui-orc-cab p b { font-size: 24px; font-weight: 300; color: #1f1a24; }
.ui-selo { padding: 3px 7px; border: 1px solid #d9d3ca; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6f6873; }
.ui-orc-abas { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 20px; border: 1px solid #ddd8d0; background: #fff; }
.ui-orc-abas span { padding: 9px; font-size: 12px; text-align: center; color: #4c4550; }
.ui-orc-abas span + span { border-left: 1px solid #ddd8d0; }
.ui-orc-abas .ativa { background: var(--p); color: var(--p-txt); }
.ui-orc-grade { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; padding: 14px 20px 20px; }
.ui-orc-tabela { padding: 4px 14px 8px; border: 1px solid #e3ded6; background: #fff; }
.ui-orc-tabela p, .ui-orc-resumo p { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 11.5px; border-bottom: 1px solid #f0ece6; }
.ui-orc-tabela p:last-child { border-bottom: 0; }
.ui-orc-tit { margin-bottom: 4px; font-size: 13.5px !important; color: #1f1a24; }
.ui-orc-tit span:last-child { color: #6f6873; font-size: 12px; }
.ui-orc-soma { margin: 2px -8px; padding: 7px 8px !important; background: #f3f0ea; font-weight: 600; color: #1f1a24; }
.ui-orc-resumo { align-self: start; border: 1px solid #e3ded6; background: #fff; }
.ui-orc-resumo p { margin: 0 12px; }
.ui-orc-rot { padding: 10px 0 !important; font-size: 9.5px !important; letter-spacing: .14em; text-transform: uppercase; color: #6f6873; }
.ui-orc-sep { border-top: 1px solid #e3ded6; }
.ui-orc-final { margin-top: 6px; padding: 12px 14px 14px; background: var(--p); color: var(--p-txt); transition: background .3s; }
.ui-orc-final small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ui-orc-final b { font-size: 22px; font-weight: 300; }
.ui-proposta { position: absolute; right: 0; bottom: 0; width: 210px; aspect-ratio: 210 / 297; padding: 18px 18px 16px; border-radius: 3px; background: #fff; box-shadow: 0 36px 60px -30px rgba(10, 4, 14, .55), 0 0 0 1px rgba(20, 10, 25, .08); }
.ui-prop-logo { display: flex; align-items: center; height: 26px; }
.ui-prop-logo img { width: auto; max-width: 110px; max-height: 22px; object-fit: contain; }
.ui-prop-tit { margin-top: 22px; font-size: 15px; font-weight: 300; color: var(--p); transition: color .3s; }
.ui-prop-cli { margin-top: 6px; font-size: 13px; font-weight: 600; color: #1f1a24; }
.ui-prop-sub { font-size: 9.5px; color: #8a838d; }
.ui-prop-faixa { height: 46px; margin: 14px 0 12px; border-radius: 2px; background: linear-gradient(90deg, var(--p), var(--d)); transition: background .3s; }
.ui-prop-rot { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #8a838d; }
.ui-prop-valor { font-size: 15px; font-weight: 500; color: #1f1a24; }

/* o painel do financeiro */
.ui-fin { width: 720px; background: #f7f5f1; }
.ui-fin-cab { padding: 18px 22px 16px; background: #fff; border-bottom: 1px solid #e6e2db; }
.ui-fin-cab > small { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a838d; }
.ui-fin-cab p { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ui-fin-cab p b { font-size: 25px; font-weight: 300; color: #1f1a24; }
.ui-fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 22px 0; border: 1px solid #cfc8bd; background: #fff; }
.ui-fin-kpis div { padding: 12px 14px 14px; }
.ui-fin-kpis div + div { border-left: 1px solid #e3ded6; }
.ui-fin-kpis small { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #8a838d; }
.ui-fin-kpis b { display: block; margin-top: 6px; font-size: 21px; font-weight: 300; color: #1f1a24; }
.ui-verde { color: #3d6b47 !important; }
.ui-vermelho { color: #a3402f !important; }
.ui-fin-bloco { margin: 14px 22px 0; padding: 12px 14px 12px; border: 1px solid #e3ded6; background: #fff; }
.ui-fin-bloco:last-child { margin-bottom: 22px; }
.ui-fin-tit { font-size: 14px; color: #1f1a24; }
.ui-meses { margin-top: 8px; }
.ui-mes { display: grid; grid-template-columns: 78px 1fr 84px 70px; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid #f0ece6; font-size: 11.5px; color: #4c4550; }
.ui-mes > span:nth-child(3), .ui-mes > span:nth-child(4) { text-align: right; }
.ui-barras { display: flex; flex-wrap: wrap; gap: 3px 0; }
.ui-barras i { height: 5px; width: var(--v); }
.ui-barras i.d { flex-basis: 100%; max-width: var(--v); }
.ui-barras .r { background: #3d6b47; }
.ui-barras .d { background: #c66a57; }
.ui-barras .r.prev { background: #a9c4ae; }
.ui-barras .d.prev { background: #e5b9ae; }
.ui-mes-prev { color: #8a838d; }
.ui-fin-nota { margin-top: 6px; font-size: 10px; color: #8a838d; }
.ui-parcela { display: grid; grid-template-columns: 1fr auto 96px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #f0ece6; font-size: 12px; }
.ui-parcela:first-of-type { margin-top: 6px; }
.ui-parcela small { display: block; font-size: 10.5px; color: #8a838d; }
.ui-parcela > b { text-align: right; font-weight: 500; }
.ui-chip { padding: 3px 8px; border: 1px solid #d9d3ca; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6f6873; }
.ui-chip-ruim { border-color: #e2b6ab; color: #a3402f; }

/* ------------------------------------------------------------------ comercial e financeiro: texto e tela lado a lado */
.dividido { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.dividido > *, .esteira-pranchas > *, .juntos-grade > *, .precos-grade > *, .produtos-grade > *, .comeco-grade > *, .duvidas-grade > *, .final-grade > *, .parceiros-grade > *, .hero-pe > * { min-width: 0; }
.dividido-invertido { grid-template-columns: 7fr 5fr; }
.dividido h2 { font-size: clamp(30px, 3.3vw, 46px); }
.sec-cab h2 { max-width: 22ch; }
.dividido-invertido .dividido-texto { order: 2; }
.ficha { margin-top: clamp(40px, 5vw, 56px); }
.ficha-estreita { margin-top: 36px; }
.ficha-tit { padding-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--tinta-3); border-bottom: 1px solid var(--tinta); }
.ficha dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.ficha-estreita dl { grid-template-columns: 1fr; }
.ficha dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.ficha dt { font-weight: 600; }
.ficha dd { color: var(--tinta-2); }

/* ------------------------------------------------------------------ juntos */
.escuro { background: var(--ameixa); color: #fff; }
.juntos { padding: clamp(88px, 11vw, 144px) 0; background: var(--papel-2); }
.juntos h2 { color: var(--tinta); }
.juntos-grade { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(44px, 5vw, 64px); }
.fluxo { position: relative; }
.no { position: relative; padding: 18px 20px; border: 1px solid var(--linha); border-radius: 4px; background: var(--branco); }
.no b { display: block; font-size: 16px; font-weight: 620; }
.no span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.no-origem { max-width: 330px; margin: 0 auto; text-align: center; }
.no-origem::after { content: ""; position: absolute; left: 50%; bottom: -33px; width: 1px; height: 32px; background: var(--lilas-linha); }
.ramos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.ramos::before { content: ""; position: absolute; top: -32px; left: calc((100% - 24px) / 4); right: calc((100% - 24px) / 4); height: 1px; background: var(--lilas-linha); }
.ramos .no::before { content: ""; position: absolute; left: 50%; top: -33px; width: 1px; height: 26px; background: var(--lilas-linha); }
.ramos .no::after { content: ""; position: absolute; left: calc(50% - 4px); top: -8px; border: 4px solid transparent; border-top: 6px solid var(--lilas); }
.fluxo-pe { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 15px; color: var(--tinta-2); }
.juntos-perguntar h3 { font-size: 24px; font-stretch: 106%; }
.juntos-perguntar > p { margin-top: 10px; font-size: 16px; color: var(--tinta-2); }
.ui-chat-solto { margin-top: 24px; }

/* ------------------------------------------------------------------ sua marca */
.estudio { --papel: #f8f8f6; --papel-2: #f0f1ee; --tinta: #29262c; --tinta-2: #625d67; --tinta-3: #79737e; --linha: #dedddf; --linha-2: #e9e8eb; --ameixa-3: #6a4778; color: var(--tinta); color-scheme: light; margin-top: clamp(40px, 5vw, 56px); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -50px rgba(30, 15, 40, .5), 0 0 0 1px rgba(20, 10, 25, .07); }
.estudio-barra { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 22px; border-bottom: 1px solid var(--linha-2); font-size: 13px; color: var(--tinta-3); }
.estudio-barra img { width: 70px; height: auto; }
.estudio-barra span { padding-left: 14px; border-left: 1px solid var(--linha); }
.estudio-corpo { display: grid; grid-template-columns: 400px minmax(0, 1fr); }
.estudio-painel { padding: 30px 30px 32px; border-right: 1px solid var(--linha-2); }
.estudio-painel h3 { font-size: 26px; font-weight: 520; font-stretch: 106%; letter-spacing: -.02em; }
.estudio-sub { margin-top: 4px; font-size: 14px; color: var(--tinta-2); }
.etapa { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha-2); }
.etapa-rot { font-size: 14px; font-weight: 650; }
.logo-caixa { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 76px; margin-top: 12px; padding: 14px 16px; border: 1px dashed #c9c2cf; border-radius: 6px; transition: border-color .15s; }
.logo-atual { display: flex; align-items: center; min-width: 0; }
.logo-atual img { max-width: 200px; max-height: 44px; object-fit: contain; }
.botao-mini { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.botao-mini:hover { border-color: var(--tinta); }
.dica { margin-top: 8px; font-size: 12.5px; color: var(--tinta-3); }
.paletas { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.paleta { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--linha); border-radius: 6px; background: #fff; font: 600 11.5px/1.2 var(--fonte); color: var(--tinta); text-align: center; cursor: pointer; }
.paleta:hover { border-color: #b4adb8; }
.paleta[aria-checked="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.paleta-cores { display: flex; height: 24px; border-radius: 3px; overflow: hidden; }
.paleta-cores i { flex: 1; }
.paleta-minha .paleta-cores { background: conic-gradient(from 200deg, #e07a6a, #e7c06a, #8fbf7a, #6aa9d6, #a58ad6, #d98ab6, #e07a6a); }
.cores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.cor { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid var(--linha); border-radius: 6px; cursor: pointer; }
.cor:focus-within { border-color: var(--tinta); }
.cor input[type="color"] { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cor input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; }
.cor input[type="color"]::-moz-color-swatch { border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; }
.cor > span { display: flex; flex-direction: column; min-width: 0; }
.cor small { font-size: 10.5px; color: var(--tinta-3); white-space: nowrap; }
.cor input[type="text"] { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font: 600 12px var(--fonte); color: var(--tinta); text-transform: uppercase; }
.cor input[type="text"]:focus { outline: none; }
.botao-tema { margin-top: 26px; background: var(--p); color: var(--p-txt); transition: background .3s, color .3s; }
.botao-tema:hover { filter: brightness(1.12); }
.estudio-previa { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 28px; background: var(--papel-2); }
.ui-janela-previa { width: 680px; }
.ui-proposta-larga { position: static; width: auto; aspect-ratio: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 24px; padding: 20px 22px; border-radius: 8px; box-shadow: 0 16px 36px -26px rgba(10, 4, 14, .5), 0 0 0 1px rgba(20, 10, 25, .07); }
.ui-proposta-larga .ui-prop-logo { height: 44px; }
.ui-proposta-larga .ui-prop-logo img { max-width: 150px; max-height: 40px; }
.ui-proposta-larga .ui-prop-tit { margin: 0; font-size: 20px; }
.ui-proposta-larga .ui-prop-sub { margin-top: 2px; font-size: 11.5px; }
.ui-proposta-larga .ui-prop-faixa { grid-column: 1 / -1; height: 40px; margin: 10px 0 0; }

.marca-txt { display: flex; flex-direction: column; line-height: 1.1; color: var(--p); transition: color .3s; }
.marca-txt b { font-size: 15px; font-weight: 300; letter-spacing: .32em; }
.marca-txt small { margin-top: 3px; font-size: 7px; letter-spacing: .28em; text-transform: uppercase; }
.marca-txt.serif b { font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-style: italic; font-weight: 400; letter-spacing: 0; }
.marca-txt.serif small { letter-spacing: .2em; }
.marca-txt.folha b { font-size: 13px; font-weight: 700; letter-spacing: .18em; }

/* ------------------------------------------------------------------ preços */
.precos { padding: clamp(80px, 10vw, 136px) 0; background: var(--papel-2); }
.precos-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.precos-apresentacao { max-width: 32ch; font-size: 18px; color: var(--tinta-2); }
.plano-selo { margin-bottom: 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.previa-deslizar { display: none; }
.alternar { display: inline-flex; padding: 4px; border: 1px solid var(--linha); border-radius: 6px; background: var(--papel); }
.alt { height: 40px; padding: 0 16px; border: 0; border-radius: 4px; background: transparent; font: 600 14.5px var(--fonte); color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.alt[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.precos-grade { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(40px, 5vw, 56px); }
.plano { padding: clamp(28px, 3vw, 40px); border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); color: var(--tinta); }
.plano h3 { font-size: 30px; font-weight: 640; font-stretch: 112%; letter-spacing: -.02em; }
.plano-desc { margin-top: 6px; color: var(--tinta-2); }
.plano-preco { display: flex; align-items: baseline; gap: 8px; margin-top: 30px; }
.plano-preco span { font-size: 20px; color: var(--tinta-2); }
.plano-preco b { font-size: clamp(64px, 7vw, 84px); font-weight: 600; font-stretch: 104%; letter-spacing: -.045em; line-height: .9; }
.plano-preco small { font-size: 15px; color: var(--tinta-2); }
.plano-nota { min-height: 3em; margin-top: 12px; font-size: 14px; color: var(--tinta-2); }
.plano-lista { margin: 18px 0 30px; border-top: 1px solid var(--linha); }
.plano-lista li { padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 15.5px; color: var(--tinta-2); }
.avulsos-tit { padding-bottom: 14px; border-bottom: 1px solid var(--tinta); font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.avulso { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--linha); }
.avulso h3 { font-size: 21px; font-weight: 600; }
.avulso p { margin-top: 2px; font-size: 15px; color: var(--tinta-2); }
.avulso-preco { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.avulso-preco span { font-size: 14px; color: var(--tinta-3); }
.avulso-preco b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; }
.avulso-preco small { font-size: 13px; color: var(--tinta-3); }
.avulsos-nota { margin-top: 18px; font-size: 15px; color: var(--tinta-2); }
.precos-inclui { margin-top: clamp(32px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--linha); font-size: 15px; color: var(--tinta-2); }

/* ------------------------------------------------------------------ como começa */
.comeco-grade { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.comeco-imagem { order: 2; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: #230d27; }
.comeco-imagem img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; }
.comeco-passos { margin-top: 32px; border-top: 1px solid var(--tinta); }
.comeco-passos div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.comeco-passos dt { font-weight: 620; }
.comeco-passos dd { color: var(--tinta-2); }

/* ------------------------------------------------------------------ dúvidas */
.duvidas-grade { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 96px); }
.duvidas-cab .texto { font-size: 16px; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--tinta); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 18px; font-weight: 560; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px; background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62ch; padding: 0 0 22px; color: var(--tinta-2); }

/* ------------------------------------------------------------------ chamada final e rodapé */
.final { padding: clamp(88px, 11vw, 144px) 0; background: var(--papel-2); }
.final-grade { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.final h2 { max-width: 14ch; font-size: clamp(40px, 5.6vw, 80px); color: var(--tinta); }
.final .texto { margin-top: 0; color: var(--tinta-2); }
.final .botao { margin-top: 34px; }
.final-insta { margin-top: 18px; font-size: 15px; color: var(--tinta-2); }
.final-insta a { color: var(--tinta); }
.final-imagem { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #250c33; }
.final-imagem img { width: 100%; height: 100%; object-fit: cover; }
.rodape { padding: 32px 0; border-top: 1px solid var(--linha); }
.rodape-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 14px; color: var(--tinta-3); }
.rodape-linha img { width: 86px; height: auto; }
.rodape-dir { margin-left: auto; }

/* ------------------------------------------------------------------ versão escura: os acertos */
[data-tema="escuro"] .topo { background: rgba(29, 29, 32, .92); }
[data-tema="escuro"] .topo-logo img, [data-tema="escuro"] .rodape-linha img { filter: brightness(0) invert(1); }
[data-tema="escuro"] .botao-cheio { background: #ece3f4; color: #22102b; }
[data-tema="escuro"] .botao-cheio:hover { background: #fff; }
[data-tema="escuro"] .palco, [data-tema="escuro"] .produtos-imagem, [data-tema="escuro"] .comeco-imagem, [data-tema="escuro"] .final-imagem { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
[data-tema="escuro"] .plano { background: var(--branco); }
[data-tema="escuro"] .ui-janela, [data-tema="escuro"] .ui-chat, [data-tema="escuro"] .ui-proposta { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ telas menores */
@media (max-width: 1080px) {
  .estudio-corpo { grid-template-columns: 1fr; }
  .estudio-painel { border-right: 0; border-bottom: 1px solid var(--linha-2); }
  .esteira-pranchas { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topo-menu { display: block; }
  .topo-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; margin: 0; padding: 4px clamp(20px, 4vw, 48px) 18px; background: var(--papel); border-bottom: 1px solid var(--linha); }
  .topo-nav.aberto { display: flex; }
  .topo-nav a { padding: 14px 0; border-bottom: 1px solid var(--linha-2); font-size: 17px; }
  .topo-acoes { margin-left: auto; }
  .hero-pe { grid-template-columns: 1fr; gap: 28px; }
  .parceiros-grade, .produtos-grade, .dividido, .dividido-invertido, .juntos-grade, .precos-grade, .comeco-grade, .duvidas-grade, .final-grade { grid-template-columns: 1fr; }
  .dividido-invertido .dividido-texto { order: 0; }
  .produtos-imagem { aspect-ratio: 16 / 10; }
  .comeco-imagem { order: 0; aspect-ratio: 16 / 10; }
  .final-imagem { display: none; }
  .ficha dl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topo-linha { height: 64px; gap: 16px; }
  .topo-logo img { width: 96px; }
  .topo-cta { height: 38px; padding: 0 12px; font-size: 13px; }
  .hero-acoes { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-acoes .link { align-self: flex-start; }
  .parceiros-lista { grid-template-columns: 1fr; }
  .ficha dl div, .comeco-passos div { grid-template-columns: 1fr; gap: 2px; }
  .produtos-lista a { grid-template-columns: 1fr; grid-template-areas: "nome" "txt" "preco"; }
  .produtos-lista em { align-self: start; margin-top: 6px; }
  /* o detalhe do card vira legenda: o card em cima, as chamadas embaixo */
  .encaixe-detalhe { --encaixar: 0; height: auto !important; }
  .encaixe-detalhe .detalhe { width: auto; height: auto; transform: none !important; }
  .detalhe .ui-card-grande { position: static; width: 100%; max-width: 300px; margin: 6px auto 20px; }
  .chamada { position: relative; display: block; width: auto; padding: 8px 0 8px 18px; border-top: 1px solid var(--linha); text-align: left; }
  .detalhe .chamada { left: auto; top: auto; }
  .detalhe .chamada::before { left: 0; right: auto; }
  .chamada::after { display: none; }
  /* no celular, o orçamento sem a proposta por cima */
  .ui-dupla { width: 640px; padding: 0; }
  .ui-dupla .ui-proposta { display: none; }
  .estudio-painel, .estudio-previa { padding: 22px 18px; }
  .paletas { --n: 3 !important; }
  .cores { grid-template-columns: 1fr; }
  .avulso { flex-direction: column; align-items: flex-start; gap: 8px; }
  .alternar { width: 100%; }
  .alt { flex: 1; padding: 0 8px; font-size: 14px; }
  .rodape-dir { margin-left: 0; }
}
@media (max-width: 420px) {
  .topo-cta { display: none; }
}

/* Rafael (20/10): as janelas de demonstração precisam caber e ser legíveis no celular. */
@media (max-width: 760px) {
  .palco { padding: 14px; aspect-ratio: auto; height: auto; }
  .cena { position: static; width: auto; height: auto; transform: none !important; }
  .cena-esteira, .cena-chat { position: static; width: 100%; }
  .cena-chat { margin-top: 16px; }
  .cena .ui-barra, .ui-janela-previa .ui-barra { height: 52px; gap: 14px; padding: 0 12px; }
  .cena .ui-logo img, .ui-janela-previa .ui-logo img { max-width: 100px; max-height: 24px; }
  .cena .ui-abas, .ui-janela-previa .ui-abas { gap: 12px; }
  .cena .ui-abas > span:not(.ativa), .ui-janela-previa .ui-abas > span:not(.ativa) { display: none; }
  .cena .ui-dir, .ui-janela-previa .ui-dir { margin-left: auto; }
  .cena .ui-perg, .cena .ui-sino { display: none; }
  .cena .ui-corpo, .ui-janela-previa .ui-corpo { padding: 14px 12px; }
  .cena .ui-titulo > b, .ui-janela-previa .ui-titulo > b { font-size: 17px; }
  .cena .ui-acoes .ui-sel, .cena .ui-acoes .ui-sec { display: none; }
  .cena .ui-titulo, .ui-janela-previa .ui-titulo { flex-wrap: wrap; }
  .cena .ui-busca .ui-campo { flex: 1; min-width: 0; width: auto; }
  .cena .ui-colunas, .ui-janela-previa .ui-colunas { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .cena .ui-colunas > .ui-col, .ui-janela-previa .ui-colunas > .ui-col { flex: 0 0 calc(100% - 24px); min-width: 0; scroll-snap-align: start; }
  .cena .ui-nome, .ui-janela-previa .ui-nome { font-size: 14px; }
  .previa-deslizar { display: block; margin-top: 14px; font-size: 11px; color: #6f6873; }
  .cena .ui-colunas { margin-top: 8px; }
  .encaixe[data-largura] { --encaixar: 0; height: auto !important; overflow-x: auto; }
  .encaixe[data-largura] > * { transform: none !important; }
  .ui-semana { width: 560px; }
  .ui-dupla, .ui-orc, .ui-fin, .ui-janela-previa { width: 100%; }
  .ui-dupla { padding: 0; }
  .ui-dupla .ui-proposta { display: none; }
  .ui-orc-cab { padding: 16px; }
  .ui-orc-cab p { flex-wrap: wrap; }
  .ui-orc-abas { display: flex; flex-wrap: wrap; gap: 0; margin: 0 12px; padding: 0; }
  .ui-orc-abas span { flex: 1 1 auto; }
  .ui-orc-grade { grid-template-columns: minmax(0, 1fr); }
  .ui-orc-tabela p { gap: 10px; }
  .ui-orc-tabela p > span:last-child { flex: none; white-space: nowrap; }
  .ui-fin-cab { padding: 16px; }
  .ui-fin-cab p { flex-wrap: wrap; gap: 8px; }
  .ui-fin-kpis { grid-template-columns: 1fr; margin: 14px 12px 0; }
  .ui-fin-kpis div + div { border-left: 0; border-top: 1px solid #e3ded6; }
  .ui-fin-kpis small { font-size: 10px; }
  .ui-fin-bloco { margin: 12px 12px 0; padding: 12px; }
  .ui-mes { grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 12px; }
  .ui-mes > span:first-child { grid-column: 1 / -1; font-weight: 600; }
  .ui-mes .ui-barras { grid-column: 1 / -1; }
  .ui-mes > span:nth-child(3) { text-align: left; }
  .ui-fin-bloco .ui-parcela { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .ui-parcela .ui-chip { grid-column: 1; grid-row: 2; justify-self: start; }
  .ui-parcela > b { grid-column: 2; grid-row: 1 / span 2; }
  .ui-janela-previa .ui-busca { flex-wrap: wrap; }
  .plano-preco { flex-wrap: wrap; }
}

/* Rafael (20/10): superfícies neutras e roxo concentrado na identidade e nos controles. */
.palco { border: 1px solid var(--linha); }
.produtos-imagem, .comeco-imagem { background: var(--papel-2); }
.produtos-imagem img, .comeco-imagem img { filter: saturate(.55); }
.juntos .no-origem::after, .juntos .ramos::before, .juntos .ramos .no::before { background: var(--linha); }
.juntos .ramos .no::after { border-top-color: var(--linha); }
.final { border-top: 1px solid var(--linha); background: var(--papel); }
.final-grade { align-items: center; }

/* Rafael, 20/10: login geral da BASE sempre visível, inclusive no celular. */
.topo-entrar { height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 1080px) { .topo-cta { display: none; } }
@media (max-width: 640px) {
  .topo-linha { gap: 10px; }
  .topo-acoes { gap: 6px; }
  .topo-entrar { padding: 0 10px; }
}