/* ATRIA site · Início: motion extra. Só transform/opacity; o reveal e o timeline vêm do atria.js. */

/* Cascata: cards de um grupo entram um após o outro. */
.stagger > .reveal:nth-child(2){transition-delay:.12s}
.stagger > .reveal:nth-child(3){transition-delay:.24s}
.stagger > .reveal:nth-child(4){transition-delay:.36s}

/* A consulta ATRIA: no desktop o título fica fixo à esquerda enquanto os 4 passos passam à direita. */
@media (min-width:1100px){
  /* overflow:hidden da seção anula o sticky; clip corta os decorativos sem criar área de rolagem */
  .section-como{overflow:clip}
  .section-como > .container{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:64px;align-items:start}
  .section-como .section-head{position:sticky;top:120px;text-align:left;margin:0}
  .section-como .timeline{margin:0;max-width:none}
}

/* Faixa de clínicas desliza devagar (inicio.js duplica os nomes). */
.prova-bar:has(.is-marquee){overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.prova-bar-logos.is-marquee{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;animation:atria-marquee 45s linear infinite}
.prova-bar-logos.is-marquee span{padding-right:48px;white-space:nowrap}
@keyframes atria-marquee{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  .stagger > .reveal{transition-delay:0s !important}
  .prova-bar-logos.is-marquee{animation:none}
  .section-como .section-head{position:static}
}

/* Topo visível desde a primeira pintura: o texto só desliza (sem esperar o JS para aparecer). */
.hero .reveal,.hero .reveal-line > span{opacity:1}
/* Brilho do topo ancorado em px: a troca de fonte muda a altura do hero sem mover o brilho (CLS). */
.hero-aurora{inset:-160px -10% -20% -10%}

/* Índice dos passos: preenche a coluna fixa da consulta (só no desktop). */
.como-nav{display:none}
@media (min-width:1100px){
  .como-nav{display:flex;flex-direction:column;list-style:none;margin:40px 0 0;padding:0;border-left:1px solid rgba(255,255,255,.1)}
  .como-nav a{display:flex;align-items:baseline;gap:14px;padding:14px 0 14px 22px;margin-left:-1px;border-left:2px solid transparent;color:rgba(255,255,255,.45);font-size:15px;transition:color .4s,border-color .4s}
  .como-nav span{font-family:var(--font-display);font-size:20px;color:rgba(245,224,163,.35);transition:color .4s}
  .como-nav a:hover{color:rgba(255,255,255,.8)}
  .como-nav li.is-on a{color:#fff;border-left-color:var(--gold)}
  .como-nav li.is-on span{color:var(--gold-2)}
}