/* =========================================================================
   Visarium - camada de polimento v1
   Carrega DEPOIS do CSS principal. Sem quebrar o build: so tokens e overrides.
   ========================================================================= */

/* ---------- 1. Tokens: ritmo, hero, escala em telas grandes ---------- */
:root{
  --secao-py: clamp(4rem, 2.4rem + 5.4vw, 7.25rem);
  --hero-min-h: min(calc(100svh - var(--nav-h)), 56rem);
  --cristal-max-celular: min(100%, 24rem);
  --polish-gutter: clamp(1.25rem, .9rem + 1.6vw, 2.5rem);
}
@media (min-width:640px){ :root{ --cristal-max-celular: min(100%, 33rem); } }
@media (min-width:1800px){ html{ font-size:112.5%; } }
@media (min-width:2400px){ html{ font-size:125%; } }

html{
  scroll-padding-top: calc(var(--nav-h) + 1.25rem);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
::selection{ background:color-mix(in oklab, var(--accent) 60%, transparent); color:#fff; }

/* ---------- 2. Tipografia e hierarquia ---------- */
h1,h2,h3{ text-wrap:balance; }
p,li,figcaption{ text-wrap:pretty; }
.eyebrow{ letter-spacing:.14em; }
h1.titulo-brilho,h2.titulo-brilho{ line-height:1.04; padding-bottom:.06em; }
main p.text-step-1{ line-height:1.55; }
main p.text-muted,main li.text-muted{ line-height:1.6; }

/* ---------- 3. Hero: celular e tablet (cristal inteiro, grande e centrado) ---------- */
#topo > .container-site{ gap:clamp(.5rem, 2.2vw, 2rem); }
@media (max-width:1023.98px){
  #topo > .container-site{
    padding-top:.25rem;
    padding-bottom:clamp(3.25rem, 9vw, 5rem);
    row-gap:0;
  }
  #topo .b-cristal{ margin-block:0 .5rem; }
  #topo .b-cristal-img{ scale:1.03; filter:contrast(1.14) saturate(1.05); }
  #topo .b-cristal-brilho{ inset:8% 6%; }
  /* esmaece as 4 bordas da imagem (some a moldura) sem cortar o cristal */
  #topo .b-cristal-preto .b-cristal-img{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
            mask-composite:intersect;
  }
  #topo h1{ max-width:17ch; }
  #topo .b-hero-seq > p.mt-6{ max-width:46ch; }
  #topo .b-hero-seq .btn{ min-height:3rem; }
}
@media (max-width:479.98px){
  #topo .b-hero-seq .btn{ flex:1 1 100%; justify-content:center; }
  #topo .b-hero-seq ul{ gap:.75rem; }
}

/* ---------- 4. Hero: desktop (alinha o cristal ao eixo do texto) ---------- */
@media (min-width:1024px){
  #topo > .container-site{ align-items:center; }
  #topo .b-cristal{ justify-self:end; }
  #topo .b-hero-seq{ padding-block:clamp(1rem, 3vh, 3rem); }
}

/* ---------- 5. Ritmo entre secoes ---------- */
section.secao > .container-site{ padding-inline:var(--polish-gutter); }
.b-hero > .container-site{ padding-inline:var(--polish-gutter); }
.b-footer .container-site{ padding-inline:var(--polish-gutter); }
@media (max-width:1023.98px){
  #agente > .container-site{ row-gap:clamp(2rem, 6vw, 3.5rem); padding-bottom:clamp(3rem, 8vw, 4.5rem); }
}

/* ---------- 6. Botoes, links e foco ---------- */
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
  border-radius:.6rem;
}
.btn{ -webkit-tap-highlight-color:transparent; }
@media (hover:hover){
  .btn{ transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
  .btn-primario:hover{ transform:translateY(-2px); box-shadow:0 .9rem 2.2rem -.6rem var(--glow-strong); }
  .btn-secundario:hover{ transform:translateY(-2px); }
  .btn:active{ transform:translateY(0) scale(.985); }
  .b-nav-link{ position:relative; }
  .b-nav-link::after{
    content:""; position:absolute; inset:auto .9rem .55rem .9rem; height:1px;
    background:var(--accent-text); transform:scaleX(0); transform-origin:0 50%;
    transition:transform var(--dur-2) var(--ease-out);
  }
  .b-nav-link:hover::after{ transform:scaleX(1); }
  .b-footer-link{ transition:color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .b-footer-link:hover{ color:var(--text); transform:translateX(2px); }
  .b-faq-item{ transition:background-color var(--dur-2) var(--ease-out); }
  .b-faq-item:hover{ background:var(--sheen-2); }
}

/* ---------- 7. Animacoes (so para quem aceita movimento) ---------- */
@keyframes polish-cristal-in{
  from{ opacity:0; transform:translateY(1.5rem) scale(.95); }
  to{ opacity:1; transform:none; }
}
@keyframes polish-progresso{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes polish-paralaxe{ to{ transform:translateY(3rem); } }

@media (prefers-reduced-motion:no-preference){
  .js #topo .b-cristal-camada{ animation:polish-cristal-in 1.15s var(--ease-out) .12s both; }
  @supports (animation-timeline:scroll()){
    body::before{
      content:""; position:fixed; inset:0 0 auto 0; height:2px; z-index:90; pointer-events:none;
      background:linear-gradient(90deg, var(--accent), var(--accent-text));
      transform:scaleX(0); transform-origin:0 50%;
      animation:polish-progresso linear both; animation-timeline:scroll(root);
    }
    #topo .b-cristal{ animation:polish-paralaxe linear both; animation-timeline:scroll(root); animation-range:0 70vh; }
  }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
/* ---------- 8. Rodape: libera espaco para a barra fixa do WhatsApp (celular/tablet) ---------- */
@media (max-width:1023.98px){
  .b-footer{ padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px)); }
}