/* ============================================================
   DESIGN IDEAL · identidade 2026 (versão 2 do site, 23/10/2026)
   A mesma dos dashboards e do Instagram @design.ideal: preto e branco,
   Archivo nos títulos e no corpo, DM Mono nos rótulos, cantos retos e
   telas alternando preto e branco, como o xadrez da grade.

   Só visual. Carrega DEPOIS do site.css e sobrescreve cor, fonte e forma.
   Nenhum HTML, título, URL ou schema muda por causa deste arquivo, porque
   o SEO das páginas já está trabalhado (pedido do Renato). Para voltar ao
   visual anterior, basta tirar o <link> deste arquivo e o das fontes do
   includes/head.php.
   ============================================================ */

:root {
  --preto: #161616; --papel-escuro: #1e1e1e;
  --tinta: #f2f2f2; --tinta-2: #c9c9c9; --tinta-3: #8c8c8c;
  --linha: #2b2b2b; --linha-forte: #4a4a4a;
  --branco: #ffffff; --tinta-clara: #161616; --tinta-clara-2: #3d3d3d; --tinta-clara-3: #8a8a8a;
  --linha-clara: #e6e6e6; --linha-clara-forte: #c4c4c4;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, Consolas, monospace;
}

/* ---------- tipografia: sai boreal itálica e fields-display ---------- */
body { background: var(--preto); color: var(--tinta); font-family: var(--display); font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; }
p, li, a, button, span, input, textarea { font-family: var(--display); font-style: normal; font-weight: 400; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-style: normal; font-weight: 700; letter-spacing: -.02em; color: inherit; }

/* títulos gigantes: Archivo 800 em caixa alta, apertado */
.time-bg, .jobs-bg, .casos-bg, .dizem-bg, .fale-bg, .pg-bg {
  font-family: var(--display); font-weight: 800; font-style: normal;
  letter-spacing: -.055em; line-height: .82; color: inherit;
}
.time-wrap  { --timeSize:  clamp(130px, 19vw, 330px); }
.jobs-wrap  { --jobsSize:  clamp(130px, 19vw, 330px); }
.casos-wrap { --casosSize: clamp(130px, 18vw, 300px); }
.dizem-wrap { --dizemSize: clamp(130px, 18vw, 280px); }
.fale-bg    { font-size: clamp(110px, 17vw, 280px); }
.pg-wrap    { --pgSize: clamp(100px, 16vw, 270px); }

/* ---------- hero ---------- */
.hero-title, .hero-title span {
  font-family: var(--display) !important; font-weight: 700 !important; font-style: normal !important;
  font-size: clamp(24px, 3.3vw, 40px); line-height: 1.08; letter-spacing: -.028em; color: var(--tinta);
}
.hero-logo { filter: brightness(0) invert(.95); }
.pg-sub { font-family: var(--display); color: var(--tinta-2); }
.hero-cta { margin-top: 28px; }
.hero-cta .fale-btn { margin-top: 0; }

/* ---------- rótulos em DM Mono ---------- */
.time-role, .dizem-role, .job-list, .job-list li, .job-list a,
.fale-campo > span, .di-drawer-titulo, .plano-selo, .pg-caso-fonte, .pg-passo-num, .fale-ou {
  font-family: var(--mono); font-style: normal; font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
}
.time-role, .dizem-role { font-size: 11px; color: var(--tinta-3); }
.job-list, .job-list li, .job-list a { font-size: 10.5px; line-height: 1.6; color: var(--tinta-3); }
.di-drawer-titulo { font-size: 10.5px; color: var(--tinta-3); letter-spacing: .16em; }
.fale-ou { font-size: 11px; text-transform: none; letter-spacing: .04em; }
.pg-passo-num { font-size: clamp(28px, 3vw, 40px); letter-spacing: 0; color: var(--tinta-3); }
.time-name, .dizem-name { font-family: var(--display); font-weight: 700; font-style: normal; letter-spacing: -.01em; color: inherit; }
.time-sub, .fale-text, .pg-h2 { font-family: var(--display); font-weight: 600; font-style: normal; letter-spacing: -.018em; color: inherit; }
.time-role, .dizem-role, .job-list, .caso-desc, .pg-text, .pg-passo p, .pg-faq-item p, .pg-veja-titulo, .pg-inclui, .pg-nota, .plano-para, .plano-ciclo, .plano-mensal { color: inherit; }
.pg-veja-titulo, .pg-inclui, .pg-nota, .plano-para, .plano-ciclo, .plano-mensal, .plano-lista li { font-family: var(--display); font-style: normal; }
.plano-nome, .plano-preco { font-family: var(--display); font-weight: 800; font-style: normal; letter-spacing: -.03em; }
.plano-lista li b, .pg-inclui b { color: inherit; }
button.fale-btn { color: inherit; }
.caso-desc, .dizem-text, .pg-text, .pg-passo p, .pg-faq-item p, .company-address { font-family: var(--display); font-style: normal; color: inherit; opacity: .86; }
.dizem-text::before { font-family: var(--display); font-weight: 800; }
.pg-text strong { font-family: var(--display); font-weight: 700; }

