/* ============================================================
   PÁGINA DE DEMONSTRAÇÃO E QUEBRA DE OBJEÇÃO

   Carregada DEPOIS de estilo.css, e reaproveita de lá as variáveis de cor da
   marca, o .container, o .btn e a .seta. Aqui entra só o que é desta página.

   ⚠️ Toda classe nova leva prefixo `d-`. A captação e esta página dividem a
   mesma folha base, e classe de nome genérico (.grid, .card, .passo) acabaria
   brigando com a de lá por especificidade sem ninguém perceber.

   ------------------------------------------------------------
   DIREÇÃO VISUAL: SALA DE MONITORAMENTO
   ------------------------------------------------------------
   A identidade veio do Figma que a franqueadora aprovou, e o manual de
   marketing exige as cores Emive nas artes. Então nada de paleta nova nem de
   outra família tipográfica: o caráter vem de COMO a marca é usada.

   1. O preto ganha um azul levíssimo, de monitor ligado em um quarto escuro,
      em vez do preto puro chapado.
   2. O amarelo da marca vira ALERTA, aparecendo pouco e em momento decisivo.
      Amarelo em tudo deixa de significar alguma coisa.
   3. A camada de rótulo fala em monoespaçada, que é a voz nativa de câmera de
      segurança (timecode, identificação de câmera). Só em micro-rótulo, nunca
      em título ou corpo, para não brigar com a Inter da marca.
   4. O colchete de canto cita as chamadas dos próprios vídeos de demonstração.
   5. Seção escura é a TELA. Seção clara é o DOCUMENTO. O contraste entre as
      duas é o ritmo da página.

   Mobile primeiro: o uso principal é o franqueado mandando o link no WhatsApp.
   ============================================================ */

:root{
  --d-fundo:#0A0C10;        /* quase preto, com azul de monitor */
  --d-fundo-2:#12151B;      /* superfície */
  --d-fundo-3:#171B23;      /* superfície elevada */
  --d-borda:#232833;
  --d-borda-forte:#333A48;
  --d-texto:#E9ECF2;
  --d-texto-fraco:#8E96A6;

  --d-papel:#F4F4F2;        /* o documento */
  --d-papel-2:#EAEAE6;
  --d-papel-linha:#D7D7D2;
  --d-tinta:#0A0C10;
  --d-tinta-fraca:#5A6070;

  --d-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;

  /* ⚠️ Medido, não escolhido: com o valor anterior (3.25rem no celular) o
     respiro ENTRE seções somava quase uma tela inteira de rolagem em uma página
     que o Filipe já achava longa. Respiro é necessário, tela desperdiçada não. */
  --d-ritmo:clamp(2.4rem,7vw,5.5rem);
}

/* ---------- base ---------- */
body.d-page{
  background:var(--d-fundo);
  color:var(--d-texto);
  font-weight:300;
}

/* Textura de tela: linha de varredura muito baixa mais um brilho frio no topo.
   Fica em ::before do body, fixo, sem interceptar clique. É o que tira o
   chapado do fundo sólido sem custar imagem nenhuma. */
body.d-page::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(90,120,180,.13), transparent 60%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
body.d-page > *{position:relative;z-index:1}

/* ---------- ritmo das seções ---------- */
.d-sec{padding:var(--d-ritmo) 0;position:relative}
.d-sec + .d-sec:not(.d-sec--claro){border-top:1px solid var(--d-borda)}
.d-sec--claro{background:var(--d-papel);color:var(--d-tinta);border-top:0;isolation:isolate}
.d-sec--claro + .d-sec{border-top:0}

/* ⚠️ O escuro tinha textura (varredura e brilho frio no ::before do body) e o
   claro NÃO tinha nada: fundo sólido, tipo preto, fio de 1px. Era metade da
   página parecendo documento de editor de texto, e foi isso que o Filipe leu
   como "chapada e branca".
   A resposta é a mesma grade de instrumento que a marca já sugere, em opacidade
   de leitura quase subliminar (3%), esmaecendo para baixo com máscara para não
   virar papel quadriculado. Custo: zero imagem, zero requisição. */
.d-sec--claro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(10,12,16,.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(180deg, rgba(10,12,16,.03) 0 1px, transparent 1px 34px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) 52%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.4) 52%,transparent 92%);
}
/* A emenda entre o escuro e o claro era um corte seco. Um fio de luz do lado
   claro e uma sombra caindo do lado escuro dão a espessura que faz uma
   superfície parecer que está por cima da outra, em vez de coladas. */
.d-sec--claro::after{
  content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85),transparent);
}

.d-col{max-width:42rem}
/* ⚠️ Onde .container e .d-col caem no MESMO elemento, o max-width menor
   vencia e o margin auto do container centralizava o bloco, desalinhando a
   seção das outras. Aqui o elemento mantém a largura do container e quem
   ganha a medida de leitura é cada filho direto. */
.container.d-col{max-width:var(--max)}
.container.d-col > *{max-width:42rem}

.d-pilha{display:flex;flex-direction:column;gap:1.15rem}
.d-pilha--curta{gap:.6rem}

/* ---------- tipografia ---------- */
/* O rótulo é a camada de timecode: monoespaçada, caixa alta, bem espaçada.
   ⚠️ SEM risco decorativo antes do rótulo. Tinha um, e o Filipe leu como
   travessão, que é proibido na escrita da casa. Traço na tela dispara a mesma
   regra que traço no texto, mesmo sendo enfeite. */
.d-rotulo{
  display:block;
  font-family:var(--d-mono);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;color:var(--amarelo);
}
.d-sec--claro .d-rotulo{color:var(--laranja)}

.d-h2{
  font-size:clamp(1.75rem,5.6vw,2.9rem);line-height:1.05;font-weight:700;
  letter-spacing:-.028em;text-wrap:balance;
}
/* ⚠️ `pretty` e não `balance`. Em parágrafo de corpo o balance redistribui
   TODAS as linhas e deixa a medida de leitura irregular; o pretty mexe só no
   fim da caixa. Fica como rede de segurança geral.
   ⚠️ MEDIDO: ele NÃO resolve sozinho. Com `text-wrap:pretty` computado e
   `CSS.supports` dizendo true, o Chrome 151 continuou fechando o lead em
   "isso." sozinho em uma linha (64px de 350). Onde a viúva importa de verdade,
   quem resolve é ` ` amarrando as duas últimas palavras no HTML. */
