/* Trilha de categorias: uma linha que rola na horizontal, com degrade nas pontas,
   ultima pilula cortada ao meio, barra fina e setas no desktop.
   Usada na home (es e pt) e no menu.html. Comportamento em dados/trilha.js.
   As cores saem das variaveis da pagina, com nomes diferentes nos dois projetos. */
.trilha-wrap{
  --t-fundo:var(--crema,#FFF8F5);
  --t-linha:var(--linea,var(--line,#e6d4ca));
  --t-texto:var(--choco,var(--chocolate,#542F1E));
  --t-ativo:var(--rosa,#E1799D);
  position:relative;margin-top:8px}
.trilha-wrap::before,.trilha-wrap::after{content:"";position:absolute;top:0;bottom:6px;width:36px;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .18s}
.trilha-wrap::before{left:0;background:linear-gradient(to right,var(--t-fundo),transparent)}
.trilha-wrap::after{right:0;background:linear-gradient(to left,var(--t-fundo),transparent)}
.trilha-wrap[data-esq="1"]::before,.trilha-wrap[data-dir="1"]::after{opacity:1}
.trilha{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  padding-right:28px; /* corta a ultima pilula ao meio: o olho entende que ha mais */
  scrollbar-width:thin;scrollbar-color:var(--t-ativo) transparent}
.trilha::-webkit-scrollbar{height:4px}
.trilha::-webkit-scrollbar-track{background:transparent}
.trilha::-webkit-scrollbar-thumb{background:var(--t-ativo);border-radius:999px}
.trilha a{flex:0 0 auto;min-height:44px;display:flex;align-items:center;padding:0 14px;
  border-radius:999px;background:#fff;border:1px solid var(--t-linha);color:var(--t-texto);
  text-decoration:none;font-size:14px;white-space:nowrap}
.trilha a[aria-current="true"]{background:var(--t-ativo);border-color:var(--t-ativo);color:#fff}
.seta{display:none}
@media (min-width:760px){
  .seta{align-items:center;justify-content:center;position:absolute;top:0;
    width:44px;height:44px;z-index:3;border:1px solid var(--t-linha);border-radius:999px;
    background:#fff;color:var(--t-texto);font:inherit;font-size:15px;cursor:pointer;padding:0}
  .seta:not([hidden]){display:flex}
  .seta.esq{left:0}
  .seta.dir{right:0}
  /* so a direita ganha folga: a seta esquerda so existe ja rolado, e ai flutua sobre o fade */
  .trilha{padding-right:64px}
}

/* Opcao "grudar": com data-gruda a trilha acompanha a rolagem enquanto a secao que a
   contem esta a vista, logo abaixo do cabecalho. O deslocamento vem de --hdr-h, medida
   real do <header> publicada por dados/gruda.js (sem data-gruda nada muda). O proprio
   sticky solta quando a secao acaba, entao a trilha nunca flutua sobre o resto da pagina.
   O mesmo script poe .grudada enquanto esta encostada, pra pagina decidir fundo e sombra. */
.trilha-wrap[data-gruda]{position:sticky;top:var(--hdr-h,0px);z-index:10}