/* ---------- cantos retos: círculos e pílulas viram quadrados ---------- */
.job-card, .caso-dot {
  border-radius: 0; border: 1px solid var(--linha-forte); background: var(--papel-escuro); box-shadow: none;
}
.job-card:hover, .caso-dot:hover { border-color: var(--tinta); box-shadow: 0 6px 0 -2px var(--tinta); }
.time-avatar, .dizem-avatar { border-radius: 0; box-shadow: none; }
.fale-btn, .pg-entregas li, .pg-veja-links a, .plano, .plano-cta, .plano-selo,
#menu.di-drawer .di-drawer-cta a, .fale-aviso {
  border-radius: 0;
}
.fale-btn, #menu.di-drawer .di-drawer-cta a, .plano-cta {
  font-family: var(--mono); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: inherit;
  border: 1px solid currentColor; padding: 13px 24px; background: transparent;
}
.fale-btn:hover, .plano-cta:hover { background: var(--tinta); color: var(--preto); transform: none; }
.pg-entregas li, .pg-veja-links a { border-color: var(--linha-forte); }
.pg-entregas li:hover, .pg-veja-links a:hover { border-color: var(--tinta); }
.plano { border-color: var(--linha-forte); }
.plano-lista li::before { border-radius: 0; }

/* divisores finos */
.section-divider, .footer-divider, .fale-divider, .pg-caso-sep { background: var(--linha-forte); border-radius: 0; }
.caso-item::after, .dizem-item::after, .pg-passo::after, .time-cards > .cell::after { background: var(--linha-forte); border-radius: 0; }

/* ---------- xadrez: as telas pares saem brancas ---------- */
body > section { background: var(--preto); color: var(--tinta); }
body > section:nth-of-type(even) {
  background: var(--branco); color: var(--tinta-clara);
}
body > section:nth-of-type(even) h1,
body > section:nth-of-type(even) h2,
body > section:nth-of-type(even) h3,
body > section:nth-of-type(even) p,
body > section:nth-of-type(even) li,
body > section:nth-of-type(even) a,
body > section:nth-of-type(even) span { color: inherit; }
body > section:nth-of-type(even) .time-role,
body > section:nth-of-type(even) .dizem-role,
body > section:nth-of-type(even) .job-list,
body > section:nth-of-type(even) .job-list li,
body > section:nth-of-type(even) .job-list a,
body > section:nth-of-type(even) .fale-campo > span,
body > section:nth-of-type(even) .fale-ou,
body > section:nth-of-type(even) .pg-passo-num { color: var(--tinta-clara-3); }
body > section:nth-of-type(even) .job-card,
body > section:nth-of-type(even) .caso-dot { background: var(--branco); border-color: var(--linha-clara-forte); }
body > section:nth-of-type(even) .job-card:hover,
body > section:nth-of-type(even) .caso-dot:hover { border-color: var(--tinta-clara); box-shadow: 0 6px 0 -2px var(--tinta-clara); }
/* logos de cliente são brancos (feitos para o fundo preto): no branco, invertem */
body > section:nth-of-type(even) .job-logo,
body > section:nth-of-type(even) .caso-logo { filter: invert(1); }
body > section:nth-of-type(even) .section-divider,
body > section:nth-of-type(even) .fale-divider,
body > section:nth-of-type(even) .pg-caso-sep,
body > section:nth-of-type(even) .caso-item::after,
body > section:nth-of-type(even) .dizem-item::after,
body > section:nth-of-type(even) .pg-passo::after,
body > section:nth-of-type(even) .time-cards > .cell::after { background: var(--linha-clara-forte); }
body > section:nth-of-type(even) .pg-entregas li,
body > section:nth-of-type(even) .pg-veja-links a,
body > section:nth-of-type(even) .plano { border-color: var(--linha-clara-forte); }
body > section:nth-of-type(even) .pg-entregas li:hover,
body > section:nth-of-type(even) .pg-veja-links a:hover,
body > section:nth-of-type(even) .plano:hover { border-color: var(--tinta-clara); }
body > section:nth-of-type(even) .pg-faq-item + .pg-faq-item { border-top-color: var(--linha-clara); }
body > section:nth-of-type(even) .fale-btn:hover,
body > section:nth-of-type(even) .plano-cta:hover { background: var(--tinta-clara); color: var(--branco); }
body > section:nth-of-type(even) .fale-campo input,
body > section:nth-of-type(even) .fale-campo textarea { color: var(--tinta-clara); border-bottom-color: var(--linha-clara-forte); }
body > section:nth-of-type(even) .fale-campo input:focus,
body > section:nth-of-type(even) .fale-campo textarea:focus { border-bottom-color: var(--tinta-clara); }
body > section:nth-of-type(even) .fale-aviso { border-color: var(--linha-clara-forte); }
body > section:nth-of-type(even) .dizem-text::before { color: var(--tinta-clara); }

