/* Componentes do molde da WebFactory: carrossel, abas e animações internas (copiado para cada site;
   edite aqui, não na cópia). Cores pelo site, nas variáveis --comp-* (os valores depois da vírgula são
   o padrão). Tudo funciona sem JS: a trilha do carrossel rola, as abas viram painéis empilhados. */

/* ---- carrossel ---- */
.carrossel{position:relative}
.carrossel-trilho{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--carrossel-item,min(84%,460px));
  gap:var(--carrossel-gap,16px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  list-style:none;margin:0;padding:0 0 14px;scrollbar-width:thin;scrollbar-color:var(--comp-borda,#c9cfc6) transparent}
.carrossel-trilho>*{scroll-snap-align:start;min-width:0}
.carrossel-trilho:focus-visible{outline:3px solid var(--comp-foco,#1a1a1a);outline-offset:4px;border-radius:6px}
.carrossel-js .carrossel-trilho{scrollbar-width:none;padding-bottom:0}
.carrossel-js .carrossel-trilho::-webkit-scrollbar{display:none}
.carrossel-controles{display:flex;align-items:center;gap:10px;margin-top:18px}
.carrossel-controles button{font:inherit;cursor:pointer;color:var(--comp-texto,#1a1a1a);background:var(--comp-fundo,transparent);
  border:1px solid var(--comp-borda,#c9cfc6);border-radius:999px}
.carrossel-ant,.carrossel-prox,.carrossel-pausa{display:inline-grid;place-items:center;width:44px;height:44px;font-size:1.1rem;line-height:1;
  transition:background-color .2s,border-color .2s,transform .2s}
.carrossel-pausa{font-size:.72rem;letter-spacing:-.1em}
.carrossel-ant:hover,.carrossel-prox:hover,.carrossel-pausa:hover{border-color:var(--comp-acento,#1a1a1a)}
.carrossel-pontos{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-inline:auto}
.carrossel-controles .carrossel-ponto{position:relative;width:24px;height:28px;border:0;background:none;padding:0}
.carrossel-ponto::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:999px;
  transform:translate(-50%,-50%);background:var(--comp-borda,#c9cfc6);transition:width .25s,background-color .25s}
.carrossel-ponto[aria-current]::before{width:20px;background:var(--comp-acento,#1a1a1a)}
.carrossel-controles button:focus-visible{outline:3px solid var(--comp-foco,#1a1a1a);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.carrossel-trilho{scroll-behavior:smooth}}

/* ---- abas ---- */
.abas-lista{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--comp-borda,#c9cfc6);margin-bottom:28px}
.abas-lista::-webkit-scrollbar{display:none}
.aba{flex:0 0 auto;font:inherit;font-weight:700;cursor:pointer;color:var(--comp-texto-suave,#4a4f4b);background:none;border:0;
  border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 16px;min-height:44px;transition:color .2s,border-color .2s}
.aba:hover{color:var(--comp-texto,#1a1a1a)}
.aba[aria-selected="true"]{color:var(--comp-texto,#1a1a1a);border-bottom-color:var(--comp-acento,#1a1a1a)}
.aba:focus-visible{outline:3px solid var(--comp-foco,#1a1a1a);outline-offset:-3px;border-radius:6px}
.abas:not(.abas-js) .aba-painel+.aba-painel{margin-top:40px}
.abas-js .aba-painel[hidden]{display:none!important} /* o display:grid do site não pode vencer o hidden */
/* sem data-aba-rotulo o título já é o rótulo da aba: some só da vista (fica para o leitor de tela) */
.abas-js .aba-painel:not([data-aba-rotulo]) .aba-titulo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.aba-painel:focus-visible{outline:3px solid var(--comp-foco,#1a1a1a);outline-offset:6px;border-radius:6px}
@media (prefers-reduced-motion:no-preference){.abas-js .aba-painel:not([hidden]){animation:comp-aba .45s cubic-bezier(.16,1,.3,1)}}
@keyframes comp-aba{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- animações internas (a classe .anima só entra no <html> se a pessoa aceita movimento) ---- */
@media (prefers-reduced-motion:no-preference){
  .anima [data-revela]:not([data-revela="filhos"]),.anima [data-revela="filhos"]>*{opacity:0;transform:translateY(26px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .anima [data-revela].visivel:not([data-revela="filhos"]),.anima [data-revela="filhos"].visivel>*{opacity:1;transform:none}
  .anima [data-revela="filhos"]>:nth-child(2){transition-delay:.08s}
  .anima [data-revela="filhos"]>:nth-child(3){transition-delay:.16s}
  .anima [data-revela="filhos"]>:nth-child(4){transition-delay:.24s}
  .anima [data-revela="filhos"]>:nth-child(5){transition-delay:.32s}
  .anima [data-revela="filhos"]>:nth-child(n+6){transition-delay:.4s}
  .anima [data-paralaxe]{transform:translate3d(0,var(--paralaxe,0px),0) scale(1.06);will-change:transform}
  .sobe{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
  .sobe:hover,.sobe:focus-within{transform:translateY(-4px)}
  .zoom{overflow:hidden}
  .zoom img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
  .zoom:hover img{transform:scale(1.05)}
}