.d-lead,.d-antes,.d-pontos span,.d-passos span.d-passos__d,.d-duvida__r{text-wrap:pretty}
.d-lead{font-size:clamp(1rem,2.6vw,1.15rem);line-height:1.62;color:var(--d-texto-fraco)}
.d-sec--claro .d-lead{color:var(--d-tinta-fraca)}
/* A palavra que carrega o argumento sai do cinza de apoio. Uma por lead, no
   máximo: se tudo é grifado, nada é. */
.d-lead b{color:var(--d-texto);font-weight:600}
.d-sec--claro .d-lead b{color:var(--d-tinta)}
.d-mini{font-family:var(--d-mono);font-size:.74rem;line-height:1.6;color:var(--d-texto-fraco);letter-spacing:.02em}
.d-sec--claro .d-mini{color:var(--d-tinta-fraca)}

/* Frase de virada: some com o cinza de apoio e fica em texto pleno, para o
   olho saber que aquela linha é a conclusão do bloco. */
.d-virada{
  font-size:clamp(1.1rem,3vw,1.4rem);line-height:1.4;font-weight:600;
  letter-spacing:-.015em;color:var(--d-texto);text-wrap:balance;
}
.d-sec--claro .d-virada{color:var(--d-tinta)}

/* ---------- barra do topo: régua de status ---------- */
/* Página de follow-up: a pessoa volta para tirar UMA dúvida. Se achar a
   resposta no meio do caminho, o botão precisa estar ali, não lá embaixo. */
.d-topo{
  background:rgba(10,12,16,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--d-borda);
}
/* ⚠️⚠️ TEM QUE SER `body.d-page > .d-topo`, e não `.d-topo`. A regra que
   levanta o conteúdo acima da textura do fundo (`body.d-page > *`, lá em cima)
   é MAIS ESPECÍFICA que uma classe sozinha, e estava reescrevendo este
   `sticky` para `relative`. O cabeçalho ficou solto desde que a textura de
   varredura entrou, e ninguém percebeu porque `position` errado não quebra
   nada visualmente: a barra simplesmente para de grudar e vai embora na
   rolagem, que era justamente o contrário do motivo dela existir. */
body.d-page > .d-topo{position:sticky;top:0;z-index:50}
.d-topo__linha{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding-block:.6rem}
.d-topo__marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;min-width:0}
.d-topo__marca img{height:32px;width:auto}
.d-topo__praca{
  font-family:var(--d-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-texto-fraco);line-height:1.35;display:none;
}
@media(min-width:560px){.d-topo__praca{display:block}}
.d-topo .btn{padding:.68rem 1.05rem;min-height:44px;font-size:.78rem}

/* ---------- abertura ---------- */
.d-hero{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(2.75rem,7vw,4.5rem)}

/* No celular é uma coluna só, texto e depois a prova. A partir do desktop os
   dois ficam lado a lado: a frase afirma e a gravação prova, na mesma altura
   do olho. Sem isso a metade direita da tela ficava vazia justamente na
   dobra, que é o lugar mais caro da página. */
.d-hero__grid{display:grid;gap:1.9rem}
.d-hero__texto{max-width:42rem}
@media(min-width:1000px){
  .d-hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:3.4rem;align-items:center}
  .d-hero__texto{max-width:none}
}
.d-hero__titulo{
  font-size:clamp(2.15rem,8.2vw,4.5rem);line-height:.98;font-weight:800;
  letter-spacing:-.042em;text-wrap:balance;max-width:16ch;
  margin-block:clamp(1rem,2.5vw,1.5rem);
}
/* O título nasceu com margem própria porque tinha um rótulo em cima dele. O
   rótulo saiu, e a margem virou um vão no topo mais um vão dobrado embaixo,
   somada ao gap da pilha. Sendo o primeiro filho, quem espaça é a pilha. */
.d-hero__texto > .d-hero__titulo:first-child{margin-block:0}
.d-hero__titulo b{font-weight:800;color:var(--amarelo)}

/* ---------- o monitor: gravação real emoldurada ---------- */
/* Não é "vídeo em card". É uma tela de monitoramento: moldura escura, marca
   de gravação piscando, timecode e colchete de canto. É a mesma língua visual
   das chamadas dos vídeos de demonstração. */
.d-monitor{
  position:relative;background:#000;border:1px solid var(--d-borda-forte);
  border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.9);
}
.d-monitor video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
/* ⚠️ Os dois rótulos ficavam lado a lado NO TOPO, e o da direita caía em cima
   do timestamp queimado da gravação, virando um borrão ilegível. Câmera de
   CFTV carimba data no canto superior direito por padrão, então aquele canto
   nunca vai estar livre: o segundo rótulo desceu para a base. */
.d-monitor__hud{
  position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  padding:.7rem .8rem;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 22%,transparent 78%,rgba(0,0,0,.42));
}
.d-monitor__rec{
  display:flex;align-items:center;gap:.45em;
  font-family:var(--d-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.d-monitor__rec::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--laranja);
  animation:d-pisca 1.6s steps(1,end) infinite;
}
/* ⛔ SEM USO desde 11/08: o rótulo da base saiu por decisão do Filipe. Fica na
   folha caso volte. O HUD hoje tem um filho só, e o `space-between` da coluna o
   mantém encostado no topo, que é onde ele deve ficar. */