/* ---------- menu lateral ---------- */
#menu.di-drawer { background: var(--preto); border-left: 1px solid var(--linha); box-shadow: none; }
#menu.di-drawer a { font-family: var(--display); font-style: normal; font-size: .95rem; color: var(--tinta-2); }
#menu.di-drawer a:hover, #menu.di-drawer a[aria-current="page"] { color: var(--tinta); border-left-color: var(--tinta); }
#menu.di-drawer .di-drawer-cta a { color: var(--tinta); border-left: 1px solid currentColor; }
#menu.di-drawer .di-drawer-cta a:hover { background: var(--tinta); color: var(--preto); }
.di-drawer-pe { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); }
#toggle span, #toggle span:before, #toggle span:after { border-radius: 0; background-color: var(--tinta); }
/* o hambúrguer passa por cima das telas brancas: mistura por diferença */
#toggle { mix-blend-mode: difference; }
#toggle.on { mix-blend-mode: normal; }

/* ---------- rodapé ---------- */
.di-footer { background: var(--preto); padding-top: 72px; }
.footer-logo { filter: brightness(0) invert(.95); }
.footer-insta {
  display: block; margin: 26px auto 0; text-align: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
}
.footer-insta:hover { color: var(--tinta); }

@media screen and (max-width: 767px) {
  .time-wrap  { --timeSize:  clamp(84px, 19vw, 170px); }
  .jobs-wrap  { --jobsSize:  clamp(84px, 19vw, 150px); }
  .casos-wrap { --casosSize: clamp(84px, 18vw, 170px); }
  .dizem-wrap { --dizemSize: clamp(84px, 18vw, 140px); }
  .pg-wrap    { --pgSize: clamp(80px, 16vw, 150px); }
  /* no celular o site.css zera o respiro de cima; com a troca de cor, o titulo grudava na borda */
  body > section:not(.hero) { padding-top: 7vh; }
}

/* ---------- hero da home: a frase termina na linha de baixo da logo ----------
   (Renato, 23/10/2026: "coloque a frase alinhada com o fim da logo"). A frase
   desce até a base da logo e o botão fica pendurado embaixo, fora do alinhamento. */
#hero:not(.pg-di-hero) .hero-wrap { align-items: end; }
#hero:not(.pg-di-hero) .hero-wrap > .cell:first-child { align-self: end; line-height: 0; }
#hero:not(.pg-di-hero) .hero-logo { display: block; }
#hero:not(.pg-di-hero) .hero-content { position: relative; }
#hero:not(.pg-di-hero) .hero-title { margin-bottom: 0; transform: translateY(var(--desce-frase, .2em)); }
#hero:not(.pg-di-hero) .hero-cta { position: absolute; left: 0; top: 100%; margin-top: 34px; }
@media screen and (max-width: 767px) {
  #hero:not(.pg-di-hero) .hero-wrap { align-items: center; }
  #hero:not(.pg-di-hero) .hero-wrap > .cell:first-child { align-self: center; }
  #hero:not(.pg-di-hero) .hero-logo { margin: 0 auto 8px; }
  #hero:not(.pg-di-hero) .hero-title { transform: none; }
  #hero:not(.pg-di-hero) .hero-cta { position: static; margin-top: 26px; }
}

/* páginas internas: o hero tem título e um parágrafo embaixo. Elas dividem o
   id="hero" com a home, por isso o alinhamento pela base da logo vale só lá. */
.pg-di-hero .hero-title { margin-bottom: 22px; }
.pg-sub {
  max-width: 860px; margin: 0;
  font-family: var(--display); font-weight: 400; font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.62; letter-spacing: -.005em; color: var(--tinta-2); text-wrap: balance;
}
@media screen and (max-width: 767px) { .pg-di-hero .hero-title { margin-bottom: 16px; } .pg-sub { margin: 0 auto; } }

