/* ============================================================================
 * dp-site-premium.css — camada de refino do site institucional (v8).
 * ----------------------------------------------------------------------------
 * Entra DEPOIS do CSS inline do `headertpl.php` e é puramente ADITIVA: remover a
 * linha do <link> devolve o site v7 exatamente como estava. Nenhuma regra
 * existente foi reescrita — o que há aqui são camadas novas por cima.
 *
 * 🔴 A PEÇA ASSINATURA É "O FIO DA ROTA". O DrivePop é mobilidade: a página
 * inteira é uma rota que se percorre. Um fio desce pela lateral, se desenha
 * conforme a pessoa rola e acende uma parada em cada seção. Não é enfeite
 * genérico de landing page — é a marca contando o que ela faz. Foi a mesma ideia
 * que resolveu a tela de carregamento do app ("a rota que se fecha").
 *
 * 🔴 SÓ `transform` E `opacity` NO QUE SE MOVE POR ROLAGEM. É o que o compositor
 * desenha sem passar pela thread principal. O fio cresce com `scaleY`, não com
 * `height`; o brilho do cursor é um gradiente que muda de POSIÇÃO por variável,
 * sem recalcular layout. Site que engasga ao rolar não é premium, é lento.
 *
 * 🔴 TUDO RESPEITA `prefers-reduced-motion`, e o estado parado é o estado
 * COMPLETO (fio cheio, texto visível) — nunca um site pela metade.
 * ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────
   1. RITMO — os vãos entre seções estavam grandes demais
   🔴 `.dp-section` tinha 148px em cima e embaixo: 296px de nada entre um bloco e
   o seguinte. Em tela cheia isso lê como página inacabada. 116px mantém o ar sem
   o buraco — e o fio da rota passa a ocupar esse respiro com movimento.
   ────────────────────────────────────────────────────────────────────────── */
.dp-section     { padding: 116px 0; }
@media (max-width: 991px) { .dp-section { padding: 88px 0; } }
@media (max-width: 575px) { .dp-section { padding: 68px 0; } }

/* costura luminosa entre uma seção e a próxima: emenda em vez de corte seco */
.dp-section-dark::before,
.dp-section-dark::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(108,59,255,0) 0%,
        rgba(108,59,255,0.35) 22%,
        rgba(0,212,255,0.45) 50%,
        rgba(108,59,255,0.35) 78%,
        rgba(108,59,255,0) 100%);
    opacity: .5;
    pointer-events: none;
}
.dp-section-dark::before{ top: 0; }
.dp-section-dark::after { bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   2. O FIO DA ROTA — a peça que só o DrivePop tem
   ────────────────────────────────────────────────────────────────────────── */
.dp-rota{
    position: fixed;
    left: 30px;
    top: 12vh;
    bottom: 12vh;
    width: 2px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s var(--ease, ease);
}
.dp-rota.is-on{ opacity: 1; }
@media (max-width: 1180px){ .dp-rota{ display: none; } }

/* trilho apagado */
.dp-rota-trilho{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.09) 12%,
        rgba(255,255,255,0.09) 88%,
        rgba(255,255,255,0) 100%);
    border-radius: 2px;
}

/* 🔴 O TRECHO PERCORRIDO CRESCE COM `scaleY`, NÃO COM `height`. `height` refaz
   layout a cada quadro de rolagem; `scaleY` é composto na GPU. A variável
   `--dp-rota` é escrita uma vez por quadro pelo JS. */
