:root{
    /* paleta da campanha */
    --ice:#f1f6f8;        /* quase-branco azulado */
    --ice-2:#e6eef2;
    --mist:#c3d7de;       /* azul-claro acinzentado */
    /* superficie das secoes depois do hero: a agua para de aparecer
       direto atras do conteudo e vira so o fundo do hero */
    --panel:rgba(195,215,222,.92);
    /* alpha 0 da MESMA cor: 'transparent' interpola por preto e suja o meio do gradiente */
    --panel-0:rgba(195,215,222,0);
    --fade:clamp(110px,17vh,220px);
    --mist-deep:#a6c2cd;
    --navy:#2c4e8f;       /* contorno / acento */
    --navy-deep:#1b3160;
    --ink:#16233f;        /* texto */

    --muted:rgba(22,35,63,.76);
    --line:rgba(44,78,143,.22);
    --line-soft:rgba(44,78,143,.12);

    /* Alte Haas Grotesk nos dois papeis: Bold nos titulos, Regular no
       texto corrido. As fontes de sistema ficam como rede de seguranca
       enquanto a webfont nao chega (font-display:swap). */
    --titulo:"Alte Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    --sans:"Alte Haas Grotesk","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
    /* serifada sobrou so pros glifos B/I do editor, onde ela e icone e
       nao titulo — num grotesco o "I" italico vira um risco reto */
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Times New Roman",Georgia,serif;

    --maxw:1180px;
    --pad:clamp(20px,5vw,64px);

    /* moldura clara: o conteudo e um cartao recuado, de cantos
       arredondados, e a moldura e o fundo do body aparecendo em volta */
    --frame:clamp(8px,0.66vw,12px);
    --frame-r:clamp(10px,0.95vw,15px);
    --frame-c:#000;
  }

  /* ---------- webfont ----------
     Alte Haas Grotesk (Yann Le Coroller) — freeware, redistribuivel
     desde que o arquivo de licenca ande junto: ele esta em
     assets/fonts/LICENCA-alte-haas-grotesk.txt e e publicado com o site.
     Auto-hospedada de proposito: fonte em CDN quebraria a propriedade
     de zero request externo e meteria cookie de terceiro numa pagina
     que promete anonimato. */
  @font-face{
    font-family:"Alte Haas Grotesk";
    /* caminho relativo a ESTE arquivo, nao ao html */
    src:url("fonts/AlteHaasGroteskRegular.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;   /* o texto aparece na hora, na fonte de sistema, e troca quando chega */
  }
  @font-face{
    font-family:"Alte Haas Grotesk";
    src:url("fonts/AlteHaasGroteskBold.woff2") format("woff2");
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  body{
    margin:0;
    padding:var(--frame);
    background:var(--frame-c);
    color:var(--ink);
    font-family:var(--sans);
    font-size:clamp(16px,1.05vw,18px);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- lâmina d'água ---------- */
  /* canvas e elemento substituido: com width:auto ele assume o tamanho
     do buffer em vez de esticar no inset, por isso as medidas explicitas */
  #fluid{
    position:fixed;
    top:var(--frame);left:var(--frame);
    width:calc(100% - var(--frame)*2);
    height:calc(100% - var(--frame)*2);
    display:block;z-index:0;pointer-events:none;
    border-radius:var(--frame-r);
  }
  .no-fluid #fluid{display:none}
  .no-fluid body::before{
    content:"";
    position:fixed;inset:var(--frame);z-index:0;pointer-events:none;
    border-radius:var(--frame-r);
    background:
      radial-gradient(62vw 62vw at 20% 16%, var(--mist), transparent 64%),
      radial-gradient(54vw 54vw at 84% 32%, rgba(44,78,143,.14), transparent 62%),
      radial-gradient(70vw 70vw at 52% 98%, var(--mist-deep), transparent 66%),
      var(--ice);
  }

  .page{position:relative;z-index:1}
  .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

  /* ---------- tipografia ---------- */
  h1,h2,h3{margin:0;color:var(--navy-deep)}
  p{margin:0}
  .muted{color:var(--muted)}

  .eyebrow{
    font-family:var(--sans);
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--navy);font-weight:700;
  }

  /* ---------- nav ----------
     Pill flutuante centralizado: link, marca, link. A barra em si nao
     pinta nada e nao captura clique — so o pill. Sticky, entao reserva
     a propria altura e nada passa por baixo. */
  .nav{
    position:sticky;
    top:calc(var(--frame) + 12px);
    z-index:40;
    display:flex;justify-content:center;
    padding-inline:var(--pad);
    pointer-events:none;
    margin-bottom:-6px;
  }
  /* em repouso o menu recua; volta inteiro no hover ou no foco por teclado.
     So em aparelho com hover: no toque nao existe hover, e o menu ficaria
     apagado pra sempre sem jeito de restaurar. */
  @media (hover:hover) and (pointer:fine){
    .nav__pill{
      opacity:.55;
      transition:opacity .35s cubic-bezier(.2,.8,.2,1);
    }
    .nav__pill:hover,
    .nav__pill:focus-within{opacity:1}
  }
  @media (prefers-reduced-motion:reduce){
    .nav__pill{transition:none}
  }

  .nav__pill{
    pointer-events:auto;
    display:flex;align-items:center;
    gap:clamp(14px,2.2vw,38px);
    max-width:100%;
    background:#000;
    border-radius:999px;
    padding:8px clamp(16px,1.8vw,26px);
    box-shadow:0 14px 34px -20px rgba(0,0,0,.75);
  }
  .nav__link{
    color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;
    font-size:clamp(10px,0.85vw,12px);font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    transition:color .2s;
  }
  .nav__link:hover{color:#fff}
  .nav__link[aria-current="page"]{
    color:#fff;
    text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;
  }
  .nav__link:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}

  .brand{display:inline-flex;text-decoration:none;line-height:0;flex:none}
  .brand__mark{
    display:block;
    height:clamp(30px,2.6vw,38px);
    aspect-ratio:1.808;                 /* proporcao do lockup recortado */
    /* caminho relativo a ESTE arquivo, nao ao html */
    background:url("prudence-lub.png") center/contain no-repeat;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .brand:hover .brand__mark{transform:scale(1.06)}
  .brand:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:999px}

  /* a arte e branca; no rodape claro ela e invertida pra virar escura */
  .foot .brand__mark{height:42px;filter:invert(1);opacity:.8}
  footer .brand:focus-visible{outline-color:var(--navy)}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:calc(100svh - var(--frame)*2);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    padding-block:clamp(60px,10vh,120px);
  }
  .hero h1{margin:0;line-height:0}
  /* caixa de referencia das gotas: elas sao posicionadas em % sobre a
     arte, entao acompanham o tamanho dela sem conta nenhuma no JS */
  .hero__lockup{position:relative;display:inline-block;line-height:0}
  .hero__gotas{position:absolute;inset:0;pointer-events:none}

  /* Gota: largura em %, altura pelo aspect-ratio — assim ela encolhe
     junto com o lockup no mobile. A queda tambem e relativa (% do
     translateY resolve contra a propria altura da gota), entao nao ha
     medida em px pra corrigir por breakpoint. */
  .gota{
    position:absolute;
    width:var(--d);aspect-ratio:1;
    margin-left:calc(var(--d) / -2);
    /* brilho no ombro: e o que faz ler como agua e nao como bolinha */
    background:
      radial-gradient(circle at 34% 26%, rgba(255,255,255,.72), transparent 46%),
      var(--c);
    border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
    /* a gota e irma do <img>, entao nao pega o filtro dele: sem sombra
       propria ela ficava com cara de colada sobre o lettering */
    filter:drop-shadow(0 3px 5px rgba(27,49,96,.22));
    opacity:0;
    will-change:transform,opacity;
    animation:pingar var(--t) linear forwards;
  }
  /* incha na ponta, estica, solta e acelera na queda */
  @keyframes pingar{
    0%   {transform:translateY(-8%)  scale(.22,.16); opacity:0}
    10%  {transform:translateY(-4%)  scale(.62,.5);  opacity:.7}
    26%  {transform:translateY(0)    scale(1,1);     opacity:.92}
    38%  {transform:translateY(6%)   scale(.9,1.32); opacity:.92}
    48%  {transform:translateY(70%)  scale(.78,1.5); opacity:.9}
    62%  {transform:translateY(220%) scale(.72,1.38);opacity:.82}
    78%  {transform:translateY(470%) scale(.68,1.24);opacity:.9}
    92%  {transform:translateY(calc(var(--queda) * .82)) scale(.64,1.16);opacity:.55}
    100% {transform:translateY(var(--queda)) scale(.6,1.1); opacity:0}
  }
  @media (prefers-reduced-motion:reduce){.gota{display:none}}
  .hero__art{
    display:block;
    width:min(64vw, 650px);
    height:auto;
    margin-inline:auto;
    /* drop-shadow, nao box-shadow: o arquivo tem alpha, entao a sombra
       segue a silhueta das letras em vez do retangulo da imagem.
       Mesmo navy da sombra do tubo do Lub. */
    filter:drop-shadow(0 18px 26px rgba(27,49,96,.34));
  }
  /* marca no lugar do lettering: inclinada 5deg, e a sombra recua —
     no preto chapado da marca a sombra navy do lettering emborrava */
  .hero__art--marca{
    transform:rotate(-5deg);
    filter:drop-shadow(0 14px 22px rgba(27,49,96,.20));
  }
  /* Fora do fluxo, ancorada no pe do hero: no fluxo ela somava altura
     abaixo da arte e empurrava o lockup pra cima do centro. Assim o h1
     fica sozinho e o justify-content:center centra a arte de verdade.
     Centralizada por `left` + `margin-left`, e nao por transform: a
     animacao `bob` usa transform e sobrescreveria o translateX. */
  .hero .scroll{
    position:absolute;
    bottom:clamp(96px,13vh,140px);   /* acima da aba fixa do rodape */
    left:50%;margin-left:-19px;
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line);
    display:grid;place-items:center;color:var(--navy);
    animation:bob 2.6s ease-in-out infinite;
  }
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
  @media (prefers-reduced-motion:reduce){.hero .scroll{animation:none}}


  /* ---------- sobre o Lub ---------- */
  .about{
    background:linear-gradient(to bottom, var(--panel-0) 0, var(--panel) var(--fade));
    padding-block:calc(var(--fade) * 0.7) clamp(20px,4vh,50px);
    scroll-margin-top:calc(96px + var(--frame));
  }
  .about__head{text-align:center;margin-bottom:clamp(24px,4vh,40px)}
  .about__head h2{
    font-family:var(--titulo);font-weight:700;
    font-size:clamp(32px,5vw,64px);line-height:1.06;letter-spacing:-.02em;margin-top:14px;
  }
  .about__head p{margin:18px auto 0;max-width:44ch;color:var(--muted);font-size:clamp(15px,1.2vw,17px)}

  .about__stage{
    display:flex;flex-direction:column;align-items:center;gap:34px;
  }
  .about__tube{
    display:block;height:auto;
    width:clamp(150px,26vw,225px);
    filter:drop-shadow(0 40px 50px rgba(27,49,96,.22));
  }

  /* bolhas: no mobile viram uma fileira que quebra sozinha */
  .bubbles{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  }
  .bubble{
    display:grid;place-items:center;text-align:center;
    width:var(--d);height:var(--d);
    border:2px solid var(--navy-deep);
    border-radius:50%;
    padding:6px;
    font-size:clamp(12px,1.05vw,15px);
    font-weight:700;line-height:1.15;letter-spacing:-.01em;
    color:var(--navy-deep);
    background:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
  .fizz{display:none}

  /* a partir de 900px as bolhas flutuam em volta do tubo */
  @media (min-width:900px){
    /* o palco precisa ser mais alto que o tubo (proporcao 1:2.92),
       senao ele transborda pras secoes vizinhas */
    .about__stage{display:block;position:relative;min-height:clamp(660px,74vh,780px)}
    .about__tube{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:clamp(165px,15vw,215px);
    }
    .bubbles{display:block}
    .bubble{
      position:absolute;
      left:var(--x);top:var(--y);
      transform:translate(-50%,-50%);
      transition:transform .4s cubic-bezier(.2,.8,.2,1);
    }
    .bubble:hover{transform:translate(-50%,-50%) scale(1.06)}
    /* bolhinhas decorativas, so na versao flutuante */
    .fizz{
      display:block;position:absolute;
      left:var(--x);top:var(--y);
      width:var(--d);height:var(--d);
      transform:translate(-50%,-50%);
      border:2px solid var(--navy-deep);border-radius:50%;
      opacity:.55;pointer-events:none;
    }
  }

  /* ---------- split: escrever | ler ---------- */
  .split{
    /* a agua do hero se dissolve na superficie azul em vez de cortar seco.
       O ultimo stop de um linear-gradient se estende ate o fim, entao o
       resto da secao fica com --panel chapado. */
    background:linear-gradient(to bottom, var(--panel-0) 0, var(--panel) var(--fade));
    padding-block:calc(var(--fade) * 0.62) clamp(90px,14vh,150px);
    scroll-margin-top:calc(96px + var(--frame));
  }
  .split .wrap{max-width:1420px}
  /* empilhado: formulario centralizado e, abaixo, o feed em toda a largura */
  .split__in{display:block}
  .col--form{max-width:760px;margin-inline:auto}
  .col--feed{margin-top:clamp(80px,12vh,140px);scroll-margin-top:calc(96px + var(--frame))}

  .col__head{margin-bottom:clamp(26px,3.5vh,38px);text-align:center}
  .col__head p{margin-inline:auto}
  /* Pergunta principal do formulario. O seletor precisa carregar o
     `.col__head h2` junto: so `.pergunta` perde em especificidade pra
     regra que fixa a serifada logo abaixo. */
  .col__head h2.pergunta{
    letter-spacing:-.01em;
  }

  .col__head h2{
    font-family:var(--titulo);
    font-weight:700;
    font-size:clamp(28px,3.2vw,42px);
    line-height:1.08;
    letter-spacing:-.02em;
    /* era 14px pra afastar da eyebrow; as duas colunas perderam a
       delas, entao o recuo virava espaco solto */
    margin-top:0;
    text-wrap:balance;
  }
  .col__head p{
    margin-top:18px;
    max-width:52ch;
    font-size:clamp(15px,1.25vw,18px);
    color:var(--muted);
    text-wrap:pretty;
  }

  /* ---------- painel de vidro ----------
     Receita do GlassCard de referência: preenchimento chapado a 30%,
     borda fina de mesma cor/alpha, raio 16px e blur médio. Sem
     gradiente, sem brilho especular, sem inset — vidro limpo. */
  /* a janela e recortada por um caminho ondulado gerado em JS; o
     contorno vem de um svg irmao, pra o traco nao ser cortado pelo
     proprio clip-path */
  .panel-wrap{position:relative;max-width:760px;margin-inline:auto}
  .panel__edge{
    position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;z-index:2;overflow:visible;
  }
  .panel__edge path{
    fill:none;
    stroke:rgba(255,255,255,.85);
    stroke-width:1.5;
    vector-effect:non-scaling-stroke;
  }
  .panel{
    position:relative;
    padding:clamp(30px,3.8vw,40px) clamp(28px,3.4vw,36px);
    background:rgba(255,255,255,.30);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:0 24px 60px -46px rgba(27,49,96,.5);
  }
  /* sem clip-path:path() o painel volta a ser um retangulo arredondado */
  @supports not (clip-path: path("M0 0L1 1Z")){
    .panel{border-radius:16px;border:1px solid rgba(255,255,255,.55)}
    .panel__edge{display:none}
  }

  /* sem backdrop-filter (Firefox antigo), cai pra fosco opaco */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .panel{background:rgba(255,255,255,.86)}
  }

  /* aviso de anonimato */
  .anon{
    display:flex;gap:14px;align-items:flex-start;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:12px;
    background:rgba(195,215,222,.3);
    margin-bottom:24px;
  }
  .anon svg{width:20px;height:20px;flex:none;color:var(--navy-deep);margin-top:2px}
  .anon p{font-size:14px;line-height:1.55;color:var(--ink)}
  .anon strong{color:var(--navy-deep)}

  /* campos */
  .field{margin-bottom:22px}
  .field > label,.legend{
    display:block;
    font-size:13px;font-weight:700;letter-spacing:.02em;
    color:var(--navy-deep);margin-bottom:8px;
  }
  .hint{font-weight:400;color:var(--muted);letter-spacing:0}

  /* campos seguem a mesma língua do card: chapado, borda fina, raio menor */
  textarea,select,input[type="number"]{
    width:100%;
    font-family:inherit;font-size:16px;color:var(--ink);
    background:rgba(255,255,255,.42);
    border:1px solid rgba(255,255,255,.55);
    border-radius:10px;
    padding:13px 15px;
    transition:border-color .2s, box-shadow .2s, background .2s;
  }
  textarea{min-height:190px;resize:vertical;line-height:1.6}
  textarea::placeholder,input::placeholder{color:rgba(22,35,63,.66)}
  textarea:focus,select:focus,input[type="number"]:focus{
    outline:none;
    border-color:var(--navy);
    background:rgba(255,255,255,.78);
    box-shadow:0 0 0 3px rgba(44,78,143,.16);
  }
  input[type="number"]{appearance:textfield;-moz-appearance:textfield}
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type="number"].is-bad{border-color:#8c2230;box-shadow:0 0 0 3px rgba(140,34,48,.14)}

  select{
    appearance:none;
    font-size:15px;
    padding-right:40px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c4e8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
    background-size:17px;
    cursor:pointer;
  }

  .counter{
    font-size:12px;color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .field--story{position:relative}
  .field__foot{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:8px;
  }
  .tools{display:flex;align-items:center;gap:6px}
  .tools__sep{width:1px;height:18px;background:var(--line);margin-inline:2px}
  .tool{
    display:grid;place-items:center;
    width:34px;height:34px;padding:0;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.42);
    color:var(--navy-deep);
    font-family:var(--serif);font-size:17px;line-height:1;cursor:pointer;
    transition:background .2s,border-color .2s,transform .18s;
  }
  .tool--b{font-weight:700}
  .tool--i{font-style:italic;font-weight:600}
  .tool:hover{background:rgba(255,255,255,.85);border-color:var(--navy)}
  .tool[aria-expanded="true"]{background:var(--mist);border-color:var(--navy)}
  .tool:active{transform:scale(.94)}
  .tool:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

  /* [hidden] do navegador perde pro display de autor, entao a guarda e
     obrigatoria — sem ela o painel nunca fecha */
  .emoji-panel[hidden]{display:none}
  .emoji-panel{
    position:absolute;z-index:20;
    left:0;right:0;
    margin-top:8px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
    gap:4px;
    max-height:212px;overflow-y:auto;
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.6);
    /* opaco de verdade: e um popover, nao um vidro — com .86 os campos
       de tras vazavam por baixo dos emojis */
    background:#f4f8fa;
    box-shadow:0 20px 44px -28px rgba(27,49,96,.6);
  }
  .emoji-panel button{
    aspect-ratio:1;
    border:0;background:none;border-radius:8px;
    font-size:19px;line-height:1;cursor:pointer;
    transition:background .15s,transform .15s;
  }
  .emoji-panel button:hover{background:var(--mist);transform:scale(1.14)}
  .emoji-panel button:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
  @media (prefers-reduced-motion:reduce){
    .emoji-btn,.emoji-panel button{transition:none}
  }
  .counter.is-near{color:var(--navy)}

  fieldset{border:0;margin:0 0 22px;padding:0}
  /* auto-fit: na coluna estreita do split os 3 campos quebram sozinhos
     em vez de espremer e cortar o texto do select */
  .grid3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
  .grid3 label{
    display:block;font-size:12px;color:var(--muted);
    margin-bottom:6px;letter-spacing:.02em;
  }

  /* honeypot — invisível pra gente, irresistível pra bot */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* ondulação no hover — anéis saindo do cursor, dentro do botão */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  /* :not(.ripple) e obrigatorio — sem ele esta regra (0,1,1) vence a do
     .ripple (0,1,0), os aneis viram itens flex e incham o botao */
  .btn > span:not(.ripple){position:relative;z-index:1}
  .btn > .ripple{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.6);
    transform:translate(-50%,-50%) scale(0);
    pointer-events:none;
    will-change:transform,opacity;
    animation:ripple-out 850ms cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes ripple-out{
    0%{transform:translate(-50%,-50%) scale(0);opacity:.9}
    100%{transform:translate(-50%,-50%) scale(1);opacity:0}
  }
  @media (prefers-reduced-motion:reduce){.ripple{display:none}}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6em;
    width:100%;
    padding:1.05em 2em;
    border:1px solid transparent;border-radius:10px;
    background:var(--navy);color:#fff;
    font-family:inherit;font-weight:700;font-size:15px;letter-spacing:.02em;
    cursor:pointer;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s;
    box-shadow:0 10px 30px -14px rgba(27,49,96,.85);
  }
  .btn:hover:not(:disabled){transform:translateY(-2px);background:var(--navy-deep)}
  .btn:active:not(:disabled){transform:translateY(0)}
  .btn:disabled{opacity:.55;cursor:not-allowed}
  :where(a,button,select,textarea):focus-visible{outline:2px solid var(--navy);outline-offset:3px}

  .err{
    display:none;margin-top:14px;font-size:14px;color:#8c2230;
    background:rgba(140,34,48,.08);border:1px solid rgba(140,34,48,.25);
    border-radius:12px;padding:12px 14px;
  }
  .err.is-on{display:block}

  /* confirmação */
  .done{display:none;text-align:center;padding:clamp(20px,5vw,50px) 0}
  .done.is-on{display:block}
  .done h3{
    font-family:var(--titulo);font-weight:700;
    font-size:clamp(26px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em;
  }
  .done p{margin-top:16px;color:var(--muted)}
  .done .mark{
    width:56px;height:56px;margin:0 auto 22px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--mist);border:1px solid var(--navy);color:var(--navy-deep);
  }
  .done .mark svg{width:26px;height:26px}

  /* ---------- feed ---------- */

  /* masonry por multi-coluna: cards de alturas diferentes se encaixam
     sem buraco, que e o efeito do grid de depoimentos da referencia */
  .feed__grid{columns:1;column-gap:18px}
  @media (min-width:720px){.feed__grid{columns:2}}
  @media (min-width:1120px){.feed__grid{columns:3}}

  .story{
    break-inside:avoid;
    margin-bottom:18px;
    border-radius:16px;
    padding:22px 22px 20px;
    background:rgba(255,255,255,.30);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.55);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .story{background:rgba(255,255,255,.86)}
  }

  .story__text strong{font-weight:700}
  .story__text em{font-style:italic}
  .story__text{
    white-space:pre-wrap;overflow-wrap:anywhere;
    font-size:16px;line-height:1.62;color:var(--ink);
  }
  .story__text.is-clamped{
    display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
  }
  .story__more{
    margin-top:10px;padding:0;border:0;background:none;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--navy);
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  }
  .story__foot{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-top:16px;padding-top:14px;
    border-top:1px solid var(--line-soft);
  }
  .story__meta{
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);
  }

  /* voto — gota */
  .vote{
    display:inline-flex;align-items:center;gap:8px;flex:none;
    padding:7px 14px 7px 11px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.5);
    font-family:inherit;font-size:14px;font-weight:700;color:var(--navy-deep);
    cursor:pointer;
    transition:background .2s, border-color .2s, transform .18s cubic-bezier(.2,.8,.2,1);
  }
  .vote:hover{background:rgba(255,255,255,.85);border-color:var(--navy)}
  .vote:active{transform:scale(.94)}
  .vote__drop{font-size:16px;line-height:1;filter:grayscale(1) opacity(.55);transition:filter .2s, transform .3s cubic-bezier(.2,.8,.2,1)}
  .vote__n{font-variant-numeric:tabular-nums;min-width:1ch;text-align:left}

  .vote.is-on{background:var(--mist);border-color:var(--navy)}
  .vote.is-on .vote__drop{filter:none;transform:scale(1.14)}
  /* respingo ao votar */
  .vote.is-pop .vote__drop{animation:drop-pop .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes drop-pop{
    0%{transform:scale(1)}
    40%{transform:scale(1.5) translateY(-3px)}
    100%{transform:scale(1.14)}
  }
  @media (prefers-reduced-motion:reduce){
    .vote.is-pop .vote__drop{animation:none}
  }

  .feed__empty{
    text-align:center;max-width:46ch;margin-inline:auto;
    color:var(--muted);font-size:16px;
    padding:clamp(28px,5vw,48px) 24px;
    border:1px dashed var(--line);border-radius:16px;
    background:rgba(255,255,255,.22);
  }
  .feed__more{
    display:block;margin:26px auto 0;
    padding:.85em 1.9em;border-radius:10px;
    background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6);
    font-family:inherit;font-size:14px;font-weight:700;color:var(--navy-deep);
    cursor:pointer;transition:background .2s;
  }
  .feed__more:hover{background:rgba(255,255,255,.7)}
  .feed__more[hidden]{display:none}

  .done .again{
    margin-top:22px;padding:0;border:0;background:none;
    font-family:inherit;font-size:14px;font-weight:700;color:var(--navy);
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  }

  /* footer */
  footer{
    border-top:1px solid var(--line-soft);
    background:rgba(241,246,248,.92);
    border-radius:0 0 var(--frame-r) var(--frame-r);
  }
  .foot{
    display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
    padding-block:34px 22px;
  }
  .foot__links{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,26px)}
  .foot a{
    color:var(--muted);text-decoration:none;
    font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    transition:color .2s;
  }
  .foot a:hover{color:var(--navy-deep)}
  .foot a[aria-current="page"]{color:var(--navy-deep)}
  .legal{
    /* espaco pra aba fixa nao cobrir o texto legal */
    padding-bottom:clamp(86px,11vh,116px);font-size:12px;line-height:1.7;
    color:rgba(22,35,63,.52);max-width:78ch;
  }

  /* reveal */
  .r{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
  .r.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}}

  /* ---------- cta no fim da pagina do Lub ---------- */
  .lub-cta{
    background:var(--panel);
    padding-block:clamp(50px,9vh,90px) clamp(80px,13vh,140px);
    text-align:center;
  }
  .lub-cta p{
    font-family:var(--titulo);font-weight:700;
    font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
    color:var(--navy-deep);margin-bottom:26px;
  }
  .btn--inline{width:auto;display:inline-flex;text-decoration:none}

  /* ---------- aba fixa: sai da moldura de baixo ---------- */
  .tab{
    position:fixed;
    bottom:0;left:50%;
    transform:translateX(-50%);
    z-index:50;
    width:clamp(340px,46vw,480px);
    max-width:calc(100% - var(--frame)*2 - 12px);
    text-decoration:none;
    line-height:0;
    display:block;
  }
  .tab__shape{
    display:block;width:100%;height:auto;
    fill:var(--frame-c);          /* mesma cor da moldura: a colina funde com a barra */
  }
  .tab__label{
    position:absolute;
    left:50%;top:clamp(7px,0.95vw,13px);
    transform:translateX(-50%);
    white-space:nowrap;
    color:#fff;
    font-size:clamp(8.5px,0.82vw,12px);
    font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    line-height:1.2;
    transition:opacity .2s;
  }
  /* em tela estreita o plato encolhe junto com a colina: menos
     entreletra pra o rotulo nao vazar pros ombros */
  @media (max-width:620px){
    .tab__label{letter-spacing:.05em}
  }
  @media (max-width:380px){
    .tab__label{font-size:8px;letter-spacing:.02em}
  }
  .tab:hover .tab__label{opacity:.72}
  .tab:focus-visible{outline:none}
  .tab:focus-visible .tab__label{outline:2px solid #fff;outline-offset:5px;border-radius:4px}

  /* ---------- portao de 18+ ---------- */
  .idade-ok .gate{display:none}
  /* trava a rolagem enquanto o portao esta aberto */
  html:not(.idade-ok){overflow:hidden}

  .gate{
    position:fixed;inset:0;z-index:200;
    display:grid;place-items:center;
    padding:clamp(24px,6vw,48px);
    overflow:auto;
  }
  /* o preto do portao e o proprio svg mascarado: o furo cresce e engole a tela */
  .gate__iris{
    position:fixed;inset:0;
    width:100%;height:100%;
    pointer-events:none;
  }
  #khShape{
    transform-box:view-box;
    transform-origin:50px 50px;   /* centro do furo */
    transform:scale(0);           /* fechado: preto cobrindo tudo */
  }

  .gate__box{
    position:relative;z-index:1;
    width:100%;max-width:520px;text-align:center;
    display:flex;flex-direction:column;align-items:center;
  }
  .gate__mark{
    display:block;
    width:132px;height:73px;
    background:url("prudence-lub.png") center/contain no-repeat;
    margin-bottom:clamp(28px,5vh,44px);
  }
  .gate__title{
    font-family:var(--titulo);font-weight:700;
    font-size:clamp(28px,4.6vw,44px);line-height:1.1;letter-spacing:-.02em;
    color:#fff;margin:0;
  }
  .gate__text{
    margin-top:18px;
    font-size:clamp(14px,1.15vw,16px);line-height:1.6;
    color:rgba(255,255,255,.72);
    max-width:42ch;margin-inline:auto;
  }
  .gate__btns{
    display:flex;flex-direction:column;gap:12px;
    margin-top:clamp(28px,4.5vh,40px);
    width:100%;
  }
  .gate__btn{
    width:100%;
    flex:1 1 0;
    white-space:nowrap;
    padding:1.05em 1.6em;border-radius:10px;
    font-family:inherit;font-size:clamp(13px,1.05vw,15px);font-weight:700;letter-spacing:.02em;
    cursor:pointer;border:1px solid transparent;
    transition:background .2s, color .2s, border-color .2s, transform .2s;
  }
  .gate__btn:active{transform:scale(.99)}
  .gate__btn--yes{background:#fff;color:#000}
  .gate__btn--yes:hover{background:rgba(255,255,255,.86)}
  .gate__btn--no{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.34)}
  .gate__btn--no:hover{color:#fff;border-color:rgba(255,255,255,.7)}
  .gate__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
  @media (min-width:520px){.gate__btns{flex-direction:row-reverse}}
  @media (prefers-reduced-motion:reduce){.gate__btn{transition:none}}

  /* ---------- presenca ----------
     Cromo fixo no canto oposto ao menu. Em tela estreita o pill preto
     ocupa quase toda a largura, entao o contador desce pra linha de
     baixo, centralizado, em vez de colidir. */
  .live[hidden]{display:none}
  .live{
    position:fixed;
    top:calc(var(--frame) + 20px);
    right:calc(var(--frame) + clamp(14px,2.2vw,32px));
    z-index:45;
    margin:0;
    display:inline-flex;align-items:center;gap:9px;
    padding:7px 15px 7px 13px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    font-size:13px;font-weight:700;color:var(--navy-deep);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  @media (max-width:900px){
    .live{
      top:calc(var(--frame) + 78px);
      right:auto;left:50%;transform:translateX(-50%);
      font-size:12px;padding:6px 13px 6px 11px;
    }
  }
  .live__dot{
    width:8px;height:8px;border-radius:50%;flex:none;
    background:#1f9d55;
    box-shadow:0 0 0 0 rgba(31,157,85,.55);
    animation:live-pulse 2.4s ease-out infinite;
  }
  .live__eyes{font-size:14px;line-height:1;margin-left:-2px}

  /* piscada curta quando o numero muda, pra a variacao ser percebida */
  .live.is-tick #liveN{animation:live-tick .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes live-tick{
    0%{transform:translateY(-3px);opacity:.35}
    100%{transform:translateY(0);opacity:1}
  }
  #liveN{display:inline-block}
  @media (prefers-reduced-motion:reduce){.live.is-tick #liveN{animation:none}}

  @keyframes live-pulse{
    0%{box-shadow:0 0 0 0 rgba(31,157,85,.5)}
    70%{box-shadow:0 0 0 7px rgba(31,157,85,0)}
    100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}
  }
  @media (prefers-reduced-motion:reduce){.live__dot{animation:none}}

  /* ---------- vitrine de atividade ----------
     Pill no canto de baixo, do lado oposto da aba "quero contar".
     Mesmo cromo do contador — vidro fosco, borda fina, tipo pequeno —
     porque os dois sao a mesma familia de recado periferico.

     Em tela estreita a aba ocupa quase toda a largura de baixo, entao
     o pill sobe pra linha logo acima dela, centralizado, em vez de
     brigar pela area de clique. */
  .feed[hidden]{display:none}
  .feed{
    position:fixed;
    bottom:calc(var(--frame) + 20px);
    left:calc(var(--frame) + clamp(14px,2.2vw,32px));
    z-index:45;
    margin:0;
    max-width:min(430px, calc(100vw - var(--frame)*2 - 40px));
    display:inline-flex;align-items:center;gap:9px;
    padding:7px 15px 7px 13px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    font-size:12.5px;font-weight:600;color:var(--navy-deep);
    white-space:nowrap;
    overflow:hidden;
  }
  @media (max-width:900px){
    .feed{
      bottom:calc(var(--frame) + 44px);
      left:50%;right:auto;transform:translateX(-50%);
      max-width:calc(100% - var(--frame)*2 - 24px);
      font-size:11.5px;padding:6px 13px 6px 11px;
    }
  }
  .feed__dot{
    width:6px;height:6px;border-radius:50%;flex:none;
    background:var(--navy-deep);opacity:.55;
  }
  /* a frase sai pra cima e a proxima entra por baixo, uma linha so:
     o `overflow:hidden` do pill corta o vai-e-vem nas bordas */
  .feed__txt{
    display:block;
    overflow:hidden;text-overflow:ellipsis;
    transition:opacity .3s ease, transform .3s ease;
  }
  .feed.is-out .feed__txt{opacity:0;transform:translateY(-7px)}
  .feed__nome{font-weight:800}
  /* o sobrenome borra: a pagina e anonima, e o borrao diz isso sem
     precisar de legenda. `user-select:none` porque texto borrado que
     se copia limpo desmancha a ideia. */
  .feed__sob{
    filter:blur(3.6px);
    opacity:.9;
    user-select:none;-webkit-user-select:none;
  }
  @media (prefers-reduced-motion:reduce){
    .feed__txt{transition:none}
    .feed.is-out .feed__txt{opacity:1;transform:none}
  }

  /* ---------- ficha tecnica ---------- */
  .specs{background:var(--panel);padding-block:clamp(60px,9vh,100px);scroll-margin-top:calc(96px + var(--frame))}
  .spec{max-width:820px;margin:0 auto;padding:0;border-top:1px solid var(--line-soft)}
  .spec__row{
    display:grid;grid-template-columns:1fr;gap:2px;
    padding:16px 0;border-bottom:1px solid var(--line-soft);
  }
  @media (min-width:680px){
    .spec__row{grid-template-columns:minmax(150px,26%) 1fr;gap:24px;align-items:baseline}
  }
  .spec dt{
    font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--navy);
  }
  .spec dd{margin:0;font-size:clamp(15px,1.15vw,17px);color:var(--ink);line-height:1.55}
  .spec__nota{
    max-width:820px;margin:22px auto 0;
    font-size:13px;line-height:1.6;color:var(--muted);
  }

  /* ---------- onde comprar ---------- */
  .lojas{background:var(--panel);padding-block:clamp(50px,8vh,90px);scroll-margin-top:calc(96px + var(--frame))}
  .lojas__box{
    max-width:560px;margin-inline:auto;text-align:center;
    padding:clamp(24px,3.6vw,36px);
    border-radius:16px;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .lojas__status{margin-top:16px;font-size:14px;color:var(--navy-deep);min-height:1.4em}
  .lojas__status[data-erro]{color:#8c2230}
  .lojas__privacidade{
    margin-top:18px;padding-top:16px;
    border-top:1px solid var(--line-soft);
    font-size:12px;line-height:1.6;color:var(--muted);
  }

  /* ---------- trilha: botao fora do pill, na ponta esquerda ----------
     Espelha o contador de presenca, que mora na ponta oposta: mesmo
     vidro, mesma altura, mesmo recuo da moldura. Some junto com o menu
     em repouso pra os dois cromos respirarem no mesmo ritmo. */
  .trilha-btn{
    position:fixed;
    top:calc(var(--frame) + 20px);
    left:calc(var(--frame) + clamp(14px,2.2vw,32px));
    z-index:45;
    display:inline-flex;align-items:center;gap:9px;
    padding:6px 15px 6px 6px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    font-family:inherit;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--navy-deep);
    cursor:pointer;white-space:nowrap;
    transition:opacity .35s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s;
  }
  @media (hover:hover) and (pointer:fine){
    .trilha-btn{opacity:.55}
    .trilha-btn:hover,.trilha-btn:focus-visible{opacity:1}
  }
  .trilha-btn:hover{background:rgba(255,255,255,.85);border-color:var(--navy)}
  .trilha-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){.trilha-btn{transition:none}}

  /* bolachinha: sulcos + selo + furo, tudo em gradiente */
  .disco-ico{
    width:24px;height:24px;border-radius:50%;flex:none;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 2px, transparent 2px),
      radial-gradient(circle at 50% 50%, var(--navy) 0 7px, transparent 7px),
      repeating-radial-gradient(circle at 50% 50%, #1b2740 0 1.2px, #2b3a5c 1.2px 2.4px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .trilha-btn.is-tocando .disco-ico{animation:disco-gira 3.4s linear infinite}
  @keyframes disco-gira{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){
    .trilha-btn.is-tocando .disco-ico{animation:none}
  }

  /* em tela estreita o pill preto ocupa quase tudo: o botao vira so a
     bolacha e desce pra linha do contador, sem colidir com o menu */
  @media (max-width:900px){
    .trilha-btn{
      top:calc(var(--frame) + 74px);
      left:calc(var(--frame) + 12px);
      padding:6px;
    }
    .trilha-btn__label{display:none}
  }

  /* ---------- janela da trilha ----------
     O palco ocupa a janela inteira: as capas sao <button> posicionados
     por JS (mesma conta que alimenta o WebGL), e o canvas pinta por
     cima. Com WebGL no ar as capas do DOM nao desenham nada — seguem
     ali so pelo clique, pelo Tab e pelo leitor de tela. */
  .trilha[hidden]{display:none}   /* guarda: display de autor vence o [hidden] do navegador */
  .trilha{
    position:fixed;inset:0;z-index:120;
    overflow:hidden;
  }
  /* Veu, nao parede: a pagina continua aparecendo por tras da janela.
     As cores sao rgba de proposito — chapar aqui tamparia a lamina
     d'agua, que e justamente o que se quer ver atravessando. */
  .trilha__scrim{
    position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 56%,
      rgba(35,55,95,.40) 0%, rgba(16,26,46,.52) 55%, rgba(10,17,32,.60) 100%);
    opacity:0;transition:opacity .35s ease;
  }
  .trilha.is-aberta .trilha__scrim{opacity:1}
  /* com o canvas no ar o veu e ele que deita (uniforme uVeu no shader) */
  .trilha.tem-gl .trilha__scrim{background:none}

  .trilha__gl{
    position:absolute;inset:0;
    display:block;
    opacity:0;transition:opacity .4s ease;
    pointer-events:none;
  }
  .trilha.is-aberta .trilha__gl{opacity:1}

  .trilha__palco{
    position:absolute;inset:0;
    touch-action:pan-y;
    cursor:grab;
  }
  .trilha__palco.is-arrastando{cursor:grabbing}

  .capa[hidden]{display:none}
  .capa{
    position:absolute;
    left:50%;top:var(--cy,50%);
    width:var(--capa-w,300px);height:var(--capa-w,300px);
    margin:0;padding:0;border:0;
    background:center/cover no-repeat;
    border-radius:2px;
    cursor:pointer;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  }
  .capa:focus-visible{outline:2px solid #fff;outline-offset:8px}
  /* sem pintura propria: o desenho vem do canvas */
  .trilha.tem-gl .capa{background:none;box-shadow:none}

  /* ---------- textos, por cima do palco ---------- */
  .trilha__box{
    position:absolute;
    top:clamp(18px,4vh,44px);left:50%;transform:translateX(-50%);
    width:min(100%,720px);
    padding-inline:clamp(16px,4vw,32px);
    text-align:center;
    pointer-events:none;             /* o arrasto atravessa os textos */
    opacity:0;transition:opacity .4s ease .06s;
  }
  .trilha.is-aberta .trilha__box{opacity:1}

  /* O veu e fraco de proposito, entao o texto branco pode cair sobre
     um trecho claro da agua. A sombra propria resolve sem precisar
     escurecer a tela inteira de novo. */
  .trilha__eyebrow,.trilha__title,.trilha__sub,.trilha__nota{
    text-shadow:0 1px 16px rgba(6,12,24,.85), 0 1px 3px rgba(6,12,24,.6);
  }
  .trilha__eyebrow{
    font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    font-weight:700;color:var(--mist);
    margin:0 0 8px;
  }
  .trilha__title{
    font-family:var(--titulo);font-weight:700;
    font-size:clamp(26px,3.6vw,42px);line-height:1.05;letter-spacing:-.02em;
    color:#fff;margin:0;
  }
  .trilha__sub{
    margin:10px auto 0;max-width:44ch;
    font-size:clamp(13px,1.05vw,15px);line-height:1.55;
    color:rgba(255,255,255,.62);
  }
  .trilha__close{
    position:absolute;
    top:clamp(18px,4vh,44px);right:clamp(16px,4vw,40px);
    z-index:31;                      /* acima do palco e do tocador */
    /* o box e pointer-events:none pra o arrasto atravessar os textos;
       o botao precisa reativar, senao fica embaixo do palco e morre */
    pointer-events:auto;
    display:inline-flex;align-items:center;
    padding:8px 14px;border-radius:999px;
    background:transparent;border:1px solid rgba(255,255,255,.28);
    color:rgba(255,255,255,.8);
    font-family:inherit;font-size:10px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
    cursor:pointer;transition:color .2s,border-color .2s;
  }
  .trilha__close:hover{color:#fff;border-color:rgba(255,255,255,.7)}
  .trilha__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
  /* em tela estreita o titulo ocupa a largura toda e passaria por baixo
     do botao: o cabecalho desce pra linha seguinte */
  @media (max-width:560px){
    .trilha__box{top:calc(clamp(18px,4vh,44px) + 46px)}
  }

  /* ---------- tocador ----------
     Pill preto encostado no pe da capa; some enquanto o carrossel
     anda e volta quando assenta, como na referencia. Largura e
     altura vem do JS, que sabe onde a capa parou. */
  .tocador{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    z-index:30;                      /* acima das capas, que vao ate 20 */
    display:flex;align-items:center;
    gap:clamp(12px,1.6vw,22px);
    max-width:calc(100vw - 28px);
    padding:12px 18px 12px 14px;
    border-radius:999px;
    background:#191819;
    box-shadow:0 24px 50px -24px rgba(0,0,0,.95);
    text-align:left;
    overflow:hidden;
    transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .tocador.is-oculto{
    opacity:0;
    transform:translate(-50%,calc(-50% + 14px)) scale(.96);
    pointer-events:none;
  }
  .tocador__play{
    flex:none;width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:50%;border:0;
    background:rgba(255,255,255,.1);color:#fff;
    cursor:pointer;transition:background .2s,transform .2s;
  }
  .tocador__play:hover:not(:disabled){background:rgba(255,255,255,.2)}
  .tocador__play:active:not(:disabled){transform:scale(.95)}
  .tocador__play:disabled{opacity:.4;cursor:not-allowed}
  .tocador__play:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .tocador__play svg[hidden]{display:none}

  .tocador__txt{flex:1 1 auto;min-width:0}
  .tocador__nome{
    font-size:14px;font-weight:700;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .tocador__sub,.tocador__tempo{
    font-size:12px;color:rgba(255,255,255,.6);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .tocador__tempo{font-variant-numeric:tabular-nums;margin-top:1px}

  .tocador__nav{display:flex;gap:4px;flex:none}
  .tocador__nav button{
    width:32px;height:32px;display:grid;place-items:center;
    border:0;background:none;color:rgba(255,255,255,.8);
    border-radius:50%;cursor:pointer;transition:color .2s,background .2s;
  }
  .tocador__nav button:hover{color:#fff;background:rgba(255,255,255,.1)}
  .tocador__nav button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

  /* progresso: fio na base do pill */
  .tocador__barra{
    position:absolute;left:0;bottom:0;height:2px;width:0;
    background:var(--mist);
  }

  .trilha__nota[hidden]{display:none}
  .trilha__nota{
    position:absolute;
    bottom:clamp(14px,3vh,30px);left:50%;transform:translateX(-50%);
    width:min(100%,52ch);
    padding-inline:clamp(16px,4vw,32px);
    margin:0;text-align:center;
    font-size:12px;line-height:1.6;color:rgba(255,255,255,.5);
    pointer-events:none;
  }

  @media (prefers-reduced-motion:reduce){
    .trilha__scrim,.trilha__gl,.trilha__box,.tocador{transition:none}
  }

  /* trava a rolagem do fundo enquanto a janela esta aberta */
  html.trilha-aberta{overflow:hidden}

  /* O fundo da janela e translucido de proposito — a lamina d'agua e a
     hero continuam aparecendo. Mas o cromo FIXO da pagina (menu, aba,
     contador, o proprio botao da trilha) ficaria por cima da agua na
     mesma altura dos textos da janela, e o pill preto do menu cai
     exatamente atras do titulo. Entao so o cromo recua; o conteudo da
     pagina continua atravessando. */
  html.trilha-aberta .nav,
  html.trilha-aberta .live,
  html.trilha-aberta .feed,
  html.trilha-aberta .trilha-btn,
  html.trilha-aberta .tab{
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  @media (prefers-reduced-motion:reduce){
    html.trilha-aberta .nav,
    html.trilha-aberta .live,
    html.trilha-aberta .feed,
    html.trilha-aberta .trilha-btn,
    html.trilha-aberta .tab{transition:none}
  }