/* ---------- transições (js/identidade-2026.js) ----------
   Usam as propriedades "translate", "scale" e "clip-path", e não "transform",
   para não brigar com o transform do hover dos cards nem com o ajuste da frase
   do hero. A curva é a mesma dos dashboards. */
.di-anima .di-bloco {
  opacity: 0; translate: 0 26px;
  transition: opacity .8s cubic-bezier(.22,1,.36,1), translate .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--di-atraso, 0ms);
}
.di-anima .di-bloco.di-entrou { opacity: 1; translate: none; }
/* títulos gigantes: só aparecem, sem movimento (escolha do Renato em 23/10/2026,
   entre corte, letras, tracking, fade e parado) */
.di-anima .di-gigante { opacity: 0; transition: opacity 1.4s ease; }
.di-anima .di-gigante.di-entrou { opacity: 1; }
.di-anima .di-fio {
  scale: 1 0; transform-origin: 50% 0;
  transition: scale 1.1s cubic-bezier(.22,1,.36,1) .25s;
}
.di-anima .di-fio.di-entrou { scale: 1 1; }

/* ---------- chat do WhatsApp (includes/chat.php, 23/10/2026) ----------
   Molde do chat da Mariana na /concept/ do Círculo, na identidade da casa:
   bolinha branca com o ícone preto (o verde do WhatsApp não entra), cartão
   de canto reto, topo preto, botão preto com texto em DM Mono. */
