/* Animações do site Segben. Tudo desliga com prefers-reduced-motion. */
html,body{overflow-x:clip}

/* Reveal ao rolar */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .rv.rv-left{transform:translateX(-36px)}
.js .rv.rv-right{transform:translateX(36px)}
.js .rv.rv-zoom{transform:scale(.94)}
.js .rv.in{opacity:1;transform:none}

/* Título do hero palavra por palavra */
.js .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.js .w>span{display:inline-block;transform:translateY(105%);animation:wordUp .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes wordUp{to{transform:none}}

/* Foto do hero: entra com zoom e fica respirando devagar */
.hero-media{overflow:hidden;border-radius:10px}
.hero-media img{animation:heroIn 1.4s cubic-bezier(.2,.7,.2,1) both,breathe 18s ease-in-out 1.4s infinite alternate}
@keyframes heroIn{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-chip{animation:chipIn .7s cubic-bezier(.2,.8,.2,1) 1s both}
@keyframes chipIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Faixa zebrada andando */
.hz{animation:hzMove 1.6s linear infinite}
@keyframes hzMove{to{background-position:50.91px 0}}

/* Letreiro de clientes */
.marquee{flex:1 1 100%;order:3;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:56px;animation:marquee 60s linear infinite}
.marquee-track>span{white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 28px))}}

/* Linha verde dos passos crescendo */
.js .step{border-top-color:transparent !important;position:relative}
.js .step::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px;background:#17752f;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0ms) + 150ms)}
.js .step.in::before{transform:scaleX(1)}

/* Botões e cards */
.btn-main,.btn-ghost,.nav a.wa{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn-main:hover,.btn-ghost:hover,.nav a.wa:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.card{transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(13,59,36,.14)}
.gal img{transition:transform .5s ease,filter .5s ease}
.gal img:hover{transform:scale(1.03);filter:saturate(1.15)}

/* Cabeçalho ganha sombra ao rolar */
.site-header{transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.08)}

/* Botão flutuante do WhatsApp com pulso */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #17752f;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}