.dp-rota-feito{
    position: absolute;
    inset: 0;
    transform-origin: 50% 0%;
    transform: scaleY(var(--dp-rota, 0));
    background: linear-gradient(180deg, var(--purple, #6C3BFF) 0%, var(--cyan, #00D4FF) 100%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(108,59,255,.55);
}

/* farol: a luz que viaja na ponta do fio */
.dp-rota-farol{
    position: absolute;
    left: 50%;
    top: 0;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 10px 2px rgba(0,212,255,.9), 0 0 26px 6px rgba(108,59,255,.55);
    transform: translateY(calc(var(--dp-rota, 0) * var(--dp-rota-h, 0px)));
}

/* paradas: uma por seção, acendem quando a seção entra em cena */
.dp-rota-parada{
    position: absolute;
    left: 50%;
    width: 7px; height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #16161F;
    border: 1.5px solid rgba(255,255,255,0.20);
    transform: translateY(-50%) scale(1);
    transition: transform .45s var(--ease, ease), border-color .45s ease, background .45s ease;
}
.dp-rota-parada.is-on{
    background: var(--cyan, #00D4FF);
    border-color: rgba(0,212,255,.9);
    transform: translateY(-50%) scale(1.5);
}
/* 🔴 O NOME DA PARADA SÓ APARECE ONDE HÁ MARGEM DE VERDADE. O conteúdo tem
   contêiner de 1320px; abaixo de ~1660px de janela a sobra lateral não comporta
   o rótulo e ele invade o primeiro card — medido no aparelho: "SEGURANÇA" caía
   por cima de "Sistema de avaliações". Em tela menor ficam só os pontos, que já
   dizem onde a pessoa está. Texto que atropela conteúdo não é premium, é
   descuido. */
.dp-rota-parada span{ display: none; }

@media (min-width: 1660px){
    .dp-rota-parada span{
        display: block;
        position: absolute;
        left: 18px; top: 50%;
        transform: translateY(-50%) translateX(-6px);
        white-space: nowrap;
        font-family: var(--font, sans-serif);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--muted-2, #6B7080);
        opacity: 0;
        transition: opacity .45s ease, transform .45s var(--ease, ease), color .45s ease;
    }
    .dp-rota-parada.is-on span{
        opacity: 1;
        transform: translateY(-50%) translateX(0);
        color: var(--white, #F2F2F6);
    }
}

/* sem rótulo, quem marca a seção atual é o próprio ponto: anel que pulsa */
.dp-rota-parada.is-on::after{
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,212,255,.75);
    animation: dpParadaPulso 2.4s ease-out infinite;
}
@keyframes dpParadaPulso{
    0%  { transform: scale(1);   opacity: .9; }
    70% { transform: scale(3.2); opacity: 0; }
    100%{ transform: scale(3.2); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. LUZ QUE SEGUE O CURSOR nos cards
   🔴 Só onde existe cursor de verdade (`hover: hover`). Em toque, o brilho ficaria
   preso no último ponto tocado — um borrão parado no card.
   ────────────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine){
    .dp-luz{ position: relative; }
    .dp-luz::after{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity .35s ease;
        background: radial-gradient(320px circle at var(--dp-mx, 50%) var(--dp-my, 50%),
                    rgba(138,92,255,0.16) 0%,
                    rgba(0,212,255,0.08) 34%,
                    rgba(0,0,0,0) 62%);
    }
    .dp-luz.is-perto::after{ opacity: 1; }

    /* borda que acende do lado do cursor */
    .dp-luz::before{
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity .35s ease;
        padding: 1px;
        background: radial-gradient(220px circle at var(--dp-mx, 50%) var(--dp-my, 50%),
                    rgba(138,92,255,0.85) 0%, rgba(0,212,255,0.35) 40%, rgba(0,0,0,0) 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
    }
    .dp-luz.is-perto::before{ opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. TÍTULOS QUE SOBEM PALAVRA A PALAVRA
   🔴 O estado de repouso é VISÍVEL. Se o JS não rodar, ou se a pessoa pediu menos
   movimento, o título aparece inteiro — nunca uma página em branco esperando um
   script que talvez não venha.
   ────────────────────────────────────────────────────────────────────────── */
.dp-palavra{
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.dp-palavra > i{
    display: inline-block;
    font-style: inherit;
    transform: translateY(0);
    opacity: 1;
}
.dp-revelar .dp-palavra > i{
    transform: translateY(112%);
    opacity: 0;
    transition: transform .82s var(--ease, cubic-bezier(0.22,1,0.36,1)),
                opacity .52s ease;
    transition-delay: calc(var(--i, 0) * 42ms);
}
.dp-revelar.is-visivel .dp-palavra > i{
    transform: translateY(0);
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. BOTÃO COM ATRAÇÃO E VARREDURA DE LUZ
   ────────────────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine){
    .dp-ima{
        transition: transform .28s var(--ease, ease), box-shadow .35s ease;
        will-change: transform;
    }
    .dp-ima:hover{ box-shadow: 0 14px 40px rgba(108,59,255,.45); }
}
.dp-btn-primary{ position: relative; overflow: hidden; }
.dp-btn-primary .dp-lustro{
    position: absolute;
    top: 0; bottom: 0;
    width: 42%;
    left: -60%;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    animation: dpLustro 4.6s ease-in-out infinite;
    animation-delay: 1.4s;
}
@keyframes dpLustro{
    0%, 62%  { transform: translateX(0) skewX(-18deg); }
    82%, 100%{ transform: translateX(420%) skewX(-18deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CONTADORES — o número sobe quando entra em cena
   Só a fonte tabular, para o texto não "pular" de largura a cada número.
   ────────────────────────────────────────────────────────────────────────── */
.dp-hero-stat-num{ font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. PROFUNDIDADE NO HERO — camadas que respondem ao ponteiro e à rolagem
   ────────────────────────────────────────────────────────────────────────── */
#dp-hero{ overflow: hidden; }
.dp-hero-luz{
    position: absolute;
    left: 50%; top: 42%;
    width: 1100px; height: 1100px;
    margin: -550px 0 0 -550px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle,
        rgba(108,59,255,0.20) 0%,
        rgba(0,212,255,0.09) 34%,
        rgba(0,0,0,0) 64%);
    transform: translate3d(var(--dp-hx, 0px), var(--dp-hy, 0px), 0);
    transition: transform .9s cubic-bezier(0.22,1,0.36,1);
    animation: dpHeroPulso 8s ease-in-out infinite;
}
@keyframes dpHeroPulso{
    0%, 100%{ opacity: .75; }
    50%     { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. TOPO QUE MOSTRA O PROGRESSO DA LEITURA
   ────────────────────────────────────────────────────────────────────────── */
.dp-progresso{
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 2px;
    z-index: 1200;
    transform-origin: 0 50%;
    transform: scaleX(var(--dp-rota, 0));
    background: linear-gradient(90deg, var(--purple, #6C3BFF), var(--cyan, #00D4FF));
    box-shadow: 0 0 10px rgba(0,212,255,.55);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. REPOUSO = PÁGINA COMPLETA
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
    .dp-rota, .dp-progresso, .dp-hero-luz{ display: none !important; }
    .dp-btn-primary .dp-lustro{ animation: none !important; opacity: 0 !important; }
    .dp-revelar .dp-palavra > i{
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .dp-luz::before, .dp-luz::after{ display: none !important; }
}

/* ============================================================================
   POPUP DE INAUGURAÇÃO — TOLEDO/PR (2026-08-12)
   ----------------------------------------------------------------------------
   🔴 A CENA DO LAGO É DESENHADA (SVG), NÃO FOTOGRAFADA. A foto real do Lago
   Municipal disponível com licença livre exigia crédito visível ao autor
   (CC BY-SA) numa peça comercial. O dono preferiu ilustração própria — e é
   melhor: alguns KB em vez de megabytes, na paleta da marca, e ela SE MEXE.

   🔴 SÓ `transform` E `opacity` NO QUE ANIMA. Primeiro contato de quem chega:
   engasgo aqui é a primeira impressão do produto.

   🔴 APARECE UMA VEZ (localStorage). Popup que volta toda visita não convence,
   irrita — foi por isso que o anterior foi removido.
   ========================================================================== */

.dp-lanca{
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dp-lanca[hidden]{ display: none; }

.dp-lanca-fundo{
  position: absolute; inset: 0;
  background: rgba(4,4,8,.80);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s ease;
}
.dp-lanca.is-on .dp-lanca-fundo{ opacity: 1; }

.dp-lanca-caixa{
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  background: #0B0B0F;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(108,59,255,.16);
  transform: translateY(26px) scale(.97);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,.84,.24,1), opacity .45s ease;
}
.dp-lanca.is-on .dp-lanca-caixa{ transform: translateY(0) scale(1); opacity: 1; }

.dp-lanca-x{
  position: absolute; top: 12px; right: 12px;
  z-index: 5;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}
.dp-lanca-x:hover{ background: rgba(0,0,0,.7); transform: scale(1.06); }
.dp-lanca-x svg{ width: 17px; height: 17px; }

/* ── a cena ──────────────────────────────────────────────────────────────── */
.dp-lanca-cena{
  position: relative;
  height: 210px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}
.dp-lanca-cena svg{ width: 100%; height: 100%; display: block; }
/* emenda suave com o corpo do popup */
.dp-lanca-cena::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background: linear-gradient(180deg, rgba(11,11,15,0) 0%, #0B0B0F 92%);
  pointer-events: none;
}

.dp-lanca-selo{
  position: absolute; left: 20px; bottom: 16px;
  z-index: 2;
  font-family: var(--font, sans-serif);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: #fff;
  padding: 7px 14px;
  border-radius: 30px;
  background: rgba(108,59,255,.30);
  border: 1px solid rgba(138,92,255,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* estrelas piscando fora de compasso */
.dpq-estrelas circle{ fill: #FFFFFF; opacity: .5; animation: dpqBrilha 4s ease-in-out infinite; }
.dpq-estrelas circle:nth-child(2n){ animation-duration: 5.5s; animation-delay: .7s; }
.dpq-estrelas circle:nth-child(3n){ animation-duration: 6.5s; animation-delay: 1.6s; }
@keyframes dpqBrilha{ 0%,100%{opacity:.22} 50%{opacity:.9} }

/* o halo do sol respira */
.dpq-halo{ animation: dpqHalo 7s ease-in-out infinite; transform-origin: 400px 196px; }
@keyframes dpqHalo{ 0%,100%{opacity:.75; transform:scale(.95)} 50%{opacity:1; transform:scale(1.06)} }
.dpq-sol{ animation: dpqSol 7s ease-in-out infinite; transform-origin: 400px 196px; }
@keyframes dpqSol{ 0%,100%{opacity:.92} 50%{opacity:1} }

/* janelas da cidade acendendo aos poucos */
.dpq-janelas rect{ opacity: .25; animation: dpqJanela 6s ease-in-out infinite; }
.dpq-janelas rect:nth-child(2n){ animation-delay: 1.1s; }
.dpq-janelas rect:nth-child(3n){ animation-delay: 2.4s; }
.dpq-janelas rect:nth-child(5n){ animation-delay: 3.7s; }
@keyframes dpqJanela{ 0%,100%{opacity:.20} 45%{opacity:1} }

/* a trilha de luz no lago balança de leve */
.dpq-trilha{ animation: dpqTrilha 6.5s ease-in-out infinite; transform-origin: 400px 196px; }
@keyframes dpqTrilha{ 0%,100%{ transform: scaleX(.94); opacity:.75 } 50%{ transform: scaleX(1.06); opacity:1 } }

/* ondulações da água — deslocamento lateral leve, nunca `d` animado */
.dpq-ondas path{ stroke-width: 1.6; animation: dpqOnda 9s ease-in-out infinite; }
.dpq-ondas path:nth-child(2n){ animation-duration: 11s; animation-delay: 1.4s; }
.dpq-ondas path:nth-child(3n){ animation-duration: 13s; animation-delay: 2.8s; }
@keyframes dpqOnda{ 0%,100%{ transform: translateX(-8px) } 50%{ transform: translateX(8px) } }

/* círculos que se abrem, como pedra caindo na água */
.dpq-circ{ fill: none; stroke: #BFEFFF; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dpq-c1{ animation: dpqCirc 5s ease-out infinite; }
.dpq-c2{ animation: dpqCirc 5s ease-out .45s infinite; }
.dpq-c3{ animation: dpqCirc 5s ease-out 2.3s infinite; }
@keyframes dpqCirc{
  0%  { transform: scale(.25); opacity: 0; }
  8%  { opacity: .75; }
  55% { transform: scale(2.6); opacity: 0; }
  100%{ transform: scale(2.6); opacity: 0; }
}

/* o pino chega e assenta; a base pulsa como sinal */
.dpq-pino{ animation: dpqPino 1s cubic-bezier(.34,1.4,.5,1) .35s both; }
@keyframes dpqPino{
  0%  { transform: translate(400px, 108px) scale(.7); opacity: 0; }
  100%{ transform: translate(400px, 150px) scale(1);  opacity: 1; }
}
.dpq-base{ transform-box: fill-box; transform-origin: center; animation: dpqBase 2.6s ease-out 1.1s infinite; }
@keyframes dpqBase{
  0%  { transform: scale(.4); opacity: .7; }
  70% { transform: scale(2.3); opacity: 0; }
  100%{ transform: scale(2.3); opacity: 0; }
}

/* ── conteúdo ────────────────────────────────────────────────────────────── */
.dp-lanca-corpo{ padding: 4px 28px 28px; }

.dp-lanca-tag{
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #00D4FF;
  margin-bottom: 12px;
}
.dp-lanca-tit{
  font-family: var(--font-d, sans-serif);
  font-size: 30px; font-weight: 700; line-height: 1.16;
  letter-spacing: -.6px;
  color: #fff;
  margin: 0 0 14px 0;
}
.dp-lanca-tit b{
  background: linear-gradient(90deg,#8A5CFF 0%,#00D4FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dp-lanca-txt{
  font-size: 15px; line-height: 1.6;
  color: #9CA1B0;
  margin: 0 0 22px 0;
}

.dp-lanca-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.dp-lanca-col{
  background: #101017;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.dp-lanca-col-tag{
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #B9A9FF;
  margin-bottom: 10px;
}
.dp-lanca-col ul{ margin: 0; padding: 0; list-style: none; }
.dp-lanca-col li{
  position: relative;
  padding-left: 17px;
  font-size: 13.2px; line-height: 1.5;
  color: #C9CCD6;
  margin-bottom: 8px;
}
.dp-lanca-col li:last-child{ margin-bottom: 0; }
.dp-lanca-col li::before{
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg,#6C3BFF,#00D4FF);
}
.dp-lanca-col li b{ color: #fff; font-weight: 700; }

.dp-lanca-acoes{ display: flex; gap: 12px; }
.dp-lanca-btn{
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .28s ease, background .22s ease;
}
.dp-lanca-btn:active{ transform: scale(.98); }
.dp-lanca-btn-1{
  background: linear-gradient(135deg,#6C3BFF 0%,#00D4FF 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(108,59,255,.42);
}
.dp-lanca-btn-1:hover{ box-shadow: 0 14px 38px rgba(108,59,255,.55); color:#fff; }
.dp-lanca-btn-2{
  background: #16161F;
  border: 1px solid rgba(255,255,255,.13);
  color: #EDEDF2;
}
.dp-lanca-btn-2:hover{ border-color: rgba(138,92,255,.6); color:#fff; }

.dp-lanca-depois{
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  background: none; border: none;
  color: #6B7080;
  font-size: 13px;
  cursor: pointer;
}
.dp-lanca-depois:hover{ color: #9CA1B0; }

@media (max-width: 560px){
  .dp-lanca{ padding: 12px; }
  .dp-lanca-cena{ height: 168px; }
  .dp-lanca-corpo{ padding: 4px 20px 22px; }
  .dp-lanca-tit{ font-size: 25px; }
  .dp-lanca-cols{ grid-template-columns: 1fr; }
  .dp-lanca-acoes{ flex-direction: column; }
}

@media (prefers-reduced-motion: reduce){
  .dp-lanca-fundo, .dp-lanca-caixa{ transition: none !important; }
  .dpq-estrelas circle, .dpq-halo, .dpq-sol, .dpq-janelas rect,
  .dpq-trilha, .dpq-ondas path, .dpq-circ, .dpq-pino, .dpq-base{
    animation: none !important;
  }
  .dpq-circ, .dpq-base{ opacity: 0 !important; }
  .dpq-pino{ transform: translate(400px,150px) !important; opacity: 1 !important; }
}

/* ============================================================================
   ÁREA DE CONTATO — clicável e com atalhos (2026-08-12)
   ----------------------------------------------------------------------------
   🔴 CONTATO QUE NÃO ABRE COM UM TOQUE NÃO É CONTATO. A versão anterior mostrava
   telefone e e-mail como TEXTO: no celular, quem quisesse ligar tinha de decorar
   o número e sair do site. Agora cada item é um link de verdade — `wa.me`, `tel:`
   e `mailto:` — e o WhatsApp vem primeiro, porque é por onde as pessoas
   realmente falam com um negócio local.
   ========================================================================== */

a.dp-contact-item{
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  transition: transform .2s var(--ease, ease), background .24s ease;
  border-radius: 12px;
  padding: 6px;
  margin: -6px;
}
a.dp-contact-item:hover{
  background: rgba(255,255,255,.035);
  transform: translateX(3px);
  color: inherit;
}
a.dp-contact-item:hover .dp-contact-item-val{ color: #FFFFFF; }

/* o WhatsApp ganha a cor dele — é o canal que a pessoa procura primeiro */
.dp-contact-item-icon.dp-ci-zap{
  background: rgba(37,211,102,.12) !important;
  border-color: rgba(37,211,102,.32) !important;
  color: #25D366 !important;
}

/* ── atalhos por assunto ─────────────────────────────────────────────────── */
.dp-contact-atalhos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.dp-contact-atalho{
  display: block;
  padding: 15px 16px;
  border-radius: 14px;
  background: #101017;
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  transition: border-color .24s ease, transform .2s var(--ease, ease), background .24s ease;
}
.dp-contact-atalho:hover{
  border-color: rgba(138,92,255,.55);
  background: #14141C;
  transform: translateY(-2px);
}
.dp-contact-atalho b{
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.dp-contact-atalho span{
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-2, #6B7080);
}

@media (max-width: 575px){
  .dp-contact-atalhos{ grid-template-columns: 1fr; }
}

/* ============================================================================
   PÁGINAS LEGAIS — Termos de Uso e Política de Privacidade
   ----------------------------------------------------------------------------
   🔴 DOCUMENTO LEGAL TAMBÉM SE LÊ. Texto jurídico em bloco cinza e apertado é o
   jeito clássico de dizer "não leia isto". Aqui a medida de linha, o espaço
   entre parágrafos e o destaque dos títulos são os mesmos do resto do site.
   ========================================================================== */
.dp-legal{
  font-size: 15.5px;
  line-height: 1.75;
  color: #B8BCC8;
}
.dp-legal h2{
  font-family: var(--font-d, sans-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: #FFFFFF;
  margin: 40px 0 14px 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.dp-legal h2:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.dp-legal p{ margin: 0 0 16px 0; }
.dp-legal b{ color: #FFFFFF; font-weight: 600; }
.dp-legal ul{ margin: 0 0 18px 0; padding: 0; list-style: none; }
.dp-legal li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
}
.dp-legal li::before{
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg,#6C3BFF,#00D4FF);
}
.dp-legal-rodape{
  margin-top: 56px;
  padding: 28px;
  border-radius: 18px;
  background: #101017;
  border: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.dp-legal-rodape p{
  margin: 0 0 16px 0;
  color: var(--muted, #9CA1B0);
  font-size: 15px;
}

/* ============================================================================
   DEPOIMENTOS — seção premium (2026-08-13)
   ----------------------------------------------------------------------------
   O bloco era três caixas iguais com a inicial do nome num círculo. Aqui ele
   ganha retrato, aspas de fundo, anel girando no avatar, estrelas que acendem
   em sequência e luz que segue o cursor.

   🔴 SÓ `transform` E `opacity` NO QUE ANIMA. O anel do avatar gira com
   `rotate`, as estrelas entram com `scale`, os cards sobem com `translateY`.
   Nada de `box-shadow` ou `filter` animado — é o que engasga em telas fracas.

   🔴 O RETRATO É ILUSTRAÇÃO, e a marcação está pronta para FOTO: é trocar o
   arquivo em `img/depoimentos/`. Nada no CSS depende de ser desenho.

   🔴 A LUZ DO CURSOR REUSA `.dp-luz` da camada premium — não há segunda
   implementação do mesmo efeito no projeto.
   ========================================================================== */

#dp-depoimentos .dp-reviews-grid{ position: relative; z-index: 1; }

/* ── o card ──────────────────────────────────────────────────────────────── */
#dp-depoimentos .dp-review{
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  background: linear-gradient(168deg, #14141C 0%, #0E0E14 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: transform .45s cubic-bezier(.16,.84,.24,1),
              border-color .35s ease;
}
#dp-depoimentos .dp-review:hover{
  transform: translateY(-6px);
  border-color: rgba(138,92,255,.42) !important;
}

/* aspas de fundo: dá peso editorial sem pesar em bytes */
#dp-depoimentos .dp-review::after{
  content: "\201C";
  position: absolute;
  top: -26px; right: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 150px;
  line-height: 1;
  color: rgba(138,92,255,.09);
  pointer-events: none;
  transition: color .4s ease, transform .5s var(--ease, ease);
}
#dp-depoimentos .dp-review:hover::after{
  color: rgba(138,92,255,.16);
  transform: translateY(4px) rotate(-4deg);
}

/* ── estrelas: acendem em sequência quando a seção entra ─────────────────── */
#dp-depoimentos .dp-review-stars{ display: flex; gap: 3px; }
#dp-depoimentos .dp-review-stars .dpi{
  color: #FFC53D;
  transform: scale(.4);
  opacity: 0;
}
#dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi{
  animation: dpEstrela .5s cubic-bezier(.34,1.4,.5,1) forwards;
}
#dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(1){ animation-delay: .10s; }
#dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(2){ animation-delay: .18s; }
#dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(3){ animation-delay: .26s; }
#dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(4){ animation-delay: .34s; }
#dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(5){ animation-delay: .42s; }
@keyframes dpEstrela{
  0%  { transform: scale(.4) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0);       opacity: 1; }
}

/* ── retrato com anel girando ────────────────────────────────────────────── */
#dp-depoimentos .dp-review-avatar{
  position: relative;
  width: 58px !important;
  height: 58px !important;
  flex-shrink: 0;
  border-radius: 50%;
  background: none !important;
  padding: 0 !important;
  overflow: visible !important;
  text-indent: 0 !important;
}
#dp-depoimentos .dp-review-avatar img{
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #0E0E14;
}
/* o anel: gradiente cônico girando devagar, atrás da foto */
#dp-depoimentos .dp-review-avatar::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 1;
  background: conic-gradient(from 0deg,
      #6C3BFF 0deg, #00D4FF 110deg, #6C3BFF 200deg, #8A5CFF 300deg, #6C3BFF 360deg);
  animation: dpAnel 6s linear infinite;
  will-change: transform;
}
@keyframes dpAnel{ to{ transform: rotate(360deg); } }

/* selo de verificado, canto do retrato */
#dp-depoimentos .dp-review-avatar::after{
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  z-index: 3;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #2ED573;
  border: 2.5px solid #0E0E14;
  -webkit-mask: none; mask: none;
  box-shadow: inset 0 0 0 6px #2ED573;
}
#dp-depoimentos .dp-review-selo{
  position: absolute;
  right: -2px; bottom: -2px;
  z-index: 4;
  width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
  color: #06340F;
}
#dp-depoimentos .dp-review-selo svg{ width: 11px; height: 11px; }

/* ── texto e autoria ─────────────────────────────────────────────────────── */
#dp-depoimentos .dp-review-text{
  position: relative;
  z-index: 1;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #C8CCD8 !important;
}
#dp-depoimentos .dp-review-author{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
}
#dp-depoimentos .dp-review-name{
  font-size: 15px; font-weight: 700; color: #FFFFFF;
}
#dp-depoimentos .dp-review-role{
  font-size: 12.5px; color: var(--muted-2, #6B7080); margin-top: 2px;
}

/* ── entrada dos cards: sobem e assentam ─────────────────────────────────── */
#dp-depoimentos .dp-review{
  opacity: 0;
  transform: translateY(28px) scale(.98);
}
#dp-depoimentos .dp-review.is-vista{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .7s ease, transform .8s cubic-bezier(.16,.84,.24,1),
              border-color .35s ease;
}
#dp-depoimentos .dp-review.is-vista:nth-child(2){ transition-delay: .12s; }
#dp-depoimentos .dp-review.is-vista:nth-child(3){ transition-delay: .24s; }

/* 🔴 REPOUSO = SEÇÃO INTEIRA E LEGÍVEL. Sem movimento, os cards aparecem
   completos e as estrelas ficam acesas — nunca uma seção pela metade. */
@media (prefers-reduced-motion: reduce){
  #dp-depoimentos .dp-review{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #dp-depoimentos .dp-review-stars .dpi{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  #dp-depoimentos .dp-review-avatar::before{ animation: none !important; }
}

/* ============================================================================
   LOGO — maior e mais nítida no desktop (2026-08-13)
   ----------------------------------------------------------------------------
   🔴 O CABEÇALHO DAVA 38px À MARCA. Nesse tamanho, o "DRIVE" do lockup vira um
   fio e a marca lê como mancha. No desktop há espaço de sobra — 50px devolve
   legibilidade sem empurrar o menu. No celular fica menor, porque lá a barra é
   estreita e a marca disputa espaço com o botão do menu.

   🔴 `image-rendering` NÃO É SOLUÇÃO DE NITIDEZ AQUI. A arte já foi realçada no
   arquivo (unsharp no canal de cor, sem tocar no alfa); forçar interpolação no
   navegador só criaria serrilhado. O que resolve é servir a imagem grande e
   deixar o navegador reduzir — que é o caso: 785px de arte para ~150px de tela.
   ========================================================================== */
/* 🔴 `max-height` DE OUTRA FOLHA ESTAVA CORTANDO. A regra de altura pegava, mas
   uma folha antiga do template limita a imagem do cabeçalho por `max-height:40px`
   — e `max-height` vence `height`, sempre. Medido: pedi 50px e a marca continuou
   com 40px. Destravar o teto é o que faz a altura valer. */
@media (min-width: 992px){
  #header.dp-header .logo img{
    height: 50px !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
  }
  #header.dp-header.header-scrolled .logo img{ height: 42px !important; max-height: none !important; }
}
@media (min-width: 1400px){
  #header.dp-header .logo img{ height: 56px !important; max-height: none !important; }
  #header.dp-header.header-scrolled .logo img{ height: 46px !important; max-height: none !important; }
}
/* o rodapé também ganha respiro */
@media (min-width: 992px){
  .dp-footer img[src*="logo-novo"]{ height: 52px !important; max-height: none !important; width: auto !important; }
}

/* ============================================================================
   BENEFÍCIOS DO PASSAGEIRO — cena animada (2026-08-13)
   ----------------------------------------------------------------------------
   A cena conta a mesma história do texto: as moedas caem no cartão, o saldo
   sobe, e a régua de sete dias acende até o presente. Quem só olhar a imagem
   já entende a proposta.

   🔴 SÓ `transform` E `opacity`. As moedas caem com `translate`, os dias acendem
   com `opacity` e `scale`. O saldo é o único número que muda, e quem o escreve é
   o JS uma vez, ao entrar em cena — não a cada quadro.

   🔴 A CENA É DESENHADA EM CSS, sem imagem. Pesa zero em download, acompanha a
   paleta e não precisa de retina.
   ========================================================================== */

/* ── a cena ──────────────────────────────────────────────────────────────── */
.dp-ben-cena{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 34px 0 18px;
}

.dp-ben-halo{
  position: absolute;
  left: 50%; top: 40%;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
      rgba(108,59,255,.26) 0%, rgba(0,212,255,.10) 40%, rgba(0,0,0,0) 68%);
  animation: dpBenHalo 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes dpBenHalo{
  0%,100%{ transform: scale(.92); opacity: .7; }
  50%    { transform: scale(1.06); opacity: 1; }
}

/* ── o cartão ────────────────────────────────────────────────────────────── */
.dp-ben-cartao{
  position: relative;
  z-index: 2;
  border-radius: 20px;
  padding: 22px 24px 20px;
  background: linear-gradient(145deg, #241154 0%, #10102A 55%, #0A1830 100%);
  border: 1px solid rgba(138,92,255,.34);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform .5s var(--ease, ease);
}
.dp-ben-cena:hover .dp-ben-cartao{ transform: rotate(0deg) translateY(-4px); }

/* brilho que atravessa o cartão de tempos em tempos */
.dp-ben-cartao::after{
  content: "";
  position: absolute;
  top: -60%; bottom: -60%; left: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-180%) skewX(-16deg);
  animation: dpBenLustro 6s ease-in-out 1.2s infinite;
}
@keyframes dpBenLustro{
  0%   { transform: translateX(-180%) skewX(-16deg); }
  22%  { transform: translateX(330%)  skewX(-16deg); }
  100% { transform: translateX(330%)  skewX(-16deg); }
}

.dp-ben-cartao-topo{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.dp-ben-chip{
  width: 34px; height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg,#E8C97A,#B98F3C);
  position: relative;
  flex-shrink: 0;
}
.dp-ben-chip::before,
.dp-ben-chip::after{
  content: "";
  position: absolute; left: 4px; right: 4px;
  height: 1px;
  background: rgba(0,0,0,.28);
}
.dp-ben-chip::before{ top: 9px; }
.dp-ben-chip::after { top: 16px; }
.dp-ben-marca{
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase;
  color: #B9A9FF;
}

.dp-ben-saldo{
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 16px;
}
.dp-ben-cifra{ font-size: 20px; font-weight: 700; color: var(--muted, #9CA1B0); }
.dp-ben-num{
  font-family: var(--font-d, sans-serif);
  font-size: 44px; font-weight: 700;
  letter-spacing: -1px;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-ben-linha{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12px;
  color: var(--muted-2, #6B7080);
}
.dp-ben-pct{
  color: #00D4FF;
  font-weight: 600;
}

/* ── moedas caindo ───────────────────────────────────────────────────────── */
.dp-ben-moeda{
  position: absolute;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #3A2A05;
  background: linear-gradient(150deg,#FFE9A8 0%,#F0C34F 48%,#C89424 100%);
  box-shadow: 0 6px 18px rgba(240,195,79,.30), inset 0 -2px 4px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.dp-bm1{ left: 8%;  animation: dpMoeda 5s cubic-bezier(.45,.05,.55,.95) .0s infinite; }
.dp-bm2{ left: 32%; animation: dpMoeda 5s cubic-bezier(.45,.05,.55,.95) .9s infinite; }
.dp-bm3{ left: 62%; animation: dpMoeda 5s cubic-bezier(.45,.05,.55,.95) 1.7s infinite; }
.dp-bm4{ left: 84%; animation: dpMoeda 5s cubic-bezier(.45,.05,.55,.95) 2.6s infinite; }
@keyframes dpMoeda{
  0%   { transform: translateY(-46px) scale(.6) rotate(0deg);   opacity: 0; }
  12%  { opacity: 1; }
  38%  { transform: translateY(54px) scale(1) rotate(160deg);   opacity: 1; }
  50%  { transform: translateY(74px) scale(.55) rotate(200deg); opacity: 0; }
  100% { transform: translateY(74px) scale(.55) rotate(200deg); opacity: 0; }
}

/* ── a régua dos sete dias ───────────────────────────────────────────────── */
.dp-ben-semana{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.dp-ben-dia{
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #14141C;
  border: 1px solid rgba(255,255,255,.07);
  color: var(--muted-2, #6B7080);
  font-size: 13px; font-weight: 700;
  transition: none;
}
.dp-ben-dia i{ font-style: normal; }
.dp-ben-dia svg{ width: 22px; height: 22px; }

/* acendem em sequência, e recomeçam */
#dp-beneficios.is-vista .dp-ben-dia{
  animation: dpDiaAcende 7s ease-in-out infinite;
}
#dp-beneficios.is-vista .dp-ben-dia:nth-child(1){ animation-delay: .0s; }
#dp-beneficios.is-vista .dp-ben-dia:nth-child(2){ animation-delay: .35s; }
#dp-beneficios.is-vista .dp-ben-dia:nth-child(3){ animation-delay: .70s; }
#dp-beneficios.is-vista .dp-ben-dia:nth-child(4){ animation-delay: 1.05s; }
#dp-beneficios.is-vista .dp-ben-dia:nth-child(5){ animation-delay: 1.40s; }
#dp-beneficios.is-vista .dp-ben-dia:nth-child(6){ animation-delay: 1.75s; }
@keyframes dpDiaAcende{
  0%, 4%   { background: #14141C; border-color: rgba(255,255,255,.07);
             color: #6B7080; transform: scale(1); }
  10%      { background: rgba(108,59,255,.22); border-color: rgba(138,92,255,.75);
             color: #FFFFFF; transform: scale(1.10); }
  16%, 74% { background: rgba(108,59,255,.16); border-color: rgba(138,92,255,.50);
             color: #EDEDF2; transform: scale(1); }
  84%, 100%{ background: #14141C; border-color: rgba(255,255,255,.07);
             color: #6B7080; transform: scale(1); }
}

/* o sétimo dia é o presente: entra por último e brilha mais */
.dp-ben-dia-premio{
  background: linear-gradient(135deg, rgba(108,59,255,.30), rgba(0,212,255,.22)) !important;
  border-color: rgba(0,212,255,.55) !important;
  color: #FFFFFF !important;
}
#dp-beneficios.is-vista .dp-ben-dia-premio{
  animation: dpPremio 7s ease-in-out 2.1s infinite;
}
@keyframes dpPremio{
  0%, 26%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,212,255,.0); }
  33%      { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(0,212,255,.0); }
  40%      { transform: scale(1.06); }
  46%, 100%{ transform: scale(1); }
}

.dp-ben-legenda{
  margin: 12px 0 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-2, #6B7080);
}

/* ── a lista de benefícios ───────────────────────────────────────────────── */
.dp-ben-lista{ margin-top: 30px; }
.dp-ben-item{
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dp-ben-item:last-child{ border-bottom: none; }
.dp-ben-ic{
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(108,59,255,.12);
  border: 1px solid rgba(138,92,255,.28);
  color: #B9A9FF;
  transition: transform .3s var(--ease, ease), background .3s ease;
}
.dp-ben-item:hover .dp-ben-ic{
  transform: translateY(-2px) scale(1.05);
  background: rgba(108,59,255,.20);
}
.dp-ben-ic .dpi{ width: 21px; height: 21px; }
.dp-ben-item b{
  display: block;
  font-size: 16px; font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.dp-ben-item p{
  margin: 0;
  font-size: 14.2px; line-height: 1.6;
  color: var(--muted, #9CA1B0);
}
.dp-ben-item p b{ display: inline; font-size: inherit; color: #EDEDF2; }

@media (max-width: 991px){
  .dp-ben-cena{ margin-bottom: 40px; }
}

/* 🔴 REPOUSO = CENA COMPLETA E LEGÍVEL: cartão com saldo, sete dias acesos. */
@media (prefers-reduced-motion: reduce){
  .dp-ben-halo, .dp-ben-moeda, .dp-ben-cartao::after,
  #dp-beneficios.is-vista .dp-ben-dia,
  #dp-beneficios.is-vista .dp-ben-dia-premio{ animation: none !important; }
  .dp-ben-moeda{ opacity: 0 !important; }
  .dp-ben-cartao{ transform: none !important; }
  .dp-ben-dia{
    background: rgba(108,59,255,.16) !important;
    border-color: rgba(138,92,255,.50) !important;
    color: #EDEDF2 !important;
  }
}

/* ============================================================================
   "MENOS MOVIMENTO" NÃO É "SITE MORTO" (2026-08-13)
   ----------------------------------------------------------------------------
   🔴 O QUE ACONTECEU. Eu tinha posto `animation: none !important` em TODO bloco
   de `prefers-reduced-motion: reduce`. No Windows, desligar "mostrar animações"
   (`MinAnimate=0`, comum em máquina remota) faz o Chrome reportar `reduce` — e o
   site inteiro virava estático. O dono procurou os efeitos e não achou NENHUM:
   medido, `document.getAnimations()` devolvia **0**.

   🔴 O ERRO DE MÉTODO FOI PIOR. Todas as minhas conferências forçavam
   `prefers-reduced-motion: no-preference` para "a foto não mentir". Com isso eu
   nunca vi o que a máquina do dono via — testei um estado que ele não estava.
   ⚠️ Conferir SEMPRE nos dois estados: com e sem a preferência.

   🔴 O QUE A PREFERÊNCIA REALMENTE PEDE. A intenção da especificação é evitar
   movimento AMPLO — o que dispara enjoo: paralaxe grande, coisas girando,
   varreduras atravessando a tela, deslocamentos longos. Ela não pede a supressão
   de toda transição. Um site que vai a zero parece quebrado, e isso não ajuda
   ninguém.

   Este bloco vem por ÚLTIMO e devolve, sob `reduce`, o que é suave e informativo:
     · surgir e assentar (opacidade + poucos px);
     · a régua dos 7 dias acendendo — ela EXPLICA o check-in, é conteúdo;
     · as estrelas do depoimento aparecendo;
     · o pulso do pino, discreto.
   Continua fora: paralaxe do giroscópio, anéis girando, reflexos varrendo,
   moedas caindo, halos respirando e o fio da rota se desenhando.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){

  /* ── surgir: opacidade + deslocamento curto (≤10px) ────────────────────── */
  #dp-depoimentos .dp-review{
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity .6s ease, transform .6s ease !important;
  }
  #dp-depoimentos .dp-review.is-vista{
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── estrelas: aparecem em sequência, sem girar nem estourar ───────────── */
  #dp-depoimentos .dp-review-stars .dpi{
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity .35s ease !important;
  }
  #dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi{ opacity: 1 !important; }
  #dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(2){ transition-delay: .10s !important; }
  #dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(3){ transition-delay: .20s !important; }
  #dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(4){ transition-delay: .30s !important; }
  #dp-depoimentos .dp-review.is-vista .dp-review-stars .dpi:nth-child(5){ transition-delay: .40s !important; }

  /* ── a régua dos 7 dias é CONTEÚDO: ela explica o check-in ─────────────── */
  #dp-beneficios.is-vista .dp-ben-dia{
    animation: dpDiaAcendeSuave 7s ease-in-out infinite !important;
  }
  #dp-beneficios.is-vista .dp-ben-dia-premio{
    animation: dpPremioSuave 7s ease-in-out 2.1s infinite !important;
  }
  .dp-ben-dia{
    background: #14141C !important;
    border-color: rgba(255,255,255,.07) !important;
    color: #6B7080 !important;
  }
  .dp-ben-dia-premio{
    background: linear-gradient(135deg, rgba(108,59,255,.30), rgba(0,212,255,.22)) !important;
    border-color: rgba(0,212,255,.55) !important;
    color: #FFFFFF !important;
  }

  /* ── o pino da logo continua pulsando, discreto: é o sinal da marca ────── */
  #loginpage .dpl-onda{
    display: block !important;
    animation: dpOndaSuave 4s ease-out 1.25s infinite !important;
  }

  /* ── títulos ainda chegam, só que sem subir ────────────────────────────── */
  .dp-revelar .dp-palavra > i{
    opacity: 0 !important;
    transform: none !important;
    transition: opacity .5s ease !important;
    transition-delay: calc(var(--i, 0) * 30ms) !important;
  }
  .dp-revelar.is-visivel .dp-palavra > i{ opacity: 1 !important; }

  /* ── o fio da rota volta a existir, parado: é indicador, não enfeite ───── */
  .dp-rota{ display: block !important; }
  .dp-rota-parada.is-on::after{ animation: none !important; opacity: 0 !important; }
  .dp-progresso{ display: block !important; }
}

/* versões suaves: sem `scale`, só cor — nada que desloque a vista */
@keyframes dpDiaAcendeSuave{
  0%, 4%   { background: #14141C; border-color: rgba(255,255,255,.07); color: #6B7080; }
  10%, 74% { background: rgba(108,59,255,.16); border-color: rgba(138,92,255,.50); color: #EDEDF2; }
  84%, 100%{ background: #14141C; border-color: rgba(255,255,255,.07); color: #6B7080; }
}
@keyframes dpPremioSuave{
  0%, 26%  { opacity: .82; }
  34%      { opacity: 1; }
  46%, 100%{ opacity: .82; }
}
@keyframes dpOndaSuave{
  0%   { transform: scale(.6);  opacity: 0; }
  8%   { opacity: .55; }
  34%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============================================================================
   A LINHA BRANCA DO RODAPÉ (2026-08-13)
   ----------------------------------------------------------------------------
   🔴 ERA O `<hr>` PADRÃO DO NAVEGADOR. A regra existente definia só
   `border-color`, e o `<hr>` nasce com `border-style: inset` nos QUATRO lados:
   o Chrome desenha isso como um sulco 3D — borda de cima clara, de baixo
   escura. Resultado: uma linha branca atravessando o rodapé, que não combina
   com nada no site.

   Definir a cor sem definir o ESTILO é o erro clássico com `<hr>`: a cor entra,
   mas o relevo continua.

   🔴 SEGUNDA RODADA — O DONO PEDIU A LINHA FORA, NÃO MAIS BONITA. Na primeira
   correção eu troquei o sulco por uma emenda em gradiente, achando que "sem
   relevo" bastava. Não bastava: ele voltou dizendo "termine de tirar a linha".
   Quando o pedido é REMOVER, atenuar não é atender — é discutir. O `<hr>` fica
   no HTML só como respiro entre o corpo do rodapé e o aviso de direitos; risco
   nenhum é desenhado.
   ⚠️ `height: 0` sozinho não resolveria: o `<hr>` ainda traria as quatro bordas
   `inset`. `border: none` é obrigatório junto.
   ========================================================================== */
.dp-footer-divider{
  border: none !important;
  height: 0 !important;
  background: none !important;
  margin: 40px 0 24px !important;   /* só o espaço; nenhum traço */
}

/* 🔴 A MESMA ARMADILHA EM QUALQUER OUTRO `<hr>` do site: sem `border-style`,
   todos desenham o mesmo sulco. Neutralizados de uma vez. */
.dp-footer hr:not(.dp-footer-divider),
footer hr:not(.dp-footer-divider){
  border: none !important;
  height: 1px !important;
  background: rgba(255,255,255,.07) !important;
}