.zap { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 990; }
.zap-bt {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--branco); color: var(--tinta-clara); display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .2s ease;
}
.zap-bt:hover { transform: translateY(-2px); }
.zap-bt .wa-icone { width: 27px; height: 27px; }
.zap-dica {
  position: absolute; right: 70px; bottom: 9px; white-space: nowrap; width: max-content; display: flex; align-items: center; gap: 9px;
  background: var(--branco); color: var(--tinta-clara); border: 1px solid var(--tinta-clara);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px 8px 8px; opacity: 0; translate: 8px 0; transition: opacity .3s ease, translate .3s ease; pointer-events: none;
}
.zap.dica .zap-dica { opacity: 1; translate: none; }
.zap-dica img { width: 24px; height: 24px; object-fit: cover; filter: grayscale(1); }
.zap-card {
  position: absolute; right: 0; bottom: 72px; width: min(330px, calc(100vw - 32px)); display: none;
  background: var(--branco); color: var(--tinta-clara); border: 1px solid var(--tinta-clara); box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.zap.aberto .zap-card { display: block; }
.zap.aberto .zap-dica { display: none; }
.zap-topo { background: var(--preto); color: var(--tinta); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.zap-ava { width: 42px; height: 42px; object-fit: cover; filter: grayscale(1); flex: none; }
.zap-topo b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--tinta); }
.zap-topo small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; }
.zap-fecha { margin-left: auto; background: none; border: 0; color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.zap-corpo { background: #f2f2f2; padding: 16px; }
.zap-msg { background: var(--branco); border: 1px solid var(--linha-clara); padding: 11px 13px; max-width: 94%;
  font-family: var(--display); font-size: 14.5px; line-height: 1.45; color: var(--tinta-clara); }
.zap-form { padding: 14px 16px 16px; }
.zap-form input {
  width: 100%; font-family: var(--display); font-size: 16px; padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--linha-clara-forte); border-radius: 0; background: var(--branco); color: var(--tinta-clara);
}
.zap-form input:focus { outline: none; border-color: var(--tinta-clara); }
.zap-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zap-erro { color: #c0392b; font-family: var(--display); font-size: 13px; font-weight: 600; margin: -2px 0 8px; }
.zap-erro:empty { display: none; }
.zap-ir {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; padding: 14px; cursor: pointer;
  border: 0; border-radius: 0; background: var(--preto); color: var(--tinta);
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.zap-ir:hover { background: #000; }
.zap-lgpd { font-family: var(--display); font-size: 11.5px; line-height: 1.4; color: var(--tinta-clara-3); margin-top: 9px; text-align: center; }
@media (min-width: 760px) { .zap { right: 24px; bottom: 24px; } }

/* ---------- menu em tela cheia, no molde do Hoop78 (23/10/2026) ----------
   O painel lateral com grupos e fios ficou "brega" (Renato). Agora o menu cobre
   a tela em preto e se divide em colunas: o que fazemos em letra grande, o
   mercado e a casa em letra média, rótulo em DM Mono espaçado. Só CSS: os
   links e a marcação do includes/menu.php continuam os mesmos. */
#menu.di-drawer {
  inset: 0; width: 100%; max-width: none; height: 100%;
  background: var(--preto); border: 0; box-shadow: none;
  transform: none; opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  padding: 130px clamp(22px, 5vw, 72px) 60px;
}
#toggle.on + #menu.di-drawer { transform: none; opacity: 1; visibility: visible; }
.di-drawer-fundo { display: none; }
.di-drawer-corpo {
  max-width: 1280px; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; column-gap: 70px; row-gap: 0; align-items: start;
}
.di-drawer-corpo > ul:first-child { grid-column: 1 / -1; margin-bottom: 54px; }
.di-drawer-corpo > ul:first-child a {
  font-family: var(--mono) !important; font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: .3em !important; text-transform: uppercase; color: var(--tinta-3) !important;
}
.di-drawer-grupo + .di-drawer-grupo,
.di-drawer-corpo > ul + .di-drawer-grupo { border-top: 0; margin-top: 0; padding-top: 0; }
.di-drawer-titulo {
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .42em;
  color: var(--tinta-3); padding: 0; margin-bottom: 26px;
}
.di-drawer-grupo li + li { margin-top: 14px; }
#menu.di-drawer a {
  display: inline-block; padding: 0; border: 0; background: none;
  font-family: var(--display); font-weight: 800; font-style: normal; text-transform: uppercase;
  letter-spacing: -.035em; line-height: 1.02; color: var(--tinta);
  font-size: clamp(19px, 1.6vw, 26px); transition: opacity .2s ease;
}
#menu.di-drawer .di-drawer-corpo > .di-drawer-grupo:nth-of-type(1) a { font-size: clamp(30px, 3.1vw, 50px); white-space: nowrap; }
#menu.di-drawer a:hover { background: none; color: var(--tinta); opacity: .55; }
#menu.di-drawer a[aria-current="page"] { background: none; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
#menu.di-drawer .di-drawer-cta { grid-column: 1 / 2; margin: 64px 0 0; }
#menu.di-drawer .di-drawer-cta a {
  display: inline-flex; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em;
  padding: 15px 24px; border: 1px solid var(--tinta); border-left: 1px solid var(--tinta);
}
#menu.di-drawer .di-drawer-cta a:hover { background: var(--tinta); color: var(--preto); opacity: 1; }
.di-drawer-pe {
  grid-column: 2 / -1; margin: 64px 0 0; padding: 0; border: 0; align-self: end;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; line-height: 1.8; color: var(--tinta-3);
}
/* com o menu aberto o hambúrguer vira o X por cima do preto */
#toggle.on { mix-blend-mode: normal; z-index: 1003; }
@media screen and (max-width: 820px) {
  #menu.di-drawer { padding: 96px 22px 50px; }
  .di-drawer-corpo { grid-template-columns: 1fr; row-gap: 44px; }
  .di-drawer-corpo > ul:first-child { margin-bottom: 0; }
  #menu.di-drawer .di-drawer-cta, .di-drawer-pe { grid-column: 1; margin-top: 0; }
  .di-drawer-pe { display: block; }
}

/* ---------- menu: tipografia organizada (24/10/2026) ----------
   A primeira versão tinha quatro vozes ao mesmo tempo (grande, médio, rótulo
   espaçado demais e endereço em mono), dois pesos de caixa alta brigando e o
   "Início" sublinhado sem função. Escolha do Renato entre três propostas: a
   numerada, como os dashboards (índice em DM Mono antes de cada link), em
   caixa alta e com todos os links do mesmo tamanho. "Início" sai (o X fecha
   e a logo do rodapé leva para casa); botão e endereço vão para uma linha só,
   separados por um fio. */
.di-drawer-titulo { letter-spacing: .2em; font-size: 11px; margin-bottom: 22px; }
.di-drawer-corpo > ul:first-child { display: none; }
.di-drawer-corpo { grid-template-columns: repeat(3, 1fr); counter-reset: item; }
#menu.di-drawer .di-drawer-cta, .di-drawer-pe { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--linha); align-self: start; }
.di-drawer-pe { grid-column: 2 / -1; }
#menu.di-drawer .di-drawer-grupo a,
#menu.di-drawer .di-drawer-corpo > .di-drawer-grupo:nth-of-type(1) a {
  font-size: clamp(18px, 1.6vw, 25px); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
}
.di-drawer-grupo li { counter-increment: item; display: flex; align-items: baseline; gap: 16px; }
.di-drawer-grupo li::before { content: counter(item, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--tinta-3); min-width: 20px; }
.di-drawer-grupo li + li { margin-top: 12px; }
@media screen and (max-width: 820px) {
  .di-drawer-corpo { grid-template-columns: 1fr; }
  .di-drawer-pe, #menu.di-drawer .di-drawer-cta { grid-column: 1; margin-top: 8px; }
}

