/* Paulino Vidros — estilos globais (home + galeria).
   O layout usa style="" inline (paridade pixel a pixel com o export do Designer);
   aqui vivem: fontes, base, keyframes e as classes de hover (ex-style-hover). */

/* ===== Fontes auto-hospedadas ===== */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/sora-400.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/sora-500.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/sora-600.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/sora-700.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/sora-800.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/manrope-800.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/jetbrains-mono-600.woff2') format('woff2')}

/* ===== Base (extraída do <style> do export) ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
::selection{background:#62C3FF;color:#0C1E30}
a{color:#1E86DD;text-decoration:none}
a:hover{color:#62C3FF}

/* ===== Keyframes — as 8 animações do design ===== */
@keyframes pv-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes pv-kmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pv-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes pv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes pv-kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.2) translate(-3%,-2%)}}
@keyframes pv-word{from{opacity:0;transform:translateY(120%) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes pv-sweep{0%{transform:translateX(-120%) skewX(-14deg)}60%,100%{transform:translateX(260%) skewX(-14deg)}}
@keyframes pv-fadein{from{opacity:0}to{opacity:1}}

/* ===== Hover (substitui style-hover do runtime do Designer) =====
   !important é necessário: os elementos carregam style="" inline, que sem isso
   venceria a regra :hover — no export, o runtime aplicava o hover via JS inline. */
.hv-cyan:hover{color:var(--cyan)!important}
.hv-menu-link:hover{color:var(--cyan)!important;transform:translateX(8px)!important}
.hv-slide8:hover{transform:translateX(8px)!important}
.hv-tab:hover{border-color:#9fb3c8!important}
.hv-bg-w20:hover{background:rgba(255,255,255,.2)!important}
.hv-bg-w13:hover{background:rgba(255,255,255,.13)!important}
.hv-bg-w12:hover{background:rgba(255,255,255,.12)!important}
.hv-card:hover{transform:translateY(-6px)!important;box-shadow:0 30px 60px -30px rgba(31,55,83,.5)!important}
.hv-gap11:hover{gap:11px!important}
.hv-lift2:hover{transform:translateY(-2px)!important}
.hv-lift3:hover{transform:translateY(-3px)!important}
.hv-scale:hover{transform:scale(1.05)!important}
.hv-navy-btn:hover{transform:translateY(-2px)!important;background:#16283C!important}

/* ===== WhatsApp flutuante: redondo só-ícone (padrão), texto só no desktop ===== */
.wa-float .wa-float-label{display:none}
@media (min-width:1025px){
  .wa-float{padding:14px 20px!important}
  .wa-float .wa-float-label{display:inline}
}
/* variante controlada por JS: some no hero, aparece depois da 1ª dobra */
.wa-float[data-wa-float]{opacity:0;visibility:hidden;pointer-events:none}
.wa-float[data-wa-float].is-visible{opacity:1;visibility:visible;pointer-events:auto}

/* ===== Reveal fallback (quando não há scroll-driven animations, ex.: iOS Safari) ===== */
.reveal-js{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);animation:none!important}
.reveal-js.reveal-in{opacity:1;transform:none}

/* ===== Responsivo (extraído do <style> do export) ===== */
@media (max-width:560px){.nav-quote-btn{display:none}}

/* ===== MOBILE — reorganização do hero, contadores, motion (max 768px) ===== */
@media (max-width:768px){
  /* WhatsApp: círculo só-ícone */
  .wa-float{
    padding:0!important;width:56px;height:56px;justify-content:center;gap:0!important;
    right:16px!important;bottom:16px!important;
  }

  /* HERO: foto (quadrada) no topo + painel de texto embaixo */
  [data-hero]{
    min-height:auto!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    background:var(--deep)!important;
  }
  [data-hero-bg]{
    position:relative!important;inset:auto!important;
    height:62vh;min-height:340px;width:100%;flex:none;
  }
  /* zoom Ken Burns mais visível no mobile */
  [data-hero-bg] [data-slide]{animation-duration:16s!important;}
  /* conteúdo: painel escuro logo abaixo da foto */
  [data-hero-content]{
    padding:30px clamp(20px,6vw,32px) 40px!important;
    background:linear-gradient(180deg,#0C1E30, #0C1E30)!important;
    margin-top:-1px;
  }
  /* seta explore e barra do carrossel: ancorar ao FIM da foto (top), não ao fim do hero.
     foto = 62vh (min 340px); coloca a barra ~24px acima da borda inferior da foto. */
  [data-hero] > a[href="#servicos"]{
    top:max(300px,calc(62vh - 42px))!important;bottom:auto!important;
  }
  [data-hero-progress]{
    top:max(306px,calc(62vh - 34px))!important;bottom:auto!important;right:14px!important;
  }

  /* CONTADORES: 2 colunas, fonte menor */
  [data-stats]{
    grid-template-columns:1fr 1fr!important;gap:14px 12px!important;
  }
  [data-stats] [data-count-val]{font-size:34px!important}
  [data-stats] [data-count] > div:last-child{font-size:10px!important;margin-top:6px!important}

  /* micro-interações de toque: cards e botões respondem ao :active */
  .hv-card:active,[data-gallery-item]:active{transform:scale(.985)!important;transition:transform .12s ease}
  a[style*="border-radius"]:active{transform:scale(.97)!important}
}