/* =========================================================================
   Camada de movimento — carrega DEPOIS de base.css.

   Arquivo separado de proposito: as copies A e B continuam exatamente como
   estao. Quem quiser movimento inclui este; quem nao quiser, nao inclui.

   Regra que vale para tudo aqui: a pagina precisa funcionar inteira com o JS
   desligado. Por isso nada nasce com opacity:0 no CSS — quem esconde e o JS,
   e so depois de confirmar que vai conseguir revelar.
   ========================================================================= */

/* ------------------------------------------------------- revelar ao rolar */
.js [data-sobe]{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1)}
.js [data-sobe].vis{opacity:1;transform:none}
/* atraso em cascata: os filhos entram um atras do outro, nao todos juntos */
.js [data-cascata]>*{opacity:0;transform:translateY(20px);
  transition:opacity .55s ease,transform .55s ease}
.js [data-cascata].vis>*{opacity:1;transform:none}
.js [data-cascata].vis>*:nth-child(1){transition-delay:.00s}
.js [data-cascata].vis>*:nth-child(2){transition-delay:.07s}
.js [data-cascata].vis>*:nth-child(3){transition-delay:.14s}
.js [data-cascata].vis>*:nth-child(4){transition-delay:.21s}
.js [data-cascata].vis>*:nth-child(5){transition-delay:.28s}
.js [data-cascata].vis>*:nth-child(6){transition-delay:.35s}

/* ------------------------------------------------------------ hero vivo */
.hero h1{animation:entra .8s cubic-bezier(.22,.61,.36,1) both}
.hero p.sub{animation:entra .8s cubic-bezier(.22,.61,.36,1) .12s both}
.hero .acoes{animation:entra .8s cubic-bezier(.22,.61,.36,1) .24s both}
.hero .obs{animation:entra .8s ease .36s both}
.hero figure{animation:entraFoto 1s cubic-bezier(.22,.61,.36,1) .1s both}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes entraFoto{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

/* brilho lento atras do hero — sinal de "vivo" sem pesar */
.hero::after{animation:respira 11s ease-in-out infinite alternate}
@keyframes respira{from{opacity:.65}to{opacity:1}}

/* ---------------------------------------------------------- botao pulsa */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:
  linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);
  transform:translateX(-120%)}
.btn:hover::after{transform:translateX(120%);transition:transform .75s ease}
.zap{animation:bate 2.8s ease-in-out infinite}
@keyframes bate{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.09)}96%{transform:scale(1.03)}}

/* ------------------------------------------------------------- numeros */
.numeros .v{font-variant-numeric:tabular-nums}
.numeros .n{transition:transform .25s ease}
.numeros .n:hover{transform:translateY(-3px)}

/* -------------------------------------------------------------- cartoes */
.card{position:relative;overflow:hidden}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .3s ease}
.card:hover::before{transform:scaleY(1)}

/* ------------------------------------------------------------- etapas */
.etapa{transition:padding-left .25s ease}
.etapa:hover{padding-left:8px}
.etapa::before{transition:transform .25s ease,color .25s ease}
.etapa:hover::before{transform:scale(1.14)}

/* ====================================================== carrossel de avaliacoes */
.carrossel{position:relative}
.trilho{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 18px;
  scrollbar-width:none;-ms-overflow-style:none}