.d-monitor__cam{
  font-family:var(--d-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.9);
}
@keyframes d-pisca{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* colchete de canto, citação direta das chamadas dos vídeos */
.d-monitor::after{
  content:"";position:absolute;inset:9px;pointer-events:none;
  background:
    linear-gradient(var(--amarelo),var(--amarelo)) left top,
    linear-gradient(var(--amarelo),var(--amarelo)) left top,
    linear-gradient(var(--amarelo),var(--amarelo)) right top,
    linear-gradient(var(--amarelo),var(--amarelo)) right top,
    linear-gradient(var(--amarelo),var(--amarelo)) left bottom,
    linear-gradient(var(--amarelo),var(--amarelo)) left bottom,
    linear-gradient(var(--amarelo),var(--amarelo)) right bottom,
    linear-gradient(var(--amarelo),var(--amarelo)) right bottom;
  background-repeat:no-repeat;
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px;
  opacity:.85;
}
/* ⚠️ Era .72rem inteiro no cinza de apoio e o Filipe leu como apagado. Não foi
   resolvido clareando tudo: subiu o corpo e a conclusão ganhou texto pleno,
   enquanto a concessão fica no cinza. Assim quem só bate o olho lê a metade
   que carrega o argumento, em vez de ler duas frases de peso igual. */
.d-legenda{
  margin-top:.75rem;font-family:var(--d-mono);font-size:.8rem;line-height:1.6;
  color:var(--d-texto-fraco);letter-spacing:.01em;
}
.d-legenda b{color:var(--d-texto);font-weight:500}
.d-sec--claro .d-legenda{color:var(--d-tinta-fraca)}
.d-sec--claro .d-legenda b{color:var(--d-tinta)}

/* ---------- celular com o vídeo vertical dentro ---------- */
/* O material de demonstração foi produzido em 1080x1920. Em página larga ele
   ficaria com duas tarjas pretas enormes dos lados; dentro do aparelho a
   proporção passa a fazer sentido. */
.d-fone{
  width:min(260px,74vw);margin-inline:auto;flex:none;
  border:9px solid #1A1E27;border-radius:32px;
  box-shadow:0 0 0 1px var(--d-borda-forte),0 30px 60px -22px rgba(0,0,0,.95);
  background:#000;position:relative;overflow:hidden;
}
.d-fone::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:32%;height:5px;border-radius:99px;background:#2B303C;z-index:2;
}
.d-fone video{width:100%;height:auto;display:block;aspect-ratio:9/16;background:#000}
/* No fechamento o aparelho entra menor: ali ele não é a demonstração, é só a
   prova de que a visita não morde. Vídeo vertical em tamanho cheio custava meia
   tela de celular no ponto em que a pessoa já está indo para o botão. */
@media(max-width:899px){.d-fone--menor{width:min(206px,58vw);border-width:8px;border-radius:26px}}

/* ⚠️ O mockup NÃO estica. Ele tem largura fixa e o texto ocupa o resto:
   sem flex none o aparelho crescia junto e o telefone ficava do tamanho de
   um tablet nas telas largas. E o alinhamento é pelo TOPO, não pelo centro: a
   lista tem quatro itens e o vídeo é alto, então centralizar deixava o primeiro
   item flutuando no meio da tela, longe do título que o anuncia. */
.d-demo{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:900px){
  .d-demo{flex-direction:row;align-items:flex-start;gap:3rem}
  .d-demo .d-fone{flex:none;margin-inline:0}
  /* Teto de medida de leitura: sem ele a lista esticava até a borda do
     container e cada item virava uma linha de cem caracteres. */
  .d-demo__texto{flex:1;min-width:0;max-width:34rem;align-self:stretch}
  .d-demo--invertido{flex-direction:row-reverse}

  /* ⚠️ O DESEQUILÍBRIO QUE O FILIPE VIU: o aparelho tem 448px e a lista tinha
     262px, então sobravam 186px de vazio, quase metade do bloco, colados na
     coluna da direita. Aqui os quatro itens passam a dividir a altura do vídeo
     em partes iguais, com o texto centrado em cada faixa. O primeiro encosta no
     topo do aparelho, o último na base, e os fios ficam em intervalos regulares:
     é isso que faz o par parecer uma coisa só em vez de duas soltas. */
  .d-demo__texto > .d-pontos{display:flex;flex-direction:column;height:100%}
  .d-demo__texto > .d-pontos li{flex:1;display:flex;flex-direction:column;justify-content:center}

  /* Mesma cura, dose diferente. No fechamento a coluna da direita tem só o
     parágrafo e o botão: esticar mandaria o botão para a base do aparelho,
     longe do texto que o justifica. Centrar resolve o vazio sem separar os
     dois. */
  .d-demo--centro{align-items:center}
  .d-demo--centro .d-demo__texto{align-self:center}
}
/* No celular a lista encosta no aparelho; um respiro a separa sem custar tela. */
.d-demo__texto .d-pontos--linha li:first-child{border-top:0;padding-top:0}

/* ---------- pontos: cartão com colchete ---------- */
.d-pontos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.d-pontos li{
  position:relative;background:var(--d-fundo-2);
  border:1px solid var(--d-borda);border-radius:3px;
  padding:1rem 1.1rem 1.05rem;
}
/* traço de canto superior esquerdo, discreto, na cor de alerta */
.d-pontos li::before{
  content:"";position:absolute;left:-1px;top:-1px;width:12px;height:12px;
  border-left:2px solid var(--amarelo);border-top:2px solid var(--amarelo);
  border-radius:3px 0 0 0;
}
.d-pontos b{
  display:block;font-family:var(--d-mono);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--amarelo);margin-bottom:.4rem;
}
.d-pontos span{display:block;font-size:.96rem;line-height:1.58;color:var(--d-texto-fraco)}
.d-sec--claro .d-pontos li{background:var(--d-papel-2);border-color:var(--d-papel-linha)}
.d-sec--claro .d-pontos li::before{border-color:var(--laranja)}
.d-sec--claro .d-pontos b{color:var(--laranja)}
.d-sec--claro .d-pontos span{color:var(--d-tinta-fraca)}

/* Linha que amarra a lista logo abaixo. Não é lead nem rótulo: é a primeira
   metade de uma frase que os itens completam, então fica perto deles (margem
   curta) e em peso intermediário, para o olho ler os dois como uma coisa só. */
.d-antes{
  font-size:clamp(.98rem,2.5vw,1.08rem);line-height:1.5;font-weight:600;
  letter-spacing:-.012em;margin-bottom:.75rem;color:var(--d-texto);
}
.d-sec--claro .d-antes{color:var(--d-tinta)}

/* ---------- a placa do prejuízo ---------- */
/* ⚠️ Existe porque o bloco do limite era a única seção da página SEM nenhum
   elemento não textual: 108 palavras de tipo corrido, e o olho não tinha onde
   pousar. Não entrou ilustração nem palavra nova: o que virou objeto foi o
   próprio argumento do bloco, o contraste entre anos e minutos. */
