/* ============================================================
   A NOVA ÓTICA — Brazlândia, DF
   Cores tiradas da logo do cliente: azul marinho -> azul vivo.
   Fundo preto na maior parte; branco onde o formato da armação
   precisa aparecer.
   ============================================================ */

:root{
  --preto:      #04060F;
  --preto-2:    #080C1C;
  --marinho:    #051845;
  --royal:      #0F52D9;
  --vivo:       #2E9BFF;
  --neon:       #6FD0FF;
  --branco:     #FFFFFF;
  --gelo:       #F3F7FF;
  --cinza:      #5B6A85;
  --zap:        #25D366;
  --zap-forte:  #1EBE5A;

  --borda: 1px solid rgba(110,190,255,.18);
  --raio: 18px;
  --sombra-azul: 0 0 60px rgba(46,155,255,.35);
  --largura: 1180px;

  /* Duas famílias, e hoje as duas são a mesma pilha do sistema. A
     separação existe para o painel "Texto" do editor visual poder
     trocar a dos títulos sem mexer na do corpo — nada muda na tela
     enquanto ninguém escolher outra fonte. */
  --fonte:     "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-tit: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--preto);
  color:var(--branco);
  font-family:var(--fonte);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ font-family:var(--fonte-tit); line-height:1.1; margin:0; letter-spacing:-.02em; }
a{ color:inherit; }

/* ---------------- botões ---------------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:999px;
  font-weight:800; font-size:16px; text-decoration:none;
  border:0; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.botao svg{ width:22px; height:22px; flex:0 0 auto; }
.botao--gg{ padding:19px 38px; font-size:18px; }

.botao--zap{
  background:linear-gradient(135deg,var(--zap),var(--zap-forte));
  color:#04220F;
  box-shadow:0 12px 34px rgba(37,211,102,.34);
}
.botao--zap:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(37,211,102,.48); }

.botao--linha{
  background:transparent; color:var(--neon);
  border:1.6px solid rgba(110,208,255,.42);
}
.botao--linha:hover{ background:rgba(46,155,255,.12); transform:translateY(-3px); }

/* O terceiro estilo pronto do editor. Existe para as seções de
   fundo branco, onde o vazado azul-claro fica lavado. */
.botao--claro{
  background:var(--branco); color:var(--marinho);
  box-shadow:0 12px 30px rgba(9,40,110,.18);
}
.botao--claro:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(9,40,110,.26); }

.rotulo{
  display:inline-block; margin-bottom:14px;
  font-size:12.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--royal);
}
.rotulo--claro{ color:var(--neon); }

.miudo{ font-size:13.5px; color:var(--cinza); margin:14px 0 0; }

/* ---------------- barra fixa ---------------- */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px clamp(14px,4vw,34px);
  background:rgba(4,6,15,0);
  backdrop-filter:blur(0px);
  transition:background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.barra.gruda{
  background:rgba(4,6,15,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(110,190,255,.16), 0 10px 34px rgba(0,0,0,.5);
}
/* No lugar da logo, que repetia a logo grande logo abaixo dela, a
   barra carrega a oferta. Ela é o único texto que acompanha a
   pessoa a rolagem inteira, então vale que seja a frase que faz
   comprar, não a marca que ela acabou de ver. */
.barra__oferta{
  margin:0; font-size:14.5px; line-height:1.25; letter-spacing:.01em;
  color:rgba(255,255,255,.72);
}
.barra__oferta b{
  display:inline-block; color:var(--neon); font-weight:900;
  letter-spacing:.02em; text-transform:uppercase;
}
.barra__zap{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px; border-radius:999px;
  background:linear-gradient(135deg,var(--zap),var(--zap-forte));
  color:#04220F; font-weight:800; font-size:14.5px; text-decoration:none;
  box-shadow:0 8px 22px rgba(37,211,102,.32);
  transition:transform .18s ease;
}
.barra__zap:hover{ transform:translateY(-2px); }
.barra__zap svg{ width:19px; height:19px; }
@media (max-width:640px){
  /* No celular sobra "ARMAÇÃO GRÁTIS" e o botão redondo. A linha de
     apoio some porque as duas juntas empurravam o botão para fora
     da tela em 360px. */
  .barra__oferta span{ display:none; }
  .barra__oferta b{ font-size:13.5px; }
  .barra__zap span{ display:none; }
  .barra__zap{ padding:11px; }
}

/* ---------------- topo ---------------- */
.topo{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:grid; place-items:center;
  padding:110px clamp(18px,5vw,40px) 90px;
  text-align:center;
  overflow:hidden;
}
.topo__fundo{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
/* A foto da loja é real e fica aqui como ambiente. Ela vai DESFOCADA de
   propósito: o letreiro traz "A NOVA ÓTICA" escrito na parede, e sem o
   desfoque essa marca cai bem atrás da logo do site — na tela sai
   "AA NOVA". Desfocada, a loja continua reconhecível e a logo fica sozinha.
   A foto nítida da loja aparece inteira lá embaixo, na seção "Venha nos conhecer". */
.topo__fundo img{
  width:100%; height:100%; object-fit:cover; object-position:center 78%;
  filter:blur(7px) saturate(1.2) brightness(.82);
  transform:scale(1.09);            /* esconde a borda mole do desfoque */
}
.topo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 70% at 50% 16%, rgba(15,82,217,.36), transparent 64%),
    linear-gradient(180deg, rgba(4,6,15,.84) 0%, rgba(4,6,15,.80) 42%, rgba(4,6,15,.92) 76%, var(--preto) 98%);
}