/* ---------- respiro das páginas internas (24/10/2026, "tudo muito grudado") ---------- */
.pg-h2 { margin: 26px auto 0; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.32; }
.pg-entregas, .pg-passos, .pg-faq, .pg-caso, .pg-planos { margin-top: 56px; }
.pg-passo h3, .pg-faq-item h3 { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; letter-spacing: -.015em; margin-bottom: 12px; }
.pg-passo p, .pg-faq-item p, .pg-text { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.72; }
.pg-passo-num { margin-bottom: 14px; }
.pg-faq-item + .pg-faq-item { margin-top: 40px; padding-top: 40px; }
.pg-fim .pg-text { margin-bottom: 22px; }
.pg-veja { margin-top: 56px; }
.pg-veja-titulo { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 20px; }
body > section:nth-of-type(even) .pg-veja-titulo { color: var(--tinta-clara-3); }
.caso-desc { line-height: 1.7; }
.pg-caso-fonte { margin-top: 16px; }
@media screen and (max-width: 767px) {
  .pg-entregas, .pg-passos, .pg-faq, .pg-caso, .pg-planos { margin-top: 36px; }
  .pg-h2 { margin-top: 18px; }
}

/* ---------- blocos das internas como lista de dashboard (24/10/2026) ----------
   Antes: título pequeno e centralizado em cima de um parágrafo maior, que parecia
   mais importante que o título. Agora cada bloco é uma linha de tabela: índice em
   DM Mono, título à esquerda em Archivo 700 e texto à direita, menor e mais claro,
   com fio fino entre as linhas. Vale para os passos (FAZER, COMO, QUEM, META...) e
   para as perguntas frequentes. Só CSS: h3 e p continuam os mesmos. */
.pg-passos, .pg-faq {
  max-width: 1080px; margin-left: auto; margin-right: auto; text-align: left;
  display: block; counter-reset: passo; border-bottom: 1px solid var(--linha-forte);
}
.pg-passo, .pg-faq-item {
  counter-increment: passo;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 32px; align-items: baseline;
  padding: 30px 0; border-top: 1px solid var(--linha-forte);
}
.pg-faq-item + .pg-faq-item { margin-top: 0; padding-top: 30px; border-top: 1px solid var(--linha-forte); }
.pg-passo::before, .pg-faq-item::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--tinta-3);
}
.pg-passo::after { display: none; }
.pg-passo-num { display: none; }
.pg-passo h3, .pg-faq-item h3 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.18; letter-spacing: -.025em; text-wrap: balance;
}
.pg-passo h3 a, .pg-passo h3 a.hero-link { font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; opacity: 1; padding: 0; }
.pg-passo h3 a.hero-link::after { width: 0; left: 0; }
.pg-passo h3 a.hero-link:hover { transform: none; }
.pg-passo h3 a::after { bottom: -4px; height: 2px; }
.pg-passo p, .pg-faq-item p {
  margin: 0; max-width: none; font-size: clamp(15px, 1.05vw, 16px); line-height: 1.68; opacity: .78;
}
body > section:nth-of-type(even) .pg-passos, body > section:nth-of-type(even) .pg-faq,
body > section:nth-of-type(even) .pg-passo, body > section:nth-of-type(even) .pg-faq-item { border-color: var(--linha-clara-forte); }
body > section:nth-of-type(even) .pg-passo::before, body > section:nth-of-type(even) .pg-faq-item::before { color: var(--tinta-clara-3); }
@media screen and (max-width: 767px) {
  .pg-passo, .pg-faq-item { grid-template-columns: 34px minmax(0, 1fr); row-gap: 12px; padding: 24px 0; }
  .pg-passo p, .pg-faq-item p { grid-column: 2; }
}

/* ---------- FALE reorganizado (24/10/2026) ----------
   Uma coluna só, na vertical (o Renato testou duas colunas e preferiu assim):
   título gigante, frase, WhatsApp como botão principal (cheio), um fio, o
   formulário compacto com campos em caixa e o endereço. Só CSS: a marcação do
   includes/fale.php é a mesma. */