.d-placa{
  position:relative;
  background:#fff;border:1px solid var(--d-papel-linha);border-radius:4px;
  /* ⚠️ Respiro APERTADO de propósito. O bloco estava pesado demais e o objeto
     entrou para aliviar, não para crescer: com o respiro folgado que eu tinha
     posto, a seção subia 103px. */
  padding:1.25rem 1.2rem;margin-bottom:.95rem;
  box-shadow:0 16px 38px -26px rgba(10,12,16,.85);
}
.d-placa p{
  margin:0;
  font-size:clamp(1.08rem,3.3vw,1.32rem);line-height:1.45;font-weight:600;
  letter-spacing:-.018em;color:var(--d-tinta);text-wrap:pretty;
}
/* ⚠️ As duas palavras do contraste sobem de peso e de corpo, NÃO de cor. Em
   laranja elas brigariam com os rótulos dos dois itens logo abaixo, e cor de
   alerta usada duas vezes na mesma tela deixa de alertar. */
.d-placa b{font-weight:800;font-size:1.1em;letter-spacing:-.032em}

/* O colchete de canto, igual ao do monitor da primeira dobra. Só funciona onde
   há ÁREA: aqui a placa ocupa a largura toda. Na figura de 60px da cadeia o
   mesmo desenho lê como defeito de recorte. */
.d-placa::after{
  content:"";position:absolute;inset:8px;pointer-events:none;
  background:
    linear-gradient(var(--laranja),var(--laranja)) left top,
    linear-gradient(var(--laranja),var(--laranja)) left top,
    linear-gradient(var(--laranja),var(--laranja)) right top,
    linear-gradient(var(--laranja),var(--laranja)) right top,
    linear-gradient(var(--laranja),var(--laranja)) left bottom,
    linear-gradient(var(--laranja),var(--laranja)) left bottom,
    linear-gradient(var(--laranja),var(--laranja)) right bottom,
    linear-gradient(var(--laranja),var(--laranja)) right bottom;
  background-repeat:no-repeat;
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
}
/* Se a placa um dia cair em seção escura, ela vira superfície elevada. */
.d-sec:not(.d-sec--claro) .d-placa{
  background:var(--d-fundo-2);border-color:var(--d-borda);
}
.d-sec:not(.d-sec--claro) .d-placa p{color:var(--d-texto)}
.d-sec:not(.d-sec--claro) .d-placa::after{
  background-image:
    linear-gradient(var(--amarelo),var(--amarelo)),linear-gradient(var(--amarelo),var(--amarelo)),
    linear-gradient(var(--amarelo),var(--amarelo)),linear-gradient(var(--amarelo),var(--amarelo)),
    linear-gradient(var(--amarelo),var(--amarelo)),linear-gradient(var(--amarelo),var(--amarelo)),
    linear-gradient(var(--amarelo),var(--amarelo)),linear-gradient(var(--amarelo),var(--amarelo));
}

/* Versão em linha, sem moldura. ⚠️ Existe por causa de medição, não de gosto:
   no celular cada cartão custava cerca de 118px para entregar duas linhas de
   texto, e três deles comiam meia tela só de borda e respiro. Em linha o mesmo
   conteúdo cabe em 85px. Onde a lista é ARGUMENTO (o limite da câmera) vale a
   versão em linha; o cartão fica onde a lista é INVENTÁRIO. */
.d-pontos--linha{gap:0}
.d-pontos--linha li{
  background:none;border:0;border-radius:0;
  padding:.8rem 0;border-top:1px solid var(--d-borda);
}
.d-pontos--linha li::before{display:none}
.d-pontos--linha li:last-child{border-bottom:1px solid var(--d-borda)}
.d-pontos--linha b{margin-bottom:.2rem}
.d-pontos--linha span{font-size:.94rem;line-height:1.5}
.d-sec--claro .d-pontos--linha li{background:none;border-color:var(--d-papel-linha)}

/* ---------- a cadeia de resposta: o sinal descendo ---------- */
/* Cada passo tem um espaço fixo à esquerda. Nos três primeiros entra a foto do
   equipamento de verdade; do quarto em diante entra só um nó.
   ⚠️ Isso NÃO é falta de imagem, é o argumento da página desenhado: a cadeia
   começa em equipamento e termina em gente. A ausência da foto é justamente
   onde deixa de ser aparelho. */
:root{--d-slot:60px}
@media(min-width:420px){:root{--d-slot:68px}}

.d-passos{list-style:none;margin:0;padding:0;counter-reset:p}
.d-passos li{
  position:relative;display:grid;
  grid-template-columns:var(--d-slot) minmax(0,1fr);
  gap:.9rem;padding-bottom:1.15rem;
}
.d-passos li:last-child{padding-bottom:0}

/* ⚠️ A cadeia nasceu dentro de seção CLARA e ficou com os tokens de papel
   escritos no osso (`--d-papel-linha`, `--d-tinta-fraca`). Quando o bloco da
   resposta virou escuro, ela apareceu com fio e texto invisíveis. Agora o
   padrão é o ESCURO, que é o padrão da página, e o claro é a exceção. */

/* fio ligando um passo ao outro, no eixo do espaço da esquerda.
   O fio nasce na cor da marca e vai esfriando: o sinal começa quente no
   equipamento e o trecho de baixo já é só condução. */
/* ⚠️ O amarelo em opacidade média sobre quase-preto vira mostarda suja. Por
   isso o trecho colorido é CURTO e em opacidade cheia, e a passagem para o
   neutro acontece rápido: o olho lê "amarelo saindo do equipamento", não uma
   linha de cor indefinida descendo a seção inteira. */
.d-passos li::before{
  content:"";position:absolute;left:calc(var(--d-slot) / 2 - 1px);
  top:calc(var(--d-slot) + 6px);bottom:-2px;width:2px;
  background:linear-gradient(180deg,var(--amarelo) 0,rgba(255,199,9,.32) 16%,var(--d-borda-forte) 44%);
}
.d-passos li:last-child::before{display:none}
.d-sec--claro .d-passos li::before{
  background:linear-gradient(180deg,var(--laranja) 0,rgba(240,76,35,.3) 16%,var(--d-papel-linha) 44%);
}

/* ⚠️ A placa continua BRANCA no escuro, e isso é de propósito: as fotos de
   equipamento são JPEG de fundo branco chapado, então placa escura deixaria um
   quadrado branco recortado dentro dela. Sobre o fundo da página o branco vira
   a vitrine do produto, que é o oposto do que acontecia no bege, onde a foto
   sumia dentro da seção. */