.topo__conteudo{ max-width:900px; }

.topo__logo{
  width:min(330px,64vw); height:auto; margin:0 auto 20px;
  filter:drop-shadow(0 0 46px rgba(46,155,255,.9)) brightness(1.5) saturate(1.15);
  animation:respira 5s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{ filter:drop-shadow(0 0 40px rgba(46,155,255,.75)) brightness(1.45) saturate(1.15); }
  50%    { filter:drop-shadow(0 0 66px rgba(110,208,255,1))  brightness(1.62) saturate(1.25); }
}
@media (prefers-reduced-motion: reduce){ .topo__logo{ animation:none; } }

.topo__frase{
  margin:0 0 16px; font-size:clamp(14px,2.6vw,17px);
  letter-spacing:.24em; text-transform:uppercase; font-weight:700;
  color:var(--neon);
}
.topo__titulo{
  font-size:clamp(38px,8.4vw,78px); font-weight:900; margin-bottom:26px;
  text-shadow:0 6px 40px rgba(0,0,0,.8);
}
.topo__titulo em{
  font-style:normal;
  background:linear-gradient(100deg,var(--vivo),var(--neon) 55%,var(--branco));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------------- os dois cartazes da oferta ----------------
   Eram duas pastilhas de 16px em linha, do tamanho de um selo de
   endereço, carregando as duas únicas frases que fazem alguém
   entrar na loja. Agora são dois cartazes de largura igual, com o
   texto na casa dos 27px — o segundo maior tipo da página, atrás
   só do H1 — e o de cima com halo azul pulsando.

   Grade de duas colunas iguais em vez de flex: com flex-wrap, o
   "Exame de vista grátis" (mais largo) empurrava o outro e os dois
   saíam de tamanhos diferentes, o que lia como se um valesse menos
   que o outro. */
.selos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; margin:0 auto 32px; max-width:720px;
}
.selo{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:20px 18px; border-radius:18px; text-align:center;
  background:rgba(8,16,40,.66); border:var(--borda);
  backdrop-filter:blur(8px);
}
.selo b{
  font-family:var(--fonte-tit);
  font-size:clamp(18px,4.4vw,27px); font-weight:900; line-height:1.05;
  letter-spacing:-.01em; text-transform:uppercase;
}
.selo small{
  font-size:clamp(11.5px,2.5vw,13.5px); color:rgba(255,255,255,.66);
  letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.selo--forte{
  background:linear-gradient(135deg,var(--royal),var(--vivo));
  border-color:rgba(110,208,255,.6);
  animation:halo 2.8s ease-in-out infinite;
}
.selo--forte b{ text-shadow:0 3px 16px rgba(0,4,20,.45); }
.selo--forte small{ color:rgba(255,255,255,.9); }

/* O halo cresce e some, em vez de acender e apagar: piscar em cima
   de um texto grande é cansativo de ler e é gatilho para quem tem
   sensibilidade a movimento — por isso a regra logo abaixo. */
@keyframes halo{
  0%,100%{ box-shadow:0 0 0 0 rgba(46,155,255,.55), 0 18px 50px rgba(15,82,217,.35); }
  50%    { box-shadow:0 0 0 12px rgba(46,155,255,0), 0 18px 50px rgba(15,82,217,.35); }
}
@media (prefers-reduced-motion: reduce){
  .selo--forte{ animation:none; box-shadow:var(--sombra-azul); }
}

@media (max-width:560px){
  /* Uma coluna: lado a lado em 375px, "Exame de vista grátis"
     quebraria em três linhas e os cartazes ficariam altos e
     estreitos, que é justamente o formato que some. */
  .selos{ grid-template-columns:1fr; gap:10px; }
  .selo{ padding:16px 16px; }
}
@media (max-width:520px){
  .topo__frase{ letter-spacing:.14em; }
  .topo{ padding-bottom:120px; }   /* o botão flutuante não cobre o rodapé do topo */
}

.topo__rolar{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:26px; height:42px; border:2px solid rgba(110,208,255,.5); border-radius:999px;
}
.topo__rolar span{
  position:absolute; left:50%; top:8px; translate:-50% 0;
  width:4px; height:8px; border-radius:2px; background:var(--neon);
  animation:desce 1.7s ease-in-out infinite;
}
@keyframes desce{ 0%{opacity:0;top:8px} 40%{opacity:1} 100%{opacity:0;top:24px} }

/* ---------------- faixa correndo ---------------- */
.faixa{
  overflow:hidden; padding:16px 0;
  background:linear-gradient(90deg,var(--marinho),var(--royal) 45%,var(--vivo));
  border-block:1px solid rgba(110,208,255,.32);
  box-shadow:0 0 50px rgba(46,155,255,.35);
}
.faixa__trilho{
  display:flex; width:max-content; gap:0;
  animation:corre 26s linear infinite;
}
.faixa__grupo{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.faixa__item{
  display:inline-flex; align-items:center; gap:12px;
  font-size:clamp(17px,3.2vw,26px); font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap; color:var(--branco);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.faixa__item i{ font-style:normal; color:rgba(255,255,255,.55); font-size:.8em; }
@keyframes corre{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce){ .faixa__trilho{ animation-duration:120s; } }

/* ---------------- oferta (fundo branco) ---------------- */
.oferta{
  background:linear-gradient(180deg,var(--branco),var(--gelo));
  color:#0A1428;
  padding:clamp(56px,9vw,104px) clamp(18px,5vw,40px);
}
.oferta__grade{
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
}
@media (max-width:900px){ .oferta__grade{ grid-template-columns:1fr; } }

.oferta__palco{
  position:relative;
  border-radius:26px;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(46,155,255,.16), transparent 70%),
    linear-gradient(160deg,#FFFFFF,#E9F2FF);
  border:1px solid rgba(15,82,217,.16);
  box-shadow:0 26px 70px rgba(9,40,110,.14);
  padding:16px 16px 8px;
  touch-action:pan-y;
}
#oculos360{ width:100%; height:auto; display:block; cursor:grab; }
#oculos360:active{ cursor:grabbing; }
.oferta__dica{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--royal); opacity:.75;
}
.oferta__dica svg{ width:20px; height:20px; }
.oferta__etiqueta{
  position:absolute; top:16px; right:16px;
  padding:9px 18px; border-radius:999px;
  background:linear-gradient(135deg,var(--royal),var(--vivo));
  color:#fff; font-weight:900; font-size:15px; letter-spacing:.03em;
  box-shadow:0 10px 26px rgba(15,82,217,.4);
}

.oferta__texto h2{ font-size:clamp(30px,5.4vw,50px); font-weight:900; margin-bottom:18px; }
.oferta__texto h2 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--royal),var(--vivo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.oferta__linha{ font-size:17.5px; color:#31435F; margin:0 0 22px; }

.lista{ list-style:none; padding:0; margin:0 0 30px; display:grid; gap:13px; }
.lista li{ position:relative; padding-left:32px; font-size:16px; color:#31435F; }
.lista li b{ color:#0A1428; }
.lista li::before{
  content:""; position:absolute; left:0; top:7px;
  width:19px; height:19px; border-radius:50%;
  background:linear-gradient(135deg,var(--royal),var(--vivo));
  box-shadow:0 4px 12px rgba(15,82,217,.34);
}
.lista li::after{
  content:""; position:absolute; left:6px; top:12px;
  width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  rotate:-45deg;
}
.oferta .miudo{ color:#6A7B96; }

/* ---------------- modelos ---------------- */
.modelos{
  padding:clamp(56px,9vw,100px) 0 clamp(48px,7vw,80px);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(15,82,217,.20), transparent 62%),
    var(--preto);
}
.modelos__cabeca{
  max-width:760px; margin:0 auto clamp(24px,4vw,36px);
  padding-inline:clamp(18px,5vw,40px); text-align:center;
}
.modelos__cabeca h2{ font-size:clamp(28px,5.2vw,46px); font-weight:900; margin-bottom:12px; }
.modelos__cabeca p{ color:rgba(255,255,255,.68); margin:0; font-size:16px; }

/* A vitrine que anda sozinha.

   A distância entre um cartão e outro é margin-right no cartão, e
   não gap no trilho. Parece detalhe, e é o que faz a volta ser sem
   emenda: o trilho anda exatamente metade da própria largura, e
   metade de catorze cartões com margem é sete cartões com margem,
   na vírgula. Com gap, a última folga não entra na conta e a
   emenda dá um pulinho a cada volta.

   A máscara nas pontas apaga o cartão que está entrando e o que
   está saindo. É ela que cria o corte no meio da imagem — a mesma
   sensação de "tem mais coisa aí do lado" do carrossel de
   celulares, agora sem depender de ninguém arrastar. */
.vitrine{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.vitrine__trilho{
  display:flex; width:max-content;
  animation:vitrine 58s linear infinite;
}
.vitrine:hover .vitrine__trilho{ animation-play-state:paused; }
@keyframes vitrine{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

/* Com JavaScript ligado, o carrossel deixa de ser um filme e vira uma
   faixa que rola de verdade: o dedo empurra no celular, o mouse arrasta
   no computador, e o trackpad rola de lado. Ninguém mais precisa esperar
   a volta inteira do laço para alcançar o modelo que quer.

   A classe é posta pelo próprio script. Sem JavaScript nada disto vale, e
   o que sobra é a animação de CSS de sempre — que continua andando no
   primeiro quadro, sem depender de nada. */
.vitrine--mao{
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:auto;                 /* nada de rolagem suave aqui dentro */
  overscroll-behavior-x:contain;        /* chegar na ponta não puxa a página */
  cursor:grab;
  scrollbar-width:none;                 /* a barra estragaria o degradê das pontas */
  -ms-overflow-style:none;
}
.vitrine--mao::-webkit-scrollbar{ display:none; }
.vitrine--mao .vitrine__trilho{ animation:none; }
.vitrine--mao .vit{ user-select:none; -webkit-user-select:none; }
/* Sem isto o navegador entende "arrastar a foto para outra janela" e o
   carrossel trava no meio do gesto com uma miniatura fantasma colada
   no cursor. Os cliques continuam chegando no <a>, que é o pai. */
.vitrine--mao .vit img{ pointer-events:none; -webkit-user-drag:none; }
.vitrine--mao.puxando{ cursor:grabbing; }
.vitrine--mao.puxando .vit{ transition:none; }
/* Parar de vez esconderia sete dos catorze cartões no meio da
   tela. Andar muito devagar mostra todos e não incomoda ninguém. */
@media (prefers-reduced-motion: reduce){ .vitrine__trilho{ animation-duration:420s; } }

.vit{
  position:relative; display:block; flex:0 0 auto; text-decoration:none;
  width:clamp(232px,74vw,300px);
  margin-right:clamp(12px,2.4vw,20px);
  border-radius:22px; overflow:hidden;
  background:linear-gradient(170deg,#0C1533,#070B1C);
  border:var(--borda);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.vit:hover{
  transform:translateY(-6px);
  border-color:rgba(110,208,255,.5);
  box-shadow:0 24px 56px rgba(0,0,0,.6), 0 0 44px rgba(46,155,255,.2);
}
/* A proporção sai do próprio arquivo (720×894). Escrita aqui, o
   espaço do cartão já existe antes de a foto chegar, e a vitrine
   não dá aquele solavanco quando cada imagem termina de baixar. */
.vit img{ width:100%; aspect-ratio:720 / 894; object-fit:cover; background:#0C1533; }

.vit__txt{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column; gap:3px;
  padding:52px 17px 16px;
  background:linear-gradient(180deg,rgba(4,6,15,0),rgba(4,6,15,.55) 38%,rgba(4,6,15,.94));
}
.vit__txt b{
  font-family:var(--fonte-tit); font-size:18.5px; font-weight:900;
  letter-spacing:-.01em; line-height:1.15;
}
.vit__txt small{
  font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--neon);
}

/* O cartão inteiro é um link do WhatsApp; esta pastilha é o que
   diz isso sem precisar de mais uma linha de texto. */
.vit::after{
  content:"Quero esta";
  position:absolute; top:14px; right:14px;
  padding:7px 14px; border-radius:999px;
  background:linear-gradient(135deg,var(--zap),var(--zap-forte));
  color:#04220F; font-size:12.5px; font-weight:900; letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(37,211,102,.38);
}

.modelos__pe{
  max-width:720px; margin:clamp(32px,5vw,48px) auto 0;
  padding-inline:clamp(18px,5vw,40px); text-align:center;
}
.modelos__pe p{ color:rgba(255,255,255,.64); font-size:15px; margin:0 0 20px; }
.modelos__pe b{ color:#fff; }

/* ---------------- a loja ---------------- */
.loja{
  background:linear-gradient(180deg,var(--gelo),var(--branco));
  color:#0A1428;
  padding:clamp(56px,9vw,104px) clamp(18px,5vw,40px);
}
.loja__grade{
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center;
}
@media (max-width:900px){ .loja__grade{ grid-template-columns:1fr; } }

/* O mapa. A altura vem de aspect-ratio, e não de uma altura fixa:
   iframe sem altura declarada nasce com os 300×150 do navegador e
   a seção inteira fica torta enquanto o Google não responde. */
.mapa{
  position:relative; overflow:hidden;
  border-radius:22px; aspect-ratio:4 / 3;
  background:#DCE6F7;
  box-shadow:0 26px 70px rgba(9,40,110,.22);
  border:1px solid rgba(15,82,217,.14);
}
@media (max-width:900px){ .mapa{ aspect-ratio:4 / 3.4; } }
.mapa iframe{ width:100%; height:100%; border:0; display:block; }

/* A camada por cima existe por dois motivos. O primeiro é o toque:
   o iframe do Google segura o dedo de quem só queria rolar a
   página, e no celular a pessoa fica presa dando zoom no mapa sem
   querer. O segundo é o destino: um toque aqui abre a rota no
   aplicativo de mapas, que é o que ela quer de verdade. */
.mapa__toque{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px; text-decoration:none;
  background:linear-gradient(180deg,rgba(4,20,60,0) 55%,rgba(4,20,60,.30));
}
.mapa__toque span{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:999px;
  background:var(--branco); color:var(--marinho);
  font-weight:800; font-size:14.5px;
  box-shadow:0 12px 30px rgba(9,40,110,.3);
  transition:transform .18s ease;
}
.mapa__toque:hover span{ transform:translateY(-3px); }
.mapa__toque svg{ width:19px; height:19px; }

.loja__texto h2{ font-size:clamp(28px,5.2vw,46px); font-weight:900; margin-bottom:16px; }
.loja__texto > p{ font-size:17px; color:#31435F; margin:0 0 26px; }

.dados{ margin:0 0 28px; display:grid; gap:18px; }
.dados dt{
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--royal); margin-bottom:4px;
}
.dados dd{ margin:0; font-size:15.5px; color:#26364F; }
.dados a{ color:var(--royal); font-weight:700; text-decoration:none; }
.dados a:hover{ text-decoration:underline; }

.loja__acoes{ display:flex; flex-wrap:wrap; gap:12px; }
.loja .botao--linha{ color:var(--royal); border-color:rgba(15,82,217,.34); }
.loja .botao--linha:hover{ background:rgba(15,82,217,.08); }

/* ---------------- rodapé ---------------- */
.rodape{
  text-align:center;
  padding:clamp(56px,9vw,96px) clamp(18px,5vw,40px) calc(120px + env(safe-area-inset-bottom));
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(15,82,217,.26), transparent 64%),
    var(--preto);
}
/* a logo é azul-marinho sobre preto: sem o brilho e o clareamento
   ela some no fundo */
.rodape__logo{
  width:min(210px,56vw); margin:0 auto 22px;
  filter:drop-shadow(0 0 40px rgba(46,155,255,.85)) brightness(1.7) saturate(1.2);
}
.rodape h2{ font-size:clamp(26px,5vw,42px); font-weight:900; margin-bottom:28px; }
.rodape__links{
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:center;
  margin:32px 0 26px;
}
.rodape__links a{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--neon); text-decoration:none; font-weight:700; font-size:15px;
}
.rodape__links a:hover{ color:#fff; }
.rodape__links svg{ width:19px; height:19px; }
.rodape__fim{
  font-size:13px; color:var(--cinza); margin:0;
  border-top:1px solid rgba(110,190,255,.14); padding-top:24px;
  max-width:640px; margin-inline:auto;
}
.rodape__fim small{ display:block; margin-top:8px; font-size:12px; opacity:.8; }

/* ---------------- botão flutuante ---------------- */
.flutua{
  position:fixed; z-index:70;
  right:clamp(14px,4vw,26px);
  bottom:calc(clamp(14px,4vw,26px) + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:999px;
  background:linear-gradient(135deg,var(--zap),var(--zap-forte));
  color:#04220F; font-weight:800; font-size:15.5px; text-decoration:none;
  box-shadow:0 14px 40px rgba(37,211,102,.46);
  animation:pulsa 2.6s ease-in-out infinite;
}
.flutua svg{ width:25px; height:25px; }
.flutua:hover{ animation:none; transform:translateY(-3px); }
@keyframes pulsa{
  0%,100%{ box-shadow:0 14px 40px rgba(37,211,102,.42); }
  50%    { box-shadow:0 14px 40px rgba(37,211,102,.42), 0 0 0 14px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){ .flutua{ animation:none; } }
@media (max-width:560px){
  .flutua span{ display:none; }
  .flutua{ padding:16px; }
}

/* ---------------- entradas ----------------------------------
   Quem entra em cena diz isso no HTML, em data-reveal="sobe", e o
   site.js só acrescenta .is-in quando o bloco aparece na tela.
   O vocabulário é o mesmo que o editor visual escreve no painel
   "Entrada", então um bloco arrastado para a página se comporta
   igualzinho aos que já estavam lá.

   Nenhuma delas anda para os lados. Uma entrada em translateX
   alarga a caixa de rolagem no celular mesmo com overflow-x:clip
   no body, e o resultado é a página balançando de lado enquanto a
   pessoa desce. --d é o atraso, escrito pelo editor direto no
   style do elemento. */
[data-reveal]{
  opacity:0;
  transition:opacity .7s ease, transform .7s ease, filter .7s ease;
  transition-delay:var(--d,0s);
  will-change:opacity, transform;
}
[data-reveal="sobe"]   { transform:translate3d(0,28px,0); }
[data-reveal="cresce"] { transform:scale(.92); }
[data-reveal="brilha"] { filter:brightness(2.2) saturate(.4); }

[data-reveal].is-in{ opacity:1; transform:none; filter:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ---------------- blocos do editor visual --------------------
   As classes que os blocos prontos do painel usam quando alguém
   arrasta um pedaço novo para a página. Elas moram aqui, e não
   dentro do editor.js, porque o editor não é publicado junto com
   o site: o que vai para o ar é este arquivo. */
.secao-ed{ padding:clamp(48px,8vw,90px) clamp(18px,5vw,40px); }
.secao-ed--clara{ background:var(--branco); color:#0A1428; }
.secao-ed--clara p{ color:#31435F; }
.env-ed{ max-width:var(--largura); margin:0 auto; }

.grade-ed{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,44px);
  max-width:var(--largura); margin:0 auto;
}
@media (max-width:760px){ .grade-ed{ grid-template-columns:1fr; } }

.hr-ed{
  border:0; height:1px; margin:clamp(28px,5vw,48px) auto;
  max-width:var(--largura);
  background:linear-gradient(90deg,transparent,rgba(110,190,255,.34),transparent);
}

.acoes-ed{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:24px 0; }

.cartao-ed{
  padding:24px; border-radius:var(--raio);
  background:rgba(8,16,40,.6); border:var(--borda);
}
.cartao-ed h3{ font-size:20px; font-weight:800; margin-bottom:8px; }

.figura-ed{ margin:0; }
.figura-ed img{ width:100%; border-radius:var(--raio); }
.figura-ed figcaption{ margin-top:10px; text-align:center; }

/* ==== DAQUI PARA BAIXO É DO EDITOR VISUAL — não edite à mão ==== */
@media (max-width:480px){
  [data-s="twfnf"]{justify-content:center !important;}
}