/* Selo dos bombeiros brilhando de leve */
.seal svg{animation:seal 3s ease-in-out infinite}
@keyframes seal{50%{filter:drop-shadow(0 0 6px rgba(242,194,0,.7))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv,.js .w>span{opacity:1 !important;transform:none !important}
  .js .step{border-top-color:#17752f !important}
  .js .step::before{display:none}
}

/* Logos dos clientes no letreiro (cai pro nome se o arquivo não existir) */
.marquee-track{align-items:center}
.cl{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:200px;height:84px;padding:12px 20px;border-radius:10px;transition:background .3s ease}
.cl img{width:100%;height:100%!important;max-width:none;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
@media (max-width:600px){.cl{width:150px;height:68px;padding:10px 14px}}
.cl:hover img{filter:none;opacity:1}
.cl b{display:none;font-weight:700}
.cl.nologo b{display:inline}
:root[data-theme="dark"] .cl:not(.nologo){background:#eef2ee}
:root[data-theme="dark"] .cl img{opacity:.85}

/* Links de contato */
.contact-links a{transition:background .2s ease,border-color .2s ease}
.contact-links a:hover{background:rgba(255,255,255,.12);border-color:#ffffff !important}
footer a:hover{color:#ffffff !important}

/* Selo de avaliação do Google */
.rating{transition:background .2s ease,transform .2s ease}
.rating:hover{background:rgba(255,255,255,.16) !important;transform:translateY(-2px);color:#ffffff}
.rating svg{animation:starPop .5s cubic-bezier(.2,.8,.2,1) both}
.rating svg:nth-child(2){animation-delay:.08s}.rating svg:nth-child(3){animation-delay:.16s}.rating svg:nth-child(4){animation-delay:.24s}.rating svg:nth-child(5){animation-delay:.32s}
@keyframes starPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* Avaliações: grade no PC, carrossel de arrastar no celular */
.reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;align-items:stretch}
@media (max-width:700px){
  .reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;gap:14px;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .reviews .review{flex:0 0 84%;scroll-snap-align:start}
}

/* Pacote de melhorias out/2026 */
/* Títulos: maiúsculo só no topo e na brigada */
section:not(#brigada) h2:not(.card h2){text-transform:none !important;letter-spacing:-0.005em}
/* Vídeo do topo entra igual à foto */
.hero-media video{animation:heroIn 1.4s cubic-bezier(.2,.7,.2,1) both}
/* Plano mensal */
.plano::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:28px solid rgba(242,194,0,.08);pointer-events:none}
/* FAQ */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brand-ink)}
.faq-ic{position:relative;width:22px;height:22px;flex:none}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2.4px;background:var(--brand-ink);border-radius:2px;transform:translate(-50%,-50%);transition:transform .25s ease}
.faq-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] .faq-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-item[open] summary{color:var(--brand-ink)}
.faq-item p{animation:msgIn .3s ease}
/* Home mais curta no celular */
@media (max-width:700px){
  .gal img:nth-child(n+5){display:none}
  .plano{padding:32px 24px !important}
}

/* Treinamentos da home viram carrossel no celular */
@media (max-width:700px){
  .tcards{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;gap:14px !important;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none}
  .tcards::-webkit-scrollbar{display:none}
  .tcards > .card{flex:0 0 78%;scroll-snap-align:start}
}

/* Botão com hover interativo (adaptação do InteractiveHoverButton do 21st.dev, sem React) */
.ihb{position:relative;overflow:hidden;isolation:isolate}
.btn-main.ihb:hover{background:var(--ihb-bg) !important;color:var(--ihb-fg) !important}
.ihb-label{display:inline-flex;align-items:center;gap:inherit;position:relative;z-index:1;transition:transform .3s ease,opacity .3s ease}
.ihb-hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ihb-hover-fg);opacity:0;transform:translateX(48px);transition:transform .3s ease,opacity .3s ease;white-space:nowrap;padding:0 16px}
.ihb-dot{position:absolute;left:10px;top:calc(50% - 4px);width:8px;height:8px;border-radius:8px;background:var(--ihb-dot);z-index:0;transition:all .3s ease;opacity:.9}
.ihb:hover .ihb-label,.ihb:focus-visible .ihb-label{transform:translateX(48px);opacity:0}
.ihb:hover .ihb-hover,.ihb:focus-visible .ihb-hover{transform:translateX(0);opacity:1}
.ihb:hover .ihb-dot,.ihb:focus-visible .ihb-dot{left:0;top:0;width:100%;height:100%;transform:scale(1.8);border-radius:0;opacity:1}
@media (hover:none){.ihb-dot{display:none}}

/* Depoimentos em colunas que sobem (adaptação do testimonials-6 do 21st.dev, sem React) */
.tms{display:flex;justify-content:center;gap:24px;max-height:640px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.tms-col{flex:1 1 0;min-width:0;max-width:390px}
.tms-track{display:flex;flex-direction:column;gap:24px;padding-bottom:24px;animation:tmsUp var(--dur) linear infinite}
.tms-col:hover .tms-track,.tms-col:focus-within .tms-track{animation-play-state:paused}
@keyframes tmsUp{to{transform:translateY(-50%)}}
.tms-card{box-shadow:0 14px 34px rgba(13,59,36,.10)}
:root[data-theme="dark"] .tms-card{box-shadow:0 14px 34px rgba(0,0,0,.35)}
.tms-m{display:none}
@media (max-width:1000px){
  .tms-a,.tms-b,.tms-c{display:none}
  .tms-m{display:block;max-width:440px}
  .tms{max-height:560px}
}
@media (prefers-reduced-motion:reduce){
  .tms{max-height:none;-webkit-mask-image:none;mask-image:none}
  .tms-card[aria-hidden="true"]{display:none}
}