.d-passos__fig{
  position:relative;
  width:var(--d-slot);height:var(--d-slot);border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid var(--d-borda-forte);
  display:grid;place-items:center;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.9);
}
.d-sec--claro .d-passos__fig{border-color:var(--d-papel-linha);box-shadow:none}
.d-passos__fig img{width:100%;height:100%;object-fit:contain;display:block}
/* ⛔ TENTEI e tirei: colchete de canto em cima da placa, citando o monitor. Em
   60px o colchete fica proporcionalmente enorme, encosta no produto e lê como
   defeito de recorte, não como assinatura. O colchete precisa de área para
   funcionar, e é por isso que ele vive no monitor da primeira dobra. Aqui a
   marca entra pelo fio e pelo número, que têm espaço. */

/* espaço sem foto: o nó continua, o objeto acabou */
.d-passos__no{width:var(--d-slot);height:var(--d-slot);display:grid;place-items:center}
.d-passos__no::after{
  content:"";width:16px;height:16px;border-radius:50%;
  background:var(--laranja);box-shadow:0 0 0 5px rgba(240,76,35,.16);
}

.d-passos__txt{align-self:center;min-width:0}
/* ⚠️ O número era .66rem cinza-laranja e sumia: em um bloco de cinco passos,
   ele é a única coisa que diz ao olho que aquilo é uma SEQUÊNCIA, e era menor
   que a legenda. Subiu de corpo e ganhou a cor de alerta cheia. */
.d-passos__n{
  counter-increment:p;
  font-family:var(--d-mono);font-size:.78rem;font-weight:500;letter-spacing:.16em;
  color:var(--amarelo);display:block;margin-bottom:.15rem;
}
.d-sec--claro .d-passos__n{color:var(--laranja)}
.d-passos__n::before{content:counter(p,decimal-leading-zero)}
.d-passos b{display:block;font-weight:700;font-size:1.02rem;letter-spacing:-.015em;margin-bottom:.2rem}
.d-passos span.d-passos__d{display:block;font-size:.94rem;line-height:1.55;color:var(--d-texto-fraco)}
.d-sec--claro .d-passos span.d-passos__d{color:var(--d-tinta-fraca)}

/* a quebra: aqui a cadeia sai do equipamento e entra em gente */
.d-passos .d-quebra{
  display:flex;align-items:center;gap:.9rem;padding:.2rem 0 1.5rem;
  font-family:var(--d-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-texto-fraco);grid-template-columns:none;
}
.d-passos .d-quebra::before{display:none}
.d-passos .d-quebra::after{content:"";flex:1;height:1px;background:var(--d-borda)}
.d-sec--claro .d-passos .d-quebra{color:var(--d-tinta-fraca)}
.d-sec--claro .d-passos .d-quebra::after{background:var(--d-papel-linha)}

/* ---------- vitrine: a demonstração em superfície própria ---------- */
/* ⚠️ Existe por medição: a demonstração é 968px dos 2.030px do bloco da
   resposta, quase METADE dele, e sem nenhuma marca de superfície a rolagem lia
   os dois como um bloco só que não termina.
   ⚠️ Fundo ELEVADO, não seção clara. Clara aqui emendaria com o investimento e
   devolveria 2,2 telas de claro seguidas, que é o problema que a alternância
   da página resolveu. Aqui o degrau é dentro da própria família escura. */
.d-vitrine{
  background:var(--d-fundo-2);
  border-block:1px solid var(--d-borda);
  padding-block:clamp(2rem,5.5vw,3.2rem);
  margin-top:clamp(2rem,6vw,3.4rem);
}
/* Sendo o último filho da seção, ela sobe por cima do respiro de baixo e
   encosta na seção seguinte: assim a emenda é entre DUAS superfícies, sem uma
   faixa do fundo da página sobrando entre elas. */