.trilho::-webkit-scrollbar{display:none}
.trilho>.a{scroll-snap-align:start;flex:0 0 calc((100% - 40px)/3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;display:flex;flex-direction:column;min-height:214px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.trilho>.a:hover{border-color:#cfd7e4;transform:translateY(-3px);
  box-shadow:0 16px 38px -24px rgba(21,26,34,.45)}
.trilho blockquote{font-size:15.5px;color:var(--ink-2);margin:12px 0 16px;
  font-style:italic;flex:1}
.trilho .quem{font-size:14.5px;font-weight:600;color:var(--ink)}
.trilho .fonte{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.trilho .estrelas{color:#f0a500;letter-spacing:2px;font-size:15px}

.leme{display:flex;align-items:center;gap:12px;margin-top:6px}
.seta{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-2);cursor:pointer;display:grid;
  place-items:center;font-size:19px;line-height:1;transition:.18s;flex:none}
.seta:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.seta:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line);
  color:var(--ink-3)}
.pontos{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.ponto{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:.22s}
.ponto.on{background:var(--accent);width:22px;border-radius:99px}
.pausa{font-size:13px;color:var(--ink-3);background:none;border:0;cursor:pointer;
  padding:6px 4px}
.pausa:hover{color:var(--accent)}

@media (max-width:900px){ .trilho>.a{flex:0 0 calc((100% - 20px)/2)} }
@media (max-width:640px){ .trilho>.a{flex:0 0 88%} }

/* ------------------------------------------------------------- praças */
.pracas{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.praca{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;position:relative;overflow:hidden;transition:.2s}
.praca:hover{transform:translateY(-3px);box-shadow:0 18px 44px -28px rgba(21,26,34,.5)}
.praca .uf{font-family:var(--serif);font-size:52px;line-height:1;color:var(--line);
  position:absolute;right:18px;top:10px;transition:color .25s ease}
.praca:hover .uf{color:rgba(231,51,94,.18)}
.praca h3{margin-bottom:4px}
.praca .onde{font-size:13.5px;color:var(--ink-3);margin-bottom:14px}
.praca ul{list-style:none;display:grid;gap:7px;font-size:15px;color:var(--ink-2)}
.praca li::before{content:'—';color:var(--accent);margin-right:8px}
@media (max-width:900px){ .pracas{grid-template-columns:1fr} }

/* --------------------------------------------------------- areas em abas */
.abas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.aba{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  padding:9px 17px;border-radius:99px;cursor:pointer;font-size:14.5px;
  font-weight:500;font-family:var(--sans);transition:.18s}
.aba:hover{border-color:var(--accent);color:var(--accent)}
.aba[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.painel[hidden]{display:none}
.painel{animation:surge .4s ease both}
@keyframes surge{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ================================================== botao de WhatsApp verde
   O verde do WhatsApp diz para onde o clique leva antes de a pessoa ler o
   rotulo. Nos testes de mercado converte melhor que o botao da marca — e o
   custo e zero, porque o carmim segue nos botoes que NAO abrem conversa. */
.btn--zap{background:#25d366;box-shadow:0 10px 26px -10px rgba(37,211,102,.7)}
.btn--zap:hover{background:#1fbb59}
.btn--escuro.btn--zap{background:#128c7e;box-shadow:0 10px 26px -10px rgba(18,140,126,.6)}
.btn--escuro.btn--zap:hover{background:#0e7a6e}
.topo .btn--zap{box-shadow:none}

/* ============================================================ hover de leve
   Regra: nada acima de 3px de deslocamento e nada acima de 1.02 de escala.
   Movimento que a pessoa sente sem perceber; passou disso, vira enfeite. */
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px)}
  .card h3{transition:color .2s ease}
  .card:hover h3{color:var(--accent)}
  .nav a{position:relative}
  .nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
    background:var(--accent);transition:right .24s ease}
  .nav a:hover::after{right:0}
  .socio{transition:transform .22s ease,border-color .22s ease}
  .socio:hover{transform:translateY(-2px);border-color:#cfd7e4}
  .socio img{transition:transform .3s ease}
  .socio:hover img{transform:scale(1.04)}
  .duo img,.hero figure img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
  .duo:hover img{transform:scale(1.015)}
  .faq summary{transition:color .18s ease,padding-left .18s ease}
  .faq summary:hover{color:var(--accent);padding-left:5px}
  .rodape a{transition:padding-left .18s ease}
  .rodape a:hover{padding-left:3px}
  .btn:hover{transform:translateY(-1px)}
  .aba{transition:transform .18s ease,border-color .18s ease,color .18s ease}
  .aba:hover{transform:translateY(-1px)}
}
/* Em toque, hover "gruda" e o cartao fica preso no estado ativo. Melhor nao ter. */
@media (hover:none){
  .card:hover,.socio:hover,.praca:hover,.trilho>.a:hover{transform:none;box-shadow:none}
}

/* foco visivel — teclado precisa enxergar onde esta */
a:focus-visible,button:focus-visible,summary:focus-visible,.trilho:focus-visible{
  outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ============================================================== mobile
   O base.css ja quebra as grades. Aqui vai o que faltava para o celular
   ficar confortavel de verdade, sem mexer nas copies A e B. */
@media (max-width:900px){
  /* alvo de toque: 44px e o minimo que o dedo acerta sem erro */
  .btn{padding:15px 26px;min-height:48px;width:auto}
  .hero .acoes .btn{width:100%}
  .seta{width:46px;height:46px}
  .aba{padding:11px 16px;min-height:44px}
  .abas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:6px;margin-left:-24px;margin-right:-24px;padding-left:24px;
    padding-right:24px;scroll-snap-type:x proximity}
  .abas::-webkit-scrollbar{display:none}
  .aba{flex:none;scroll-snap-align:start}
  /* respiro nas laterais do carrossel para o card nao encostar na borda */
  .trilho{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
  .leme{flex-wrap:wrap}
  .pontos{margin-left:0;width:100%;justify-content:center;margin-top:6px}
  /* o flutuante nao pode cobrir o botao do fim da pagina */
  .zap{right:14px;bottom:14px;width:54px;height:54px}
  .fecho{padding-bottom:96px}
  .citacao{max-width:none}
  .duo img{max-height:340px}
  .praca .uf{font-size:40px}
}
@media (max-width:520px){
  .faixa{font-size:12.5px;padding:8px 16px}
  .wrap{padding:0 18px}
  .abas,.trilho{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  h1{font-size:clamp(1.75rem,7.4vw,2.3rem)}
  .numeros .wrap{gap:18px}
  .socio img{width:88px;height:88px}
  .marca{font-size:17px}
}
/* telas curtas deitadas: nao faz sentido hero de tela cheia */
@media (max-height:520px) and (orientation:landscape){
  .hero .wrap{padding-top:30px;padding-bottom:30px}
}

/* -------------------------------------------------- acessibilidade sempre */
@media (prefers-reduced-motion:reduce){
  .js [data-sobe],.js [data-cascata]>*{opacity:1!important;transform:none!important;
    transition:none!important}
  .hero h1,.hero p.sub,.hero .acoes,.hero .obs,.hero figure,.hero::after,.zap,.painel
    {animation:none!important}
  .trilho{scroll-behavior:auto}
}