/* VIGIL site — efeitos adicionais (aditivo; não altera o CSS base cacheado) */
/* guarda anti-overflow horizontal (22/07): clip não cria scroll container (sticky segue ok) */
html,body{overflow-x:clip;}
.card.flashlight-card{transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);}
.card.flashlight-card:hover{border-color:rgba(59,130,246,.5);transform:translateY(-4px);
  box-shadow:0 16px 44px -20px rgba(59,130,246,.55);}
@media (prefers-reduced-motion: reduce){
  .card.flashlight-card,.card.flashlight-card:hover{transition:none;transform:none;box-shadow:none;}
}

/* figs muito largas rolam na horizontal no mobile (legibilidade) */
@media (max-width:680px){
  .fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .fig-scroll>svg,.fig-scroll .frame-body>svg{min-width:600px;}
}

/* item 2: texto dos cards revela da esquerda -> direita ao entrar na tela (scroll) */
@media (prefers-reduced-motion: no-preference){
  .card.animate-on-scroll :is(h3,p:not(.fig-cap),ul){
    clip-path:inset(0 100% 0 0);
    transition:clip-path .75s var(--ease);
  }
  .card.animate-on-scroll.active :is(h3,p:not(.fig-cap),ul){
    clip-path:inset(0 0 0 0);
  }
  .card.animate-on-scroll.active :is(.caption,.code){transition-delay:.04s;}
  .card.animate-on-scroll.active h3{transition-delay:.12s;}
  .card.animate-on-scroll.active :is(.muted,.dor,.como){transition-delay:.20s;}
  .card.animate-on-scroll.active ul{transition-delay:.30s;}
}

/* gráficos flutuam suavemente em loop (leve movimento, tipo flutuando) */
@keyframes gfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@media (prefers-reduced-motion: no-preference){
  .fig>svg,.fig>.frame,.gfx{animation:gfloat 6.5s ease-in-out infinite;will-change:transform;}
  /* dessincronia entre gráficos lado a lado (2o de cada par flutua fora de fase) */
  .grid2>.card:nth-child(2) .gfx{animation-duration:7.8s;animation-delay:-2.6s;}
  .grid2>.fig:nth-child(2)>svg,.grid2>.fig:nth-child(2)>.frame{animation-duration:7.8s;animation-delay:-2.6s;}
}

/* mobile: aumenta rotulos/mono pequenos p/ legibilidade (revisão Gui 22/07) */
@media (max-width:640px){
  .eyebrow{font-size:11.5px!important;}
  .sec-rule{font-size:14px!important;line-height:1.55!important;}
  .mech{font-size:13px!important;}
  .fig-cap{font-size:11px!important;}
  .caption{font-size:12px!important;}
  .seg-strip{font-size:12px!important;}
  .prova-band .stat span{font-size:13px!important;}
  .faq-acc details p{font-size:15px!important;}
  .foot-tag{font-size:13.5px!important;}
  .hs-cap,.hs-live{font-size:11px!important;}
  /* corpo dos cards e listas: vence os font-size inline de 14px */
  .card p,.card li{font-size:14.5px!important;line-height:1.7!important;}
  .strip span{font-size:13.5px!important;}
  .strip b{font-size:16px!important;}
  .ed-item .dor,.ed-item .como{font-size:14.5px!important;}
  .frame-bar b{font-size:10px!important;letter-spacing:.12em!important;}
  .fw-list .tx{font-size:14.5px!important;line-height:1.65!important;}
  /* caption longa NÃO estica o grid: no mobile pode quebrar em 2 linhas */
  .fig-cap{white-space:normal!important;min-width:0!important;}
}

/* destaque de card na rolagem (mobile): borda iluminada na faixa central da tela
   (reintroduzido a pedido do Gui 22/07; classe aplicada pelo JS site-20260722a.js) */
@media (max-width:820px){
  .card{transition:border-color .35s ease,box-shadow .35s ease,background .35s var(--ease);}
  .card.card-lit{border-color:rgba(109,162,248,.85);
    box-shadow:0 0 0 1px rgba(109,162,248,.4),0 0 24px -4px rgba(59,130,246,.55);}
  .card-product.card-lit{border-color:rgba(109,162,248,.95);}
  .card-product.risk.card-lit{border-color:rgba(251,191,36,.9);
    box-shadow:0 0 0 1px rgba(245,158,11,.4),0 0 24px -4px rgba(245,158,11,.5);}
}
@media (prefers-reduced-motion: reduce){.card.card-lit{transition:none;}}