.d-vitrine:last-child{margin-bottom:calc(var(--d-ritmo) * -1)}
.d-sec--claro .d-vitrine{background:#fff;border-color:var(--d-papel-linha)}
/* ⚠️ O aparelho perde contorno aqui: a moldura dele é #1A1E27 e a vitrine é
   #12151B, quase a mesma tinta. No fundo da página a diferença era o dobro.
   Sombra mais funda devolve o descolamento sem clarear a moldura, que faria o
   mockup parecer de plástico. */
.d-vitrine .d-fone{box-shadow:0 0 0 1px var(--d-borda-forte),0 34px 68px -18px rgba(0,0,0,1)}

/* ---------- faixa de passagem ---------- */
/* ⚠️ Não é respiro visual, é argumento. Quem lê esta página já disse em voz
   alta que só queria câmera. Enquanto ela achar que concordar significa admitir
   que errou, o resto da página não entra. A faixa devolve a escolha dela antes
   de mostrar a resposta.

   Por isso ela NÃO é `.d-sec`: é mais baixa que uma seção, aparece no fundo
   elevado em vez do fundo da página, e não repete o ritmo das outras. Ela é
   passagem, não parada. E é o que marca a virada de assunto que faltava: até
   aqui era limite, daqui para frente é resposta.

   ⛔ Nada de risco decorativo antes do texto. Traço na tela dispara a mesma
   regra que traço na escrita, mesmo sendo enfeite. Quem separa aqui é o rótulo
   em monoespaçada, que a página já usa. */
.d-passagem{
  padding:clamp(2.15rem,6vw,3.6rem) 0;
  background:var(--d-fundo-2);
  border-block:1px solid var(--d-borda);
}
.d-passagem__linha{max-width:42rem}
.d-passagem__linha > p{
  margin-top:1rem;
  font-size:clamp(1.4rem,4.6vw,2.1rem);line-height:1.16;font-weight:700;
  letter-spacing:-.03em;text-wrap:balance;
}
/* A segunda frase começa sempre em linha nova. Correndo solta, a quebra caía no
   meio dela e deixava um "Eu" pendurado no fim da primeira, o que embaralha
   justamente a figura que sustenta a frase: nega, depois oferece. */
.d-passagem__linha > p b{display:block;font-weight:700;color:var(--amarelo)}
.d-passagem .d-passagem__nota{
  margin-top:.85rem;
  font-size:clamp(.98rem,2.5vw,1.08rem);line-height:1.6;font-weight:300;
  letter-spacing:0;color:var(--d-texto-fraco);
}

/* ---------- dúvidas ---------- */
/* <details> nativo: abre sem JavaScript, é acessível de teclado e não custa
   script nenhum. O JS só escuta para saber qual dúvida foi aberta. */
/* ⚠️ Eram seis linhas idênticas, o bloco mais morto da página. O que entrou é
   estrutura, não enfeite: o índice em monoespaçada diz que é uma LISTA
   numerada, e a linha inteira acende de leve ao passar o dedo, para o toque ter
   resposta. Número em cinza, nunca na cor de alerta: a cor de alerta aqui é do
   sinal de abrir, e duas coisas gritando na mesma linha não deixam nenhuma. */
.d-duvidas{border-top:1px solid var(--d-borda);counter-reset:q}
.d-duvida{border-bottom:1px solid var(--d-borda);position:relative;counter-increment:q;transition:background-color .15s ease}
.d-duvida:hover{background:rgba(255,255,255,.022)}
/* ⚠️ O índice ocupa uma caixa da ALTURA DA PRIMEIRA LINHA da pergunta e centra
   dentro dela. Ancorado por um `top` solto ele descolava conforme a pergunta
   tivesse uma ou duas linhas. */
.d-duvida::before{
  content:counter(q,decimal-leading-zero);
  position:absolute;left:0;top:.95rem;height:1.43rem;pointer-events:none;
  display:flex;align-items:center;
  font-family:var(--d-mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--d-texto-fraco);opacity:.65;
}
.d-duvida summary{
  cursor:pointer;list-style:none;padding:.95rem 2.8rem .95rem 2.35rem;position:relative;
  font-weight:600;font-size:1.02rem;line-height:1.4;letter-spacing:-.01em;
  transition:color .15s ease;
}
.d-duvida summary::-webkit-details-marker{display:none}
.d-duvida summary:hover{color:var(--amarelo)}
/* ⚠️ ISTO ERA UM "+" TORTO. As duas barras tinham âncoras independentes
   (right .35rem contra .75rem, top 1.3rem contra .85rem) e os centros não
   batiam: sobrava cerca de 2px em cada eixo e o sinal saía como um "⊥". Passava
   despercebido enquanto nada estava alinhado com ele; com o índice do lado
   ficou gritante. Agora as duas partem do MESMO centro, calculado a partir da
   primeira linha da pergunta, e cada uma só se desloca meia medida de si. */
.d-duvida summary::after{
  content:"";position:absolute;right:.35rem;top:calc(1.665rem - 1px);
  width:12px;height:2px;background:var(--amarelo);
}
.d-duvida summary::before{
  content:"";position:absolute;right:calc(.35rem + 5px);top:calc(1.665rem - 6px);
  width:2px;height:12px;background:var(--amarelo);
  transition:transform .2s ease,opacity .2s ease;
}
.d-duvida[open] summary::before{transform:rotate(90deg);opacity:0}
.d-duvida summary:focus-visible{outline:2px solid var(--amarelo);outline-offset:2px}
.d-duvida__r{padding:0 2.8rem 1.05rem 2.35rem;font-size:.98rem;line-height:1.62;color:var(--d-texto-fraco);max-width:56ch}
.d-sec--claro .d-duvida:hover{background:rgba(10,12,16,.025)}
.d-sec--claro .d-duvida::before{color:var(--d-tinta-fraca)}
.d-sec--claro .d-duvidas,.d-sec--claro .d-duvida{border-color:var(--d-papel-linha)}
.d-sec--claro .d-duvida summary::after,.d-sec--claro .d-duvida summary::before{background:var(--laranja)}
.d-sec--claro .d-duvida summary:hover{color:var(--laranja)}
.d-sec--claro .d-duvida__r{color:var(--d-tinta-fraca)}

/* ---------- as duas formas de contratação ---------- */
/* ⚠️ Lado a lado, nunca uma embaixo da outra sem moldura: a escolha só existe
   se as duas forem vistas juntas. No celular empilha, e por isso o comodato vem
   PRIMEIRO no HTML, para ser lido antes de qualquer coisa.

   ⛔ Nenhum valor aqui. A rede pratica preços diferentes na mesma semana, e o
   número vai na proposta. Estes cartões vendem a ESCOLHA, não o preço.

   ⚠️ A linha em destaque de cada cartão é a ENTRADA, não a mensalidade. Foi o
   erro que já apareceu no PDF de proposta: comparando mensalidade, o leigo bate
   o olho e conclui que comprar sai mais barato, ignorando o desembolso do kit. */
.d-formatos{display:grid;gap:1.1rem}
@media(min-width:800px){.d-formatos{grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}}

/* ⚠️ O cartão comum era um retângulo cinza chapado com fio de 1px, do lado de
   um cartão destacado que tinha sombra: parecia recorte, não cartão. Sombra
   baixa e larga dá espessura sem competir com o destaque, que continua sendo o
   único com contorno na cor da marca. */
.d-formato{
  position:relative;
  background:var(--d-papel-2);border:1px solid var(--d-papel-linha);border-radius:4px;
  padding:1.45rem 1.2rem 1.35rem;
  box-shadow:0 10px 24px -20px rgba(10,12,16,.75);
}
.d-formato--destaque{
  background:#fff;border-color:var(--laranja);
  box-shadow:0 0 0 1px var(--laranja),0 14px 34px -22px rgba(0,0,0,.45);
}
/* ⚠️ O selo sai do fluxo e monta na borda de cima. Dentro do fluxo ele empurrava
   o conteúdo do cartão destacado para baixo, e lado a lado no desktop as duas
   linhas de desembolso ficavam em alturas diferentes: a comparação só funciona
   se "Sem entrada" e "Você compra o kit" estiverem na mesma linha do olho. */
.d-formato__selo{
  position:absolute;top:0;left:1.2rem;transform:translateY(-50%);
  background:var(--laranja);color:#fff;border-radius:999px;
  font-family:var(--d-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.32rem .7rem;white-space:nowrap;
}
.d-formato__nome{
  font-size:.7rem;font-weight:500;font-family:var(--d-mono);
  text-transform:uppercase;letter-spacing:.16em;color:var(--d-tinta-fraca);
  margin-bottom:.45rem;
}
.d-formato__linha{
  font-size:clamp(1.15rem,3.4vw,1.4rem);line-height:1.2;font-weight:700;
  letter-spacing:-.02em;color:var(--d-tinta);margin-bottom:.6rem;
}
/* ⛔ SEM USO desde 11/08: o parágrafo de cada cartão virou par rótulo e
   resposta, abaixo. Fica na folha caso a prosa volte. */
.d-formato__txt{font-size:.93rem;line-height:1.6;color:var(--d-tinta-fraca)}

/* ⚠️ As três perguntas de cada cartão, em par rótulo e resposta. O que separa
   o rótulo da resposta é FAMÍLIA e tamanho, não cor forte: o laranja aqui já é
   do selo "o mais escolhido", e gastar a cor de alerta em seis rótulos faria o
   selo deixar de ser destaque. */
/* ⚠️ MEDIDO, e a minha primeira versão errou: com rótulo EMPILHADO em cima da
   resposta, o bloco cortou 26 palavras e mesmo assim CRESCEU 77px, porque cada
   rótulo passou a ocupar uma linha inteira só para si. Em duas colunas o rótulo
   divide a linha com a resposta e o cartão volta a caber. */
.d-formato__itens{
  margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.5rem .85rem;align-items:baseline;
}
.d-formato__itens dt{
  font-family:var(--d-mono);font-size:.61rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:#9198A6;
  white-space:nowrap;
}
.d-formato__itens dd{
  margin:0;font-size:.9rem;line-height:1.5;color:var(--d-tinta-fraca);text-wrap:pretty;
}
/* Em tela estreita a coluna do rótulo come metade da linha e a resposta quebra
   em torre. Abaixo de 360px o par volta a empilhar. */
@media(max-width:359px){
  .d-formato__itens{grid-template-columns:1fr;gap:.15rem}
  .d-formato__itens dd{margin-bottom:.5rem}
}

/* ---------- o que está incluso ---------- */
/* ⚠️ Duas colunas JÁ NO CELULAR. Em coluna única os oito itens comiam mais de
   oitocentos pixels de rolagem para dizer oito coisas curtas, e esta é uma
   lista de conferência: a pessoa varre, ela não lê linha por linha. Só volta a
   uma coluna em tela muito estreita, onde duas quebrariam demais. */
.d-inclui{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
@media(min-width:360px){.d-inclui{grid-template-columns:1fr 1fr}}
.d-inclui li{
  display:flex;gap:.6rem;align-items:flex-start;
  background:var(--d-papel-2);border:1px solid var(--d-papel-linha);border-radius:3px;
  padding:.8rem .85rem;font-size:.9rem;line-height:1.4;
}
@media(min-width:640px){.d-inclui li{gap:.75rem;padding:.85rem 1rem;font-size:.95rem;line-height:1.45}}
.d-inclui svg{width:17px;height:17px;flex:none;color:var(--laranja);margin-top:.15rem}

/* Versão em fita: os quatro itens correm na mesma faixa, quebrando onde couber.
   ⚠️ Em cartão eles custavam 144px para dizer quatro coisas de três palavras.
   Isto não é lista de argumento, é confirmação: a pessoa varre e segue. */
.d-inclui--fita{display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.d-inclui--fita li{
  background:none;border:0;border-radius:0;padding:0;
  gap:.35rem;align-items:center;font-size:.88rem;line-height:1.5;
  color:var(--d-tinta-fraca);
}
.d-inclui--fita svg{width:14px;height:14px;margin-top:0}

/* ---------- chamada ao fim de cada argumento ---------- */
/* ⚠️ Uma por bloco, não só no fim da página. Quem lê isto é dono de comércio,
   muitas vezes leigo, e não vai varrer a página inteira: fechou um raciocínio,
   a saída precisa estar ali. Compacta de propósito, para repetir sem inchar. */
.d-cta{
  display:flex;flex-direction:column;gap:.85rem;align-items:flex-start;
  border-top:1px solid var(--d-borda);padding-top:1.1rem;margin-top:1.4rem;
}
.d-cta p{font-size:1rem;line-height:1.45;font-weight:600;letter-spacing:-.01em;max-width:32ch}
/* Chamada sem linha de apoio: o botão emenda direto no argumento acima, então
   o fio de cima e o respiro grande sobravam e deixavam o botão boiando. */
.d-cta--so-botao{border-top:0;padding-top:0;margin-top:1.4rem}
.d-sec--claro .d-cta{border-color:var(--d-papel-linha)}
@media(min-width:640px){
  .d-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:1.8rem}
  .d-cta p{max-width:38ch}
  /* Lado a lado o botão encolhia até o rótulo quebrar em três linhas dentro da
     pílula. Aqui quem cede espaço é o texto, nunca a chamada. */
  .d-cta .btn{flex:none;white-space:nowrap}
}

/* ---------- telas estreitas: rótulo de botão não quebra ---------- */
/* ⚠️⚠️ MEDIDO em 11/08 e passou meses despercebido: em 375px (iPhone SE, 8,
   13 mini) o rótulo "QUERO A MINHA PROPOSTA" quebrava em DUAS LINHAS dentro da
   pílula; em 360px (Android comum) quebravam dois botões; em 320px, os QUATRO.
   Escapou porque a varredura media OVERFLOW em 320 e 390, e quebra de rótulo
   não é overflow: nada estoura da tela, o botão só fica feio.
   Quem cede é o respiro lateral da pílula e um ponto de corpo, nunca o rótulo:
   encurtar a chamada para caber em aparelho pequeno seria deixar o aparelho
   escrever a copy. */
@media(max-width:399px){
  body.d-page .btn--zap{padding-inline:1.25rem;font-size:.98rem}
  /* ⚠️⚠️ A BARRA DO TOPO FICA DE FORA. A regra acima é `body.d-page .btn--zap`
     e ganha de `.d-topo .btn` por especificidade, então ela vazou para o botão
     do cabeçalho e o AUMENTOU de 12,48px para 15,68px em telas de até 399px,
     engordando a barra de 64px para 68px. O botão do topo é chrome de
     interface, não chamada de bloco: ele tem tamanho próprio e menor de
     propósito, porque fica fixo na tela a rolagem inteira. */
  body.d-page .d-topo .btn--zap{font-size:.78rem;padding-inline:1.05rem}
  /* A fita de itens inclusos ia para QUATRO linhas, uma por item, porque os
     dois maiores somavam mais que a largura útil. Corpo e respiro menores
     devolvem os dois por linha, que é como uma lista de conferência se lê. */
  .d-inclui--fita{gap:.3rem .6rem}
  .d-inclui--fita li{font-size:.82rem}
}
/* Degrau extra para 320px (iPhone SE de primeira geração, Fold fechado). Nessa
   largura sobram 280px úteis e nem o botão do topo cabia inteiro. */
@media(max-width:349px){
  body.d-page .btn--zap{padding-inline:.95rem;font-size:.9rem;gap:.5rem}
  body.d-page .d-topo .btn{padding-inline:.8rem;font-size:.72rem}
}

/* ---------- abas: casa ou comércio ---------- */
/* As duas demonstrações viviam em seções separadas e dobravam o tamanho da
   página à toa: ninguém é dono de casa E de loja ao mesmo tempo na hora de
   ler. Agora é um bloco só e a pessoa escolhe o que interessa a ela. */
/* ⚠️ AS DUAS ABAS TÊM A MESMA LARGURA. Antes cada uma media o próprio
   texto, saíam 127px e 159px lado a lado, e o par ficava torto justamente onde
   o olho procura simetria. Largura mínima igual resolve sem grid rígido. */
.d-abas{display:inline-flex;gap:.4rem;margin-bottom:1.4rem;flex-wrap:wrap}
.d-aba{
  appearance:none;background:transparent;cursor:pointer;
  border:1px solid var(--d-borda-forte);border-radius:999px;
  font-family:var(--d-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-texto-fraco);padding:.6rem 1.1rem;min-height:42px;
  min-width:10.5rem;text-align:center;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
@media(max-width:400px){.d-aba{min-width:0;flex:1}}
.d-aba:hover{color:var(--d-texto);border-color:var(--d-texto-fraco)}
.d-aba[aria-selected="true"]{background:var(--amarelo);border-color:var(--amarelo);color:var(--preto);font-weight:700}
/* ⚠️ Foco por SOMBRA, não por outline. O outline com offset desenhava um anel
   solto em volta da pílula e ficava no ar depois do clique, o que o Filipe leu
   como efeito estranho. A sombra acompanha o raio da borda e some no fundo. */
.d-aba:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,199,9,.35)}

/* A demonstração passou a viver dentro do bloco claro da resposta, e as abas
   nasceram para fundo escuro: cinza sobre bege ficava quase invisível. */
.d-sec--claro .d-aba{border-color:var(--d-papel-linha);color:var(--d-tinta-fraca)}
.d-sec--claro .d-aba:hover{color:var(--d-tinta);border-color:var(--d-tinta-fraca)}
.d-sec--claro .d-aba[aria-selected="true"]{background:var(--laranja);border-color:var(--laranja);color:#fff}
.d-sec--claro .d-aba:focus-visible{outline-color:var(--laranja)}
.d-sec--claro .d-fone{box-shadow:0 0 0 1px var(--d-papel-linha),0 26px 52px -24px rgba(0,0,0,.5)}

/* ---------- assinatura de quem está falando ---------- */
/* ⛔ SEM USO desde 11/08: o Filipe mandou tirar a identificação do fechamento,
   porque nome e praça eram o último conteúdo variável por unidade e a página é
   padrão para toda a rede. As regras ficam aqui caso a assinatura volte; o JS
   usa querySelectorAll, então zero elemento não quebra nada. */
.d-quem{display:flex;align-items:center;gap:.8rem;min-width:0}
.d-quem__foto{
  width:2.6rem;height:2.6rem;border-radius:50%;flex:none;
  background:var(--amarelo);color:var(--preto);
  display:grid;place-items:center;font-weight:800;font-size:1.05rem;
}
.d-quem__txt{min-width:0;line-height:1.3}
.d-quem__nome{display:block;font-weight:700;font-size:.95rem}
.d-quem__praca{
  display:block;font-family:var(--d-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-texto-fraco);
}
.d-fecha .d-quem__foto{background:var(--preto);color:var(--amarelo)}
.d-fecha .d-quem__praca{color:#4A4126}

/* ---------- fechamento ---------- */
.d-fecha{background:var(--amarelo);color:var(--preto)}
.d-fecha .d-rotulo{color:var(--preto);opacity:.6}
.d-fecha .d-h2{color:var(--preto)}
.d-fecha .d-lead,.d-fecha .d-mini{color:#4A4126}
.d-fecha .d-fone{box-shadow:0 0 0 1px rgba(0,0,0,.16),0 26px 52px -20px rgba(0,0,0,.4)}
/* ⚠️ Eram quatro pílulas verdes idênticas, do mesmo tamanho, e a última não
   parecia o destino, parecia mais uma. Esta é a única que ocupa a linha inteira
   no celular e a única com corpo maior: no fim da página não existe próximo
   passo depois dela. */
.d-fecha .btn--zap{
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  width:100%;justify-content:center;padding-block:1.3rem;font-size:1.1rem;
}
@media(min-width:560px){.d-fecha .btn--zap{width:auto;padding-inline:2.4rem}}

/* ---------- rodapé ---------- */
.d-rodape{padding:2.4rem 0 2.8rem;border-top:1px solid var(--d-borda)}

/* No celular tudo empilha, que é o único desenho possível em 390px. A partir de
   760px vira linha: assinatura na esquerda, aviso legal na direita. */
.d-rodape__linha{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
@media(min-width:760px){
  .d-rodape__linha{
    flex-direction:row;justify-content:space-between;align-items:flex-start;
    gap:2rem 4rem;
  }
}

.d-rodape__marca{display:flex;flex-direction:column;gap:.85rem;flex:none}
.d-rodape img{height:42px;width:auto;display:block}

.d-rodape p{font-family:var(--d-mono);font-size:.7rem;line-height:1.65;margin:0}
/* ⚠️ A razão social e o aviso legal tinham a MESMA cor e o mesmo tamanho,
   separados só por uma quebra de linha: o olho lia as quatro linhas como um
   parágrafo só e a assinatura da unidade sumia dentro do disclaimer. Quem
   assina fica um tom acima; o aviso continua sendo o texto mais apagado da
   página, que é o peso que ele merece. */
.d-rodape__razao{color:#AEB6C4;letter-spacing:.02em}
.d-rodape__aviso{color:var(--d-texto-fraco);max-width:52ch}

/* ---------- entrada em cena ---------- */
/* Um movimento só, curto, na hora em que o bloco aparece. Nada de efeito
   espalhado: o que interessa é o texto, o movimento só marca a chegada. */
.d-rev{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.d-rev.d-vis{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .d-rev{opacity:1;transform:none}
}
/* Sem JavaScript o conteúdo não pode ficar invisível. */
.no-js .d-rev{opacity:1;transform:none}