.fale-wrap { max-width: 1080px; margin: 0 auto; }
.fale-text { text-wrap: balance; }
.fale-ou { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: left; margin: 0 0 20px; opacity: .8; }
.fale-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.fale-campo { margin-bottom: 14px; grid-column: 1 / -1; }
.fale-campo:nth-of-type(1), .fale-campo:nth-of-type(2) { grid-column: auto; }
.fale-campo > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; margin-bottom: 7px; }
.fale-campo > span em { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.fale-campo input, .fale-campo textarea {
  border: 1px solid var(--linha-forte); padding: 12px 14px; font-size: 16px; background: transparent; border-radius: 0;
}
.fale-campo input:focus, .fale-campo textarea:focus { border-color: currentColor; outline: 0; }
.fale-campo textarea { min-height: 110px; resize: none; }
.fale-form .fale-btn--enviar { grid-column: 1 / -1; width: 100%; margin: 4px 0 0; padding: 15px 24px; }
body > section:nth-of-type(even) .fale-campo input,
body > section:nth-of-type(even) .fale-campo textarea { border-color: var(--linha-clara-forte); }
body > section:nth-of-type(even) .fale-campo input:focus,
body > section:nth-of-type(even) .fale-campo textarea:focus { border-color: var(--tinta-clara); }
/* WhatsApp é o principal: botão cheio */
.fale-btn--wa { background: var(--tinta); color: var(--preto); border-color: var(--tinta); padding: 16px 26px; }
.fale-btn--wa:hover { background: transparent; color: var(--tinta); }
body > section:nth-of-type(even) .fale-btn--wa { background: var(--tinta-clara); color: var(--branco); border-color: var(--tinta-clara); }
body > section:nth-of-type(even) .fale-btn--wa:hover { background: transparent; color: var(--tinta-clara); }
.company-address { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; line-height: 1.8; opacity: .7; }

/* 24/10/2026: o Renato preferiu tudo numa coluna só, na vertical, sem as duas colunas */
.fale-form { grid-template-columns: 1fr; }
.fale-campo:nth-of-type(1), .fale-campo:nth-of-type(2) { grid-column: 1; }
.fale-wrap .fale-text { margin: 0 auto 30px; max-width: 560px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -.028em; }
.fale-wrap .fale-form-wrap { max-width: 560px; margin: 56px auto 0; padding-top: 34px; border-top: 1px solid var(--linha-forte); }
body > section:nth-of-type(even) .fale-wrap .fale-form-wrap { border-top-color: var(--linha-clara-forte); }
.fale-ou { text-align: center; }
.fale-wrap .company-address { margin: 44px auto 0; max-width: 560px; }
.fale-campo > span em { color: inherit; opacity: .55; }

/* 24/10/2026: a lista das internas passa a ter uma coluna só, como o Renato pediu:
   número e título na mesma linha, texto embaixo, numa coluna mais estreita. */
.pg-passos, .pg-faq { max-width: 780px; }
.pg-passo, .pg-faq-item { grid-template-columns: 44px minmax(0, 1fr); row-gap: 12px; }
.pg-passo p, .pg-faq-item p { grid-column: 2; }
@media screen and (max-width: 767px) { .pg-passo, .pg-faq-item { grid-template-columns: 34px minmax(0, 1fr); } }
/* sem fio depois do último bloco (Renato, 24/10/2026): o fio vertical da seção já fecha */
.pg-passos, .pg-faq { border-bottom: 0; }
/* linha de apoio embaixo dos títulos gigantes em peso 500 (aprovado pelo Renato em 24/10/2026; era 600) */
.pg-h2 { font-weight: 500; }

/* "Veja também" sem caixas: cada link com uma linha embaixo (Renato, 24/10/2026) */
.pg-veja-links { gap: 18px; }
.pg-veja-links a, body > section:nth-of-type(even) .pg-veja-links a {
  border: 0; border-bottom: 1px solid var(--linha-forte); border-radius: 0; padding: 0 0 6px;
  font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.25vw, 18px); letter-spacing: -.01em;
  transition: border-color .2s ease, opacity .2s ease;
}
body > section:nth-of-type(even) .pg-veja-links a { border-bottom-color: var(--linha-clara-forte); }
.pg-veja-links a:hover { border-bottom-color: currentColor; transform: none; }
body > section:nth-of-type(even) .pg-veja-links a:hover { border-bottom-color: var(--tinta-clara); color: var(--tinta-clara); }

/* ---------- casos: hierarquia (24/10/2026) ----------
   O texto do caso e a linha de crédito tinham o mesmo peso visual. Agora o
   resultado é a frase forte (600, maior, coluna estreita) e o crédito vira
   rodapé discreto em DM Mono pequeno e apagado. Vale na home e nas internas. */
.caso-desc, .pg-caso .caso-desc {
  max-width: 640px; margin: 24px auto 0; opacity: 1;
  font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.38; letter-spacing: -.018em; text-wrap: balance;
}
.pg-caso-fonte {
  display: block; margin-top: 16px; opacity: .5;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; line-height: 1.6;
}
/* todos os links do "Veja também" com a mesma largura, para a linha de baixo ter o mesmo tamanho */
.pg-veja-links a, body > section:nth-of-type(even) .pg-veja-links a { display: block; width: min(340px, 100%); text-align: center; }

/* botão de enviar em preto e endereço em caixa alta (Renato, 24/10/2026) */
.fale-form .fale-btn--enviar { background: #161616; color: #f2f2f2; border: 1px solid #161616; }
.fale-form .fale-btn--enviar:hover { background: #000; border-color: #000; color: #fff; }
body > section:nth-of-type(odd) .fale-form .fale-btn--enviar { border-color: #4a4a4a; }
body > section:nth-of-type(odd) .fale-form .fale-btn--enviar:hover { border-color: #f2f2f2; }
.company-address { text-transform: uppercase; letter-spacing: .1em; font-style: normal; }


/* lista de entregas (PLANO) no mesmo desenho do "Veja também": sem caixa, linha embaixo,
   todas da mesma largura (Renato, 24/10/2026) */
.pg-entregas { gap: 0; }
.pg-entregas li, body > section:nth-of-type(even) .pg-entregas li {
  width: min(500px, 100%); border: 0; border-bottom: 1px solid var(--linha-forte); border-radius: 0;
  padding: 16px 0 14px; text-align: center;
  font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.25vw, 18px); letter-spacing: -.01em;
}
body > section:nth-of-type(even) .pg-entregas li { border-bottom-color: var(--linha-clara-forte); }
.pg-entregas li:hover, body > section:nth-of-type(even) .pg-entregas li:hover { transform: none; border-color: transparent; border-bottom-color: currentColor; }
/* sem linha depois do último item, como nas listas numeradas (Renato: "tire sempre a linha horizontal" no último) */
.pg-entregas li:last-child, body > section:nth-of-type(even) .pg-entregas li:last-child,
.pg-veja-links a:last-child, body > section:nth-of-type(even) .pg-veja-links a:last-child { border-bottom-color: transparent; }


/* ---------- botões: só troca de cor, com fade (24/10/2026) ----------
   Depois de varredura, círculo, seta, sombra chapada e sombra em contorno, o
   Renato quis o mais simples: o botão fica parado e as cores se invertem num
   fade. Contorno vira cheio; cheio vira contorno. */
:is(.fale-btn, .plano-cta, #menu.di-drawer .di-drawer-cta a, .zap-ir) {
  translate: none !important; box-shadow: none !important; transform: none !important;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}
/* fundo preto: contorno claro vira cheio claro */
.fale-btn:is(:hover, :focus-visible), #menu.di-drawer .di-drawer-cta a:is(:hover, :focus-visible), .plano-cta:is(:hover, :focus-visible) { background: var(--tinta); color: var(--preto); border-color: var(--tinta); }
/* WhatsApp cheio claro vira contorno */
.fale-btn--wa:is(:hover, :focus-visible) { background: transparent; color: var(--tinta); border-color: var(--tinta); }
/* fundo branco: o mesmo, invertido */
body > section:nth-of-type(even) .fale-btn:is(:hover, :focus-visible), body > section:nth-of-type(even) .plano-cta:is(:hover, :focus-visible) { background: var(--tinta-clara); color: var(--branco); border-color: var(--tinta-clara); }
body > section:nth-of-type(even) .fale-btn--wa:is(:hover, :focus-visible) { background: transparent; color: var(--tinta-clara); border-color: var(--tinta-clara); }
/* enviar: preto vira claro */
body > section .fale-form .fale-btn--enviar:is(:hover, :focus-visible) { background: #f2f2f2; color: #161616; border-color: #161616; }
body > section:nth-of-type(odd) .fale-form .fale-btn--enviar:is(:hover, :focus-visible) { border-color: #f2f2f2; }
/* chat: preto clareia um pouco */
.zap-ir:is(:hover, :focus-visible) { background: #3d3d3d !important; color: #fff; }
@media (prefers-reduced-motion: reduce) { :is(.fale-btn, .plano-cta, #menu.di-drawer .di-drawer-cta a, .zap-ir) { transition: none !important; } }
/* enviar em seção preta: botão branco; no hover vira preto com contorno claro (Renato, 24/10/2026) */
body > section:nth-of-type(odd) .fale-form .fale-btn--enviar { background: #f2f2f2; color: #161616; border-color: #f2f2f2; }
body > section:nth-of-type(odd) .fale-form .fale-btn--enviar:is(:hover, :focus-visible) { background: #161616; color: #f2f2f2; border-color: #f2f2f2; }