/* ═══════════════════════════════════════════════════════════════════════
   MOTOR · base.css
   ───────────────────────────────────────────────────────────────────────
   A ESTRUTURA da agenda: grade, espaçamento, estados, movimento, as
   gramáticas de desenho. Vale para todo cliente.

   AQUI NÃO MORA COR DE MARCA. Toda cor chega por token (var(--…)). Os
   valores ficam no tema: temas/<nome>/tema.css. O tema padrão é o
   oxygen, carregado sempre; o tema do cliente carrega por cima dele.

   DOIS NÍVEIS DE TOKEN
     paleta   --campo, --tinta, --marca, --forte, --realce …   (no tema)
     papéis   --topo-fundo, --doca-fundo, --hora-tinta …       (aqui)
   Cada papel aponta para uma cor da paleta. Tema que só troca a paleta
   já muda a página inteira; tema que quer uma zona diferente das outras
   aponta o papel para outra cor. A lista fechada está em docs/temas.md.

   A ORDEM DAS CAMADAS ABAIXO É A ORDEM DA CASCATA ORIGINAL. Elas foram
   escritas em épocas diferentes e uma sobrescreve a outra — isso é
   documentado em cada cabeçalho. Não reordene sem rodar o teste de
   regressão (teste/comparar.py).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── estrutura: não é marca ──────────────────────────────────────── */
  --oxy:42px;                  /* altura da caixa do wordmark Oxygen   */
  --rail:26px;                 /* calha do trilho da lista             */

  /* ── paleta NEUTRA de segurança ──────────────────────────────────────
     Só aparece se nenhum tema carregar. A página fica cinza e legível
     em vez de sair sem cor. O tema oxygen sobrescreve tudo isto.      */
  --campo:#FFFFFF; --superficie:#FFFFFF; --superficie-2:#F4F4F4;
  --tinta:#1A1A1A; --tinta-2:#3D3D3D; --tinta-3:#595959; --tinta-forte:#1A1A1A;
  --linha:#DDDDDD; --linha-forte:#C4C4C4;
  --marca:#595959; --marca-traco:#595959; --sobre-marca:#FFFFFF;
  --acento:#3D3D3D; --acento-escuro:#262626; --acento-fundo:#BFBFBF;
  --forte:#262626; --sobre-forte:#FFFFFF; --positivo:#3D3D3D;
  --realce:#E5E5E5; --alerta:#B3261E; --rotulo:#3D3D3D;
  --raio:0px; --raio-p:0px;
  --sans:system-ui,sans-serif; --mono:ui-monospace,monospace;

  /* ── papéis: cada zona aponta para a paleta ──────────────────────── */
  --topo-fundo:var(--marca);
  --topo-fundo-escuro:var(--forte);
  --topo-tinta:var(--sobre-marca);
  --topo-tinta-herdada:var(--tinta-forte);  /* texto sem regra própria no topo */
  --topo-realce:var(--realce);
  --ficha-topo-fundo:var(--marca);
  --ficha-topo-tinta:var(--tinta-forte);
  --porta-fundo:var(--marca);
  --porta-tinta:var(--tinta-forte);
  --porta-ornamento:var(--sobre-marca);
  --doca-fundo:var(--forte);
  --doca-tinta:var(--sobre-forte);
  --controle-fundo:var(--superficie);
  --selecao-fundo:var(--realce);
  --selecao-tinta:var(--tinta-forte);
  --destaque-fundo:var(--alerta);        /* pastilha "Destaque" */
  --destaque-tinta:var(--tinta-forte);   /* o motor recalcula fora do legado */
  --hora-tinta:var(--forte);

  /* transparências — o tema redefine junto com a paleta */
  --barra-fundo:rgba(255,255,255,.95); --barra-sombra:rgba(255,255,255,.98);
  --sobre-forte-suave:rgba(255,255,255,.55); --topo-tinta-suave:rgba(255,255,255,.72);
  --doca-tinta-2:rgba(255,255,255,.9); --doca-tinta-3:rgba(255,255,255,.62);
  --doca-tinta-4:rgba(255,255,255,.7); --doca-tinta-link:rgba(255,255,255,.82);
  --doca-borda:rgba(255,255,255,.5);
  --sombra-dia:rgba(0,0,0,.12); --spark-vazio:rgba(0,0,0,.15);
  --sombra-cartao:rgba(0,0,0,.08); --sombra-cartao-sel:rgba(0,0,0,.14);
  --sombra-ficha:rgba(0,0,0,.12); --veu:rgba(0,0,0,.35);
  --local-contorno:rgba(0,0,0,.35); --folga-barra:rgba(0,0,0,.2);
  --alerta-halo:rgba(179,38,30,.2);
  --porta-aviso-fundo:rgba(255,255,255,.55); --porta-linha:rgba(0,0,0,.2);
  --carregando-trilho:rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--campo)}
body{
  margin:0;background:var(--campo);color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.env{max-width:1060px;margin:0 auto;padding:0 26px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ══ CABEÇA — enxuta. Isto é ferramenta de viagem, não folder. ═════════ */
.topo{padding:32px 0 0}
.selo{
  display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acento);
}
.selo i{width:5px;height:5px;border-radius:99px;background:var(--marca-traco);font-style:normal}
.selo .cli{color:var(--tinta-3);letter-spacing:.13em}

/* ══ SELETOR DE DIA — cada dia mostra sua própria densidade ═══════════ */
.dias{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:26px 0 0}
.diab{
  text-align:left;padding:13px 15px 12px;border:1px solid var(--linha);
  background:var(--superficie);transition:border-color .15s,background .15s;
}
.diab:hover{border-color:var(--acento-fundo)}
.diab[aria-selected="true"]{background:var(--superficie-2);border-color:var(--marca-traco)}
.diab .d1{display:flex;align-items:baseline;gap:8px}
.diab .dd{font-family:var(--mono);font-size:1.3rem;color:var(--tinta)}
.diab[aria-selected="true"] .dd{color:var(--acento)}
.diab .ds{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.diab .dn{margin:5px 0 0;font-size:.74rem;color:var(--tinta-2)}
.spark{display:flex;gap:2px;margin:9px 0 0;height:4px}
.spark span{flex:1;background:var(--linha);border-radius:1px}
.spark span.on{background:var(--acento-fundo)}
.diab[aria-selected="true"] .spark span.on{background:var(--marca-traco)}

/* ══ FILTROS ══════════════════════════════════════════════════════════ */
.filtros{
  position:sticky;top:0;z-index:40;margin:22px 0 0;
  background:var(--barra-fundo);backdrop-filter:blur(12px);
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
}
.fint{max-width:1060px;margin:0 auto;padding:11px 26px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--linha)}
.seg button{padding:7px 13px;font-size:.76rem;font-weight:700;color:var(--tinta-3);border-right:1px solid var(--linha)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--acento);color:var(--sobre-forte)}
.busca{
  flex:1;min-width:150px;border:1px solid var(--linha);background:var(--superficie);
  padding:8px 12px;font:inherit;font-size:.85rem;color:var(--tinta);
}
.busca::placeholder{color:var(--tinta-3)}
.trilhas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 26px 11px;max-width:1060px;margin:0 auto}
.trilhas::-webkit-scrollbar{display:none}
.tb{
  flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border:1px solid var(--linha);font-size:.74rem;font-weight:600;color:var(--tinta-3);
}
.tb i{width:7px;height:7px;border-radius:99px;font-style:normal;flex:none}
/* Botão de TIPO: em vez do ponto, o próprio ícone do tipo, na cor dele.
   Ícone é forma pequena (régua 3:1), o texto do botão fica na tinta
   normal — mesma divisão que a caixa da sessão usa. */
.tbt svg{width:14px;height:14px;flex:none;color:var(--tr)}
.tbt[aria-pressed="true"]{border-color:var(--tr)}
.trilhas[hidden]{display:none}
.tb[aria-pressed="true"]{color:var(--tinta);border-color:var(--tinta-3);background:var(--superficie-2)}

/* ══ O DIA ════════════════════════════════════════════════════════════ */
main{padding:24px 0 130px}
.vazio{padding:70px 0;text-align:center;color:var(--tinta-3);font-family:var(--mono);font-size:.84rem}

.linha{position:relative;padding-left:calc(var(--rail) + 58px);margin:0 0 20px}
.linha::before{
  content:"";position:absolute;left:58px;top:0;bottom:0;width:1px;
  background:var(--linha);
}
.linha.fork::before{display:none}
.linha{scroll-margin-top:130px}
.hh{
  position:absolute;left:0;top:2px;width:46px;text-align:right;
  font-family:var(--mono);font-size:.82rem;color:var(--tinta-2);
}
.pt{
  position:absolute;left:55px;top:8px;width:7px;height:7px;border-radius:99px;
  background:var(--marca-traco);
}
.linha.dest .pt{background:var(--alerta);box-shadow:0 0 0 3px var(--alerta-halo)}

/* O CSS do vão (.folga) vive junto com o da sessão, mais abaixo: ele deixou
   de ser pastilha e passou a ser uma caixa igual às outras, então a regra
   pertence ao mesmo bloco. A ilha arredondada com o recorte circular saiu —
   ela funcionava sobre o trilho tracejado, mas sumia ao lado de blocos com
   caixa e borda colorida. */

/* ══ BIFURCAÇÃO ══════════════════════════════════════════════════════
   O garfo (.fk/.fkm) saiu em 11/08/2026. O par A/B se explica por estar
   lado a lado, no mesmo horário do trilho, com os dois rótulos em cima —
   e o desenho a mais competia com a cor das caixas, que passou a ser
   quem carrega a informação. `.linha.fork` continua, escondendo o trilho
   vertical; foi só o garfo que saiu.                                  */
/* Cada coluna é uma FLEX COLUMN, e a caixa cresce com flex:1.
   Antes era ``, que é 100% do PAI — e o pai contém o
   rótulo "Roteiro A/B" mais a caixa. A caixa transbordava exatamente a
   altura de um rótulo e TAPAVA o rótulo do bloco de baixo. No desktop
   passava batido (as colunas ficam lado a lado e não há nada embaixo para
   cobrir); no celular, empilhado, "ROTEIRO B" simplesmente não aparecia.
   Com flex:1 a caixa ocupa o que sobra em vez de 100% do todo, e as duas
   continuam com a mesma altura no desktop — que era o objetivo original. */
.par{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.par>div{display:flex;flex-direction:column;min-width:0}
.par>div>.ss{flex:1}
.rot{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acento);margin:0 0 6px;
}

/* ══ SESSÃO — TODA sessão é caixa ═════════════════════════════════════
   Antes: sessão comum sem caixa (só border-bottom, "o trilho já separa") e
   bloco utilitário com caixa mais um filete de 3px. Palestra era a
   ausência de tipo, e a cor era um detalhe ao lado de um rótulo pequeno.

   Agora uma caixa só, e a COR DO TIPO no contorno inteiro. Por que
   contorno e não fundo tintado: nesta paleta só o gelo e o verde escuro
   passam em contraste para texto (o :root documenta). Fundo na cor da
   marca exigiria validar cada combinação e ainda assim quebraria — o azul
   Journeys dá 2,3:1 e o amarelo 1,4:1. Na borda, a cor é elemento
   gráfico: a régua é 3:1, que o Diagnóstico confere na aba Tipos.

   --tc é setada inline por bloco, a partir da aba Tipos.                */
.ss{
  position:relative;width:100%;text-align:left;display:block;
  padding:13px 36px 14px 15px;margin:0;background:var(--superficie);
  border:1px solid var(--tc,var(--linha));
  /* A barra esquerda grossa é o que se vê de longe, quando a borda de 1px
     já não resolve — sobretudo no celular, com a caixa estreita. */
  border-left:4px solid var(--tc,var(--linha));
  transition:box-shadow .15s,border-color .15s;
}
.ss:hover{box-shadow:0 1px 0 var(--tc,var(--linha))}
.ss:hover .st{color:var(--acento)}
/* Selecionada: o verde some se a caixa já é verde, então o sinal é um anel
   por fora, não troca de cor da borda. */
.ss.sel{box-shadow:0 0 0 2px var(--positivo)}
.ss:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.sm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 7px}
.sh{font-family:var(--mono);font-size:.72rem;color:var(--tinta-2)}

/* Rótulo do tipo. A cor vive no ÍCONE, não no texto: o texto em cor de
   tipo reabriria a questão de contraste que a borda resolve. */
.stp{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-2);
}
.stp svg{width:15px;height:15px;flex:none;color:var(--tc,var(--tinta-3))}

/* Trilha: ponto na cor cheia (forma pequena, régua 3:1), texto na cor
   já escurecida por corLegivel (régua 4,5:1). Medido: #C9A227 cru dá
   2,40:1 e #F3963F dá 2,26:1 — ilegíveis a 10px. */
.strl{
  display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--trt,var(--tinta-2));
}
.strl i{width:6px;height:6px;border-radius:99px;background:var(--tr);font-style:normal;flex:none}

.sflag{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--alerta)}
.st{margin:0;font-size:1.02rem;font-weight:700;line-height:1.28;letter-spacing:-.02em;transition:color .15s}
.par .st{font-size:.95rem}
.sq{margin:7px 0 0;font-size:.85rem;color:var(--tinta-2);display:flex;align-items:center;gap:8px}
.sq img{width:21px;height:21px;border-radius:99px;object-fit:cover;flex:none;background:var(--superficie-2)}
.so{margin:5px 0 0;font-family:var(--mono);font-size:.68rem;color:var(--tinta-3)}
.est{position:absolute;top:9px;right:7px;width:30px;height:30px;display:grid;place-items:center;color:var(--tinta-3);border-radius:99px}
.est:hover{color:var(--positivo)}
.est[aria-pressed="true"]{color:var(--positivo)}
.est svg{width:16px;height:16px}

/* ══ O VÃO ENTRE BLOCOS ═══════════════════════════════════════════════
   Era pastilha pequena sobre um trilho tracejado, e sumia ao lado dos
   blocos com caixa. Virou caixa cheia, mesmo tratamento das outras.

   SEM ESTRELA de propósito: esta caixa é CALCULADA a partir do vão entre
   dois blocos, não existe linha na planilha por trás dela — não há o que
   favoritar nem o que exportar para o .ics. `tipo = livre` na planilha é
   outra coisa: aquela é linha de verdade e ganha estrela.

   O tracejado fica na caixa, e é o que distingue "isto é ausência de
   programação" de "isto é um bloco que a curadoria pôs aqui".          */
.folga{position:relative;padding-left:calc(var(--rail) + 58px);margin:0 0 20px}
.folga::before{
  content:"";position:absolute;left:58px;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(var(--linha) 0 3px,transparent 3px 7px);
}
.folga .ss{
  background:transparent;border-style:dashed;border-left-style:solid;
  padding-top:11px;padding-bottom:11px;
}
.folga .ss:hover{box-shadow:none}
.folga .st-livre{font-size:.92rem;font-weight:600;color:var(--tinta-2)}

/* ══ FICHA ════════════════════════════════════════════════════════════ */
.veu{position:fixed;inset:0;background:var(--veu);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s}
.veu.on{opacity:1;pointer-events:auto}
.fl{
  position:fixed;top:0;right:0;bottom:0;width:min(500px,100%);z-index:100;background:var(--campo);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto;
  border-left:1px solid var(--linha);
}
.fl.on{transform:none}
.flc{padding:22px 24px 20px;border-bottom:1px solid var(--linha);position:relative}
.flx{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;color:var(--tinta-2);border:1px solid var(--linha)}
.flx:hover{color:var(--tinta);border-color:var(--tinta-3)}
.flm{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);margin:0 0 10px}
.flt{margin:0;font-size:1.35rem;font-weight:800;line-height:1.18;letter-spacing:-.028em;padding-right:36px}
.flb{padding:22px 24px 40px}
.flq{display:flex;gap:12px;align-items:center;margin:0 0 18px}
.flq img,.flq .ini{width:46px;height:46px;border-radius:99px;flex:none;object-fit:cover;background:var(--superficie-2);color:var(--acento);display:grid;place-items:center;font-family:var(--mono);font-size:.9rem}
.flq b{display:block;font-size:.93rem}
.flq span{display:block;font-size:.8rem;color:var(--tinta-2)}
.fld{font-size:.94rem;line-height:1.65;color:var(--tinta-2);margin:0 0 20px}
.fltr{border-left:2px solid var(--tr);padding:9px 0 9px 13px;margin:0 0 20px}
.fltr b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tr);margin:0 0 3px}
.fltr span{font-size:.83rem;color:var(--tinta-2)}
.flg{margin:0 0 20px;border-top:1px solid var(--linha)}
.flg div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--linha)}
.flg dt{flex:none;width:82px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);padding-top:2px}
.flg dd{margin:0;font-size:.87rem;font-weight:600}
.flg dd small{display:block;font-family:var(--mono);font-size:.68rem;font-weight:400;color:var(--tinta-3);margin-top:2px}
.bt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--linha);font-size:.86rem;font-weight:700;text-decoration:none;margin:0 0 7px;width:100%}
.bt:hover{border-color:var(--tinta-3)}
.bt.forte{background:var(--acento);color:var(--sobre-forte);border-color:var(--acento)}
.bt small{font-family:var(--mono);font-size:.64rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.cg{border:1px solid var(--linha);margin:0 0 7px}
.cg summary{padding:12px 14px;font-size:.86rem;font-weight:700;cursor:pointer}
.cl{padding:0 14px 12px;display:grid;gap:5px}
.cl a{font-size:.81rem;font-weight:600;text-decoration:none;color:var(--tinta-2);padding:7px 10px;border:1px solid var(--linha)}
.cl a:hover{color:var(--tinta);border-color:var(--tinta-3)}

/* ══ DOCA ═════════════════════════════════════════════════════════════ */
/* ══ DOCA ═════════════════════════════════════════════════════════════
   A barra de baixo. Aparece sozinha quando há sessão marcada.

   ELA PRECISA SAIR DA FRENTE. Antes não havia como dispensá-la: ficava
   fixa cobrindo o rodapé do dia enquanto existisse UMA marcação — e num
   celular, com três botões, isso é um terço da tela ocupado
   permanentemente por algo que a pessoa usa uma vez no fim.

   Minimizada, vira uma pastilha compacta no canto com a contagem. A
   escolha fica guardada no navegador: quem minimizou não quer ver de
   novo a cada dia que abre.                                            */
.doca{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--superficie-2);border-top:1px solid var(--marca-traco);
  transform:translateY(100%);transition:transform .24s var(--som,ease);
}
.doca.on{transform:none}

.doca-tog{
  position:absolute;top:-1px;right:14px;transform:translateY(-100%);
  display:flex;align-items:center;gap:7px;
  background:var(--superficie-2);border:1px solid var(--marca-traco);border-bottom:none;
  padding:5px 11px;color:var(--tinta-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
}
.doca-tog svg{width:15px;height:15px;flex:none;transition:transform .2s}
.doca-tog-n{display:none}
.doca-tog:hover{color:var(--tinta)}

/* MINIMIZADA: o corpo some e a aba vira a própria doca, com a contagem.
   Não usa display:none no .doca para a transição continuar existindo. */
.doca.min{transform:translateY(100%)}
.doca.min .doca-tog{transform:translateY(-100%);border-bottom:1px solid var(--marca-traco)}
.doca.min .doca-tog svg{transform:rotate(180deg)}
.doca.min .doca-tog-n{display:inline}
.doca.min .doca-tog b{font-weight:700;color:var(--acento)}
.di{max-width:1060px;margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.di b{font-family:var(--mono);font-size:1.1rem;color:var(--acento)}
.di span{font-size:.84rem;color:var(--tinta-2);flex:1;min-width:110px}
.di button{border:1px solid var(--linha);padding:8px 14px;font-size:.81rem;font-weight:700}
.di button:hover{border-color:var(--tinta-3)}
.di button.forte{background:var(--acento);border-color:var(--acento);color:var(--sobre-forte)}
/* O que o botão FAZ, embaixo do que ele se chama. "Assinar a agenda" não
   dizia nada para quem nunca assinou um calendário; a linha de baixo é
   que explica a diferença para o "Baixar só as marcadas". */
.di button small{display:block;font-weight:400;font-size:.66rem;opacity:.82;margin-top:1px}
.di .imp{
  padding:8px 14px;border:1px solid var(--acento);font-size:.81rem;font-weight:700;
  text-decoration:none;color:var(--acento);white-space:nowrap;
}
.di .imp:hover{background:var(--acento);color:var(--sobre-forte)}
.di .imp-nota{font-size:.76rem;color:var(--tinta-3);flex:none}

@media (max-width:760px){
  :root{--rail:18px}
  .env,.fint,.trilhas{padding-left:18px;padding-right:18px}
  .di{padding:11px 18px}
  .par{grid-template-columns:1fr;gap:9px}
  .linha,.folga{padding-left:calc(var(--rail) + 46px)}
  .linha::before,.folga::before{left:46px}
  .linha.fork::before{display:block}
  .hh{width:36px;font-size:.76rem}
  .pt{left:43px}
  .dias{grid-template-columns:1fr}
  .diab{display:flex;align-items:center;gap:14px;padding:11px 14px}
  .diab .d1{flex:none}
  .diab .dn{margin:0;flex:1}
  .spark{margin:0;width:64px;flex:none}
  .linha{scroll-margin-top:150px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ══ PORTA — a primeira coisa que o cliente vê ════════════════════════ */
.porta{
  min-height:100svh;display:grid;place-items:center;padding:32px 26px;
  position:relative;overflow:hidden;
}
/* o próprio símbolo O — sinal liso à direita, ruído orgânico à esquerda —
   pousado nos cantos. Não é forma nova: é o mesmo path do "O" do
   wordmark, só isolado e ampliado. Baixa opacidade, cor já existente. */
.porta .rec{position:absolute;pointer-events:none;color:var(--linha)}
.porta .rec1{top:-58px;right:-58px;width:250px;height:250px;transform:rotate(325deg)}
.porta .rec2{bottom:-64px;left:-64px;width:210px;height:210px;color:var(--acento-fundo);
  opacity:.45;transform:rotate(145deg)}
.porta-cx{position:relative;z-index:1;width:100%;max-width:420px}
/* A porta tem layout próprio: a marca alinha à ESQUERDA da caixa de
   420px, e o rótulo "Agenda de curadoria" é um parágrafo separado — não
   um terceiro item empilhado dentro do lockup. */
.porta-marca{display:flex;flex-direction:column;align-items:flex-start;
  gap:.06em;margin:0 0 6px}
.porta-rot{margin:0 0 22px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.porta h1{
  margin:0;font-size:clamp(1.9rem,5.5vw,2.5rem);font-weight:800;
  line-height:1.06;letter-spacing:-.04em;
}
.porta h1 em{font-style:normal;color:var(--acento)}
.porta p{margin:14px 0 0;font-size:.95rem;color:var(--tinta-2);line-height:1.6}
.campo{margin:26px 0 0}
.campo label{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 8px;
}
.campo input{
  width:100%;border:1px solid var(--linha);background:var(--superficie);
  padding:13px 14px;font-family:var(--mono);font-size:1rem;letter-spacing:.08em;
  color:var(--tinta);
}
.campo input::placeholder{color:var(--tinta-3);letter-spacing:.06em}
.campo input:focus{outline:2px solid var(--marca-traco);outline-offset:-1px}
.porta button.entrar{
  margin:12px 0 0;width:100%;padding:13px;background:var(--acento);color:var(--sobre-forte);
  font-size:.92rem;font-weight:700;border:1px solid var(--acento);
}
.porta button.entrar:hover{background:var(--tinta)}
.porta button.entrar:disabled{opacity:.5;cursor:default}
.aviso{
  margin:14px 0 0;padding:11px 13px;border-left:2px solid var(--alerta);
  background:var(--superficie);font-size:.86rem;line-height:1.5;color:var(--tinta-2);
}
.aviso b{display:block;color:var(--tinta);font-weight:700;margin:0 0 2px}
/* AVISO, NÃO LETRA MIÚDA.
   Marcar uma sessão passou a mandar dado para a Oxygen. Dizer isso na cara
   custa uma linha e vale mais que o dado: se um cliente descobre sozinho
   que registramos o que o CMO dele marcou, o estrago de confiança é maior
   que qualquer debrief. E dito assim deixa de ser vigilância e vira
   utilidade — é a Oxygen prometendo fazer algo com aquilo. */
.di-nota{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;
  color:var(--tinta-3);flex:1 1 100%;order:9;margin-top:-2px}
@media (min-width:761px){ .di-nota{flex:0 1 auto;order:0;margin:0 0 0 4px} }

.rodape-porta{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--linha);
  font-size:.8rem;color:var(--tinta-3);line-height:1.55;
}
.rodape-porta a{color:var(--acento);text-decoration:none;font-weight:600}
.rodape-porta a:hover{text-decoration:underline}

.carregando{
  min-height:100svh;display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);
}
.carregando i{
  display:block;width:34px;height:1px;background:var(--linha);margin:0 auto 14px;
  position:relative;overflow:hidden;font-style:normal;
}
.carregando i::after{
  content:"";position:absolute;inset:0;background:var(--marca-traco);
  animation:corre 1.1s ease-in-out infinite;
}
@keyframes corre{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.logo{height:19px;width:auto;vertical-align:middle;flex:none}

/* A marca da Oxygen aparece em todos os níveis, sempre no azul do Journeys.
   SVG inline em vez de <img>: colore por CSS e não some se a rede falhar. */
/* ALINHAMENTO ÓPTICO
   O lockup da Oxygen tem duas linhas: a palavra OXYGEN ocupa só 55% da
   altura, o resto é "Journeys". Então a 34px aquele OXYGEN media 18px
   enquanto o do cliente media 34 — mesma caixa, letras de tamanhos
   diferentes.
   A 44px o OXYGEN do lockup mede 24px e o lockup fica 118px de largura,
   que é a mesma largura da caixa do cliente. Aí as duas palavras batem. */
/* O wordmark é uma linha só: a palavra ocupa a caixa inteira, então altura
   da caixa = altura da letra. Era o lockup de duas linhas que obrigava a
   toda a aritmética de banda — trocá-lo removeu a causa, não o sintoma. */
/* ══ MASTHEAD ═══════════════════════════════════════════════════════════
   A marca da Oxygen é MOLDURA: tamanho constante, nunca muda em função do
   cliente. Nada mais fica na mesma faixa horizontal que ela, e por isso o
   problema de alinhar dois logos deixou de existir por construção.

   "Journeys" é texto vivo na fonte da página, não desenho. O nome do
   produto não precisa ser vetor, e assim não depende de um arquivo de
   lockup que não existe.

   Como as duas coisas ficam na mesma linha de base: a base das letras
   retas do wordmark está em y=136,521 de um viewBox de 139, sobrando
   1,783% de altura abaixo dela. Num flex com align-items:baseline, a base
   de um <svg> é a borda inferior da caixa — a margem negativa põe essa
   borda exatamente sobre a linha de base das letras.                    */
/* padding-top/bottom SEPARADOS de propósito: o atalho "padding:20px 0 16px"
   zera o padding lateral que o .env dá, e a marca encosta na borda da tela.
   Foi o que aconteceu no celular. */
.masthead-l{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding-top:20px;padding-bottom:16px}
/* LOCKUP EMPILHADO — OXYGEN em cima, Journeys embaixo, alinhados à
   direita da palavra. Só voltou a ser possível porque nada mais divide a
   faixa com ele: era a adjacência com o logo do cliente que obrigava o
   wordmark de uma linha. Sem vizinho, não há o que comparar.

   O "Journeys" fica em texto vivo na fonte da página. O nome do produto
   não precisa ser vetor, e assim não depende de um arquivo de lockup que
   não existe — nem repete o bug do "y" cortado pela borda do viewBox. */
.masthead{display:flex;flex-direction:column;align-items:flex-end;gap:.06em}
.oxy{height:var(--oxy);width:auto;display:block;color:var(--marca);flex:none}
.jrn{font-family:var(--sans);font-weight:500;font-size:calc(var(--oxy) * .40);
  letter-spacing:.01em;color:var(--marca);line-height:1;white-space:nowrap;
  margin-right:.06em}
.porta .oxy{--oxy:40px}
.filete{height:1px;background:var(--linha);transform:scaleY(.5);transform-origin:top}

/* ══ CONTEÚDO DO CABEÇALHO ══════════════════════════════════════════════ */
.corpo{padding-top:20px;padding-bottom:18px}
.eyebrow{margin:0;font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-3)}
.eyebrow[hidden]{display:none}
.headline{margin:10px 0 0;font-weight:800;
  font-size:clamp(1.65rem,4vw,2.3rem);line-height:1.12;letter-spacing:-.02em}
.headline em{font-style:normal;color:var(--tinta-3)}
.headline .linha2{color:var(--acento)}
.quando{margin:13px 0 0;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.02em;color:var(--tinta-2);display:flex;flex-wrap:wrap;gap:5px 14px}
/* `.saudacao` está definida uma vez só, na seção FAIXA DE APOIO. Havia
   aqui uma segunda definição quase idêntica (0,96rem / 58ch) que PERDIA
   para ela na cascata — removida em 11/08/2026. */

/* ══ LOGO DO CLIENTE, EMBUTIDO NA FRASE ═════════════════════════════════
   Logo dentro de frase é uma palavra que virou desenho: para funcionar,
   precisa ter forma de palavra. O JS recusa arquivo que não seja wordmark
   horizontal e escreve o nome — ver RAZAO_MIN.

   A banda de tinta continua sendo medida por canvas, e não é firula: o
   arquivo do cliente é desconhecido e pode vir com margem interna, fundo
   chapado ou descendente solto. Sem medir, "altura 22px" mede a CAIXA, e
   dois arquivos do mesmo tamanho aparente saem diferentes. */
/* O espaço entre "para" e o logo: inline-block encosta na palavra
   anterior, e um logo colado no texto lê como uma palavra só. */
.alvo{display:inline-block;vertical-align:baseline}
.alvo.com-logo{margin-left:.12em}
/* Símbolo + nome (logo quadrado ou vertical, fora do legado). O símbolo
   desce um pouco abaixo da linha de base, como o descendente de uma letra,
   para o centro óptico dele alinhar com o do nome. */
.alvo.com-simbolo{margin-left:.12em;white-space:nowrap}
.cli-simbolo{margin-right:var(--simbolo-gap,.28em);vertical-align:var(--simbolo-desce,-.2em)}
.alvo.com-simbolo .cli-nome{white-space:normal}
.cli-logo{
  --banda:22px;
  height:var(--banda);
  width:var(--larg,auto);
  display:inline-block;position:relative;overflow:visible;
  vertical-align:baseline;
}
.cli-logo img{
  display:block;position:absolute;
  left:calc(-1 * var(--esq,0px));
  top:calc(-1 * var(--topo,0px));
  height:var(--alt,var(--banda));width:auto;max-width:none;
}
.cli-logo:not([data-pronto]) img{visibility:hidden}

/* ══ FAIXA DE APOIO ═════════════════════════════════════════════════════
   Rodapé, não card: fundo da página e um filete fino. Com superfície
   tintada e colada nos cards de dia, ela lia como mais um bloco de
   conteúdo.

   Grid de colunas iguais em vez de flex-wrap, porque com wrap o último
   logo caía sozinho numa linha órfã. O número de colunas é escolhido no
   JS: menos linhas primeiro, depois a última linha o mais cheia possível.

   Altura normalizada pela tinta; largura livre, acompanhando o arquivo. */
.apoio{padding:14px 0 4px}
.apoio[hidden]{display:none}
.apoio .env{border-top:1px solid var(--linha);padding-top:11px}
.apoio .rotb{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 10px;font-weight:400}
/* FLEX CENTRALIZADO, não grade de colunas iguais.
   Colunas iguais davam ritmo bonito enquanto os logos tinham larguras
   parecidas. Com um wordmark 14,7:1 na fila não existe arranjo bom: ou a
   célula cabe ele e sobram 1 ou 2 colunas (8 logos viram 8 linhas no
   celular), ou ele estoura, ou encolhe e perde a altura de letra comum.

   Flex com quebra e centralização resolve os três: cada logo ocupa a
   largura que o arquivo pede, a altura de letra é a mesma para todos, e a
   última linha fica CENTRADA — que é o que faz um item sozinho ler como
   decisão em vez de sobra. Era esse o incômodo do logo órfão. */
.apoio .fila{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:12px 26px}
.apoio .cli-logo{--banda:17px}
/* O logo é dimensionado por ALTURA e a largura acompanha o arquivo — um
   wordmark 14,7:1 pode ficar mais largo que a célula da grade e empurrar
   a página inteira para o lado. O JS reduz quem estourar; isto aqui é a
   rede de segurança para o instante entre medir e ajustar. */
.apoio .cli-logo{max-width:100%;overflow:hidden}
.apoio .cli-logo img{max-width:none}
.apoio a{display:block;text-decoration:none}
.apoio a:hover .cli-logo{opacity:.7}

/* Capa do nível branded */
.capa-cli{
  margin:18px 0 0;height:clamp(120px,22vw,210px);border:1px solid var(--linha);
  background-size:cover;background-position:center;
}
.saudacao{
  margin:14px 0 0;font-size:.98rem;line-height:1.55;color:var(--tinta-2);
  max-width:60ch;border-left:2px solid var(--acento);padding-left:13px;
}
@media (max-width:760px){
  :root{--oxy:30px}
  .masthead-l{padding-top:14px;padding-bottom:12px}
  .corpo{padding-top:16px;padding-bottom:15px}
  /* `gap:14px` uniforme. Havia DUAS regras para .apoio .fila dentro deste
     mesmo @media — `gap:10px 18px` aqui e `gap:14px` no fim — e só a
     última valia. A primeira era código morto de alguma edição anterior, e
     quem lesse de cima para baixo concluiria que o vão vertical era 10px e
     o horizontal 18px. Consolidadas em 11/08/2026. */
  .apoio .cli-logo{--banda:15px}
  .apoio{padding:11px 0 12px}
  .apoio .fila{gap:14px}
}
/* ══ QUEM ESTÁ AQUI ═══════════════════════════════════════════════════
   O nome da pessoa ao lado do Sair. Não é enfeite: com código PESSOAL,
   quem recebe o link errado — e num grupo de 30 isso acontece — descobre
   ANTES de marcar 20 sessões na agenda de outra pessoa. O "Sair" ao lado
   é o conserto imediato. */
.euq{display:flex;align-items:center;gap:9px;margin-left:auto}
.eu{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:32vw;
}
.eu b{font-weight:700;color:var(--tinta)}
.eu[hidden]{display:none}
.sync{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.sync[hidden]{display:none}
.sair{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3);border:1px solid var(--linha);
  padding:3px 8px;align-self:center;flex:none;
}
.sair:hover{color:var(--tinta);border-color:var(--tinta-3)}
.masthead-l{width:100%}

/* AQUI HAVIA CSS MORTO, removido em 11/08/2026 na varredura de seletores:
   `.ss.tipo`, `.par .ss.tipo`, `.st-s` e `.ss.tipo .est` deixaram de ser
   emitidos quando sessao() passou a ter um caminho só — toda sessão é
   caixa, e a distinção vive em --tc e no rótulo, não numa classe.

   Mais grave, havia uma SEGUNDA definição de `.stp` e `.stp svg` aqui.
   Por vir depois, ela vencia a da seção SESSÃO na cascata: o rótulo do
   tipo saía em --creme-3 (4,21:1) em vez de --creme-2 (5,72:1), e o ícone
   a 16px em vez de 15px. Ou seja, a regra que eu escrevi não era a que
   estava na tela. É o mesmo padrão do Problema Conhecido #3 (.selo e
   .selo .cli duplicados) — vale procurar duplicata antes de estranhar
   por que um ajuste de CSS "não pegou".                                */

@media (prefers-reduced-motion:reduce){.carregando i::after{animation:none;transform:none}}

/* ═════════════════════════════════════════════════════════════════════════
   PELE JOURNEYS — bloco único, sobrescreve por cascata. 2026.
   ─────────────────────────────────────────────────────────────────────────
   APAGAR DAQUI ATÉ O FIM DO <style> DEVOLVE A PÁGINA AO ESTADO ANTERIOR.
   Nada de marcação foi tocado: nenhuma classe renomeada, nenhum elemento
   novo. Tudo abaixo é CSS puro sobre o DOM que o JS já emite — inclusive as
   duas formas decorativas, que são ::after e background, não elementos.

   A referência é a página /oxygen-journeys/ no ar, não o manual em
   abstrato. De lá vêm quatro coisas, nesta ordem de importância:

     1. BANDA DE COR CHEIA sangrando de ponta a ponta, não campo branco com
        detalhe colorido. É o que muda a temperatura da página num relance.
     2. CARTÃO DE RAIO GRANDE (~20px) pousado sobre a banda.
     3. BOTÃO PÍLULA, sempre. O site não tem um único canto vivo em botão.
     4. MANROPE E SÓ. O site não usa monoespaçada em lugar nenhum, e o
        toolkit (p.23) só admite Manrope, com Arial de sistema.

   CONTRASTE — as combinações abaixo foram medidas, não escolhidas no olho:
     tech black  sobre soft blue    7,22    texto pequeno
     tech black  sobre power green 11,87    texto pequeno
     tech black  sobre cream       16,56    texto pequeno
     tech black  sobre orange       4,83    texto pequeno  ← libera o destaque
     future green sobre cream        8,81    texto pequeno
     cream       sobre future green  8,81    texto pequeno
     power green sobre future green  6,31    texto pequeno
     soft wine   sobre cream         9,15    texto pequeno
   A armadilha do briefing (creme sobre soft blue = 2,29) não aparece em
   texto nenhum aqui. Sobre o azul só existe tinta tech black.
   ═════════════════════════════════════════════════════════════════════ */


body{font-family:var(--sans)}
.env{max-width:1100px}

/* ══ 1. A BANDA ══════════════════════════════════════════════════════════
   O cabeçalho inteiro — marca, headline, ficha e seletor de dia — passa a
   viver dentro de um campo azul Journeys sangrado. É a mudança que faz a
   página parar de ser um documento claro com detalhes coloridos.        */
.topo{
  position:relative;overflow:hidden;
  background:var(--topo-fundo);
  color:var(--topo-tinta-herdada);
  padding:0 0 26px;
  margin:0 0 4px;
}
.topo>*{position:relative;z-index:1}

/* ornamento do tema (topo-o) → temas/oxygen/tema.css */

.masthead-l{padding-top:22px;padding-bottom:20px;align-items:center}
.oxy,.jrn{color:var(--tinta-forte)}   /* 7,22 — o lockup não precisa de isenção */
.jrn{font-weight:600;letter-spacing:.01em}

.euq{display:flex;align-items:center;gap:12px}
.eu{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-forte);opacity:.72;
}
.eu b{opacity:1}
.sair{
  border:1.5px solid var(--tinta-forte);border-radius:99px;padding:7px 17px;
  font-size:.76rem;font-weight:800;letter-spacing:.04em;color:var(--tinta-forte);
  background:transparent;transition:background .18s,color .18s;
}
.sair:hover{background:var(--tinta-forte);color:var(--topo-fundo)}

/* ornamento do tema (filete-onda) → temas/oxygen/tema.css */

/* EYEBROW — pastilha, que é o divisor do toolkit (p.34). Verde escuro com
   creme dá 8,81; o eyebrow em texto solto sobre o azul não passaria em
   nenhuma cor da marca que não fosse o preto. */
.eyebrow{
  display:inline-block;margin:0 0 18px;
  background:var(--forte);color:var(--sobre-forte);
  border-radius:99px;padding:7px 16px 8px;
  font-family:var(--sans);font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
}

/* HEADLINE — o pedido central do briefing: tipografia grande. Sobe de
   ~2,6rem para até 4,6rem, entrelinha e kerning aproximados (toolkit
   p.23: "kerning e entrelinhas levemente aproximados"). */
.headline{
  font-size:clamp(2.5rem,6.4vw,4.4rem);
  font-weight:800;line-height:.94;letter-spacing:-.045em;
  color:var(--tinta-forte);margin:0;max-width:16ch;
}
.headline em{font-style:normal;color:var(--forte)}   /* 3,84 — vale por ser ≥24px */
 /* Hierarquia por PESO e TAMANHO, não por opacidade — opacidade sobre cor
   derruba o contraste medido e não avisa ninguém.
   O nome do CLIENTE entra a 52% do nome do EVENTO. Com "Companhia
   Brasileira de Distribuição e Logística" no mesmo corpo do título, o
   cabeçalho comia três linhas a mais e empurrava o seletor de dia para
   fora da primeira tela — que é o oposto do que esta página serve. */
.headline .linha2{
  display:inline-block;margin-top:.34em;
  font-size:.52em;font-weight:700;line-height:1.06;letter-spacing:-.03em;
  color:var(--tinta-forte);
}
.alvo{vertical-align:baseline}

.quando{
  margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;
  font-size:.82rem;font-family:var(--sans);color:var(--tinta-forte);
}
.quando span{
  background:var(--campo);border-radius:99px;padding:5px 13px;
  font-weight:600;
}
.quando b{font-weight:800}
.saudacao{margin:16px 0 0;font-size:.95rem;color:var(--tinta-forte);opacity:.8}

#capa{margin-top:22px}
.capa-cli{border-radius:var(--raio);overflow:hidden}

/* ══ 2. SELETOR DE DIA — cartão creme sobre o azul ═══════════════════════ */
.dias{
  /* Com auto-fit + 1fr, UM dia vira um cartão de 1000px. O teto de 230px
     com justify-content:start resolve o caso de um dia sem estragar o de
     cinco, que continuam preenchendo a linha e quebrando sozinhos. */
  margin-top:24px;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,230px));
  justify-content:start;
}
.diab{
  border:0;border-radius:var(--raio);background:var(--campo);
  padding:16px 18px 15px;color:var(--tinta-forte);
  transition:transform .18s,box-shadow .18s;
}
.diab:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--sombra-dia)}
.diab[aria-selected="true"]{background:var(--realce);box-shadow:0 0 0 2.5px var(--forte)}
.diab .dd{font-family:var(--sans);font-size:1.9rem;font-weight:800;letter-spacing:-.04em;
  color:var(--tinta-forte);font-variant-numeric:tabular-nums;line-height:1}
.diab[aria-selected="true"] .dd{color:var(--tinta-forte)}
.diab .ds{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--forte)}
.diab .dn{font-size:.78rem;font-weight:600;color:var(--forte);opacity:.9}
.spark span{background:var(--spark-vazio);border-radius:99px}
.spark span.on,.diab[aria-selected="true"] .spark span.on{background:var(--forte)}

/* ══ 3. FILTROS — tudo pílula ════════════════════════════════════════════ */
.filtros{
  margin:0;background:var(--barra-fundo);
  border-top:0;border-bottom:1px solid var(--linha);
}
.fint{padding:13px 26px;max-width:1100px}
.seg{border:1.5px solid var(--linha);border-radius:99px;overflow:hidden;background:var(--controle-fundo)}
.seg button{
  padding:8px 16px;font-size:.79rem;font-weight:700;color:var(--tinta-2);
  border-right:1px solid var(--linha);
}
.seg button[aria-pressed="true"]{background:var(--forte);color:var(--sobre-forte)}
.busca{
  border:1.5px solid var(--linha);border-radius:99px;background:var(--controle-fundo);
  padding:9px 18px;font-size:.86rem;
}
.busca:focus{border-color:var(--forte);outline:none}
.trilhas{padding-bottom:13px;max-width:1100px}
.tb{
  border:1.5px solid var(--linha);border-radius:99px;background:var(--controle-fundo);
  padding:7px 14px;font-size:.76rem;font-weight:700;color:var(--tinta-2);
  transition:border-color .16s,background .16s,color .16s;
}
.tb[aria-pressed="true"]{background:var(--forte);border-color:var(--forte);color:var(--sobre-forte)}
.tb[aria-pressed="true"] i{box-shadow:0 0 0 1.5px var(--sobre-forte-suave)}
.tbt[aria-pressed="true"]{background:var(--forte);border-color:var(--forte);color:var(--sobre-forte)}
.tbt[aria-pressed="true"] svg{color:var(--sobre-forte)}

/* ══ 4. O DIA ════════════════════════════════════════════════════════════
   A HORA é o alvo de leitura número um: "onde eu tenho que estar às 14h",
   às 8 da manhã, no sol. Ela era .82rem cinza em monoespaçada; passa a ser
   o segundo maior tipo da página, tabular, em verde escuro (8,81). Foi a
   mudança com mais efeito prático de todo o bloco.                      */
main{padding-top:30px}
.hh{
  width:64px;top:6px;font-family:var(--sans);
  font-size:1.5rem;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--hora-tinta);
}
.linha,.folga{padding-left:calc(var(--rail) + 84px);margin-bottom:14px}
.linha::before,.folga::before{left:84px}
.pt{left:80px;top:14px;width:9px;height:9px;background:var(--forte)}
.linha.dest .pt{background:var(--alerta);box-shadow:0 0 0 4px var(--alerta-halo)}
.rot{
  font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.16em;
  color:var(--rotulo);margin-bottom:8px;
}

/* ══ 5. A CAIXA DA SESSÃO ════════════════════════════════════════════════
   Continua sendo caixa, e --tc continua sendo quem carrega o tipo — mas a
   cor sai do contorno inteiro e vira uma barra interna de 5px. Com raio de
   20px, uma borda colorida nos quatro lados serrilha nos cantos; a barra
   por dentro (inset box-shadow) fica limpa e lê de mais longe.          */
.ss{
  border:1px solid var(--linha);border-left:1px solid var(--linha);
  border-radius:var(--raio);background:var(--superficie);
  padding:16px 44px 17px 22px;
  box-shadow:inset 5px 0 0 var(--tc,var(--linha));
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.ss:hover{
  box-shadow:inset 5px 0 0 var(--tc,var(--linha)),0 4px 0 var(--sombra-cartao);
  transform:translateY(-1px);border-color:var(--linha-forte);
}
.ss:hover .st{color:var(--forte)}
/* MARCADA: campo cheio em power green, tinta preta (11,87). É o estado que
   a pessoa procura rolando a tela — em anel de 2px ele sumia entre as
   caixas brancas. */
.ss.sel{
  background:var(--selecao-fundo);border-color:var(--selecao-fundo);
  box-shadow:inset 5px 0 0 var(--tc,var(--linha));
}
.ss.sel .st,.ss.sel .sh{color:var(--selecao-tinta)}
.ss.sel .sq,.ss.sel .so,.ss.sel .stp{color:var(--forte)}
.ss.sel:hover{box-shadow:inset 5px 0 0 var(--tc,var(--linha)),0 4px 0 var(--sombra-cartao-sel)}

.sm{gap:10px;margin-bottom:9px}
.sh{font-family:var(--sans);font-size:.76rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--tinta-2)}
.stp{
  font-family:var(--sans);font-size:.64rem;font-weight:800;letter-spacing:.12em;
  color:var(--rotulo);
}
.strl{font-size:.65rem;font-weight:800;letter-spacing:.08em}
/* DESTAQUE — pastilha laranja com tinta preta: 4,83, passa em texto
   pequeno. Como texto laranja sobre creme dava 3,43 e reprovava. */
.sflag{
  font-family:var(--sans);background:var(--destaque-fundo);color:var(--destaque-tinta);
  border-radius:99px;padding:3px 9px 4px;font-size:.6rem;font-weight:800;letter-spacing:.1em;
}
.st{font-size:1.16rem;font-weight:800;line-height:1.22;letter-spacing:-.03em}
.par .st{font-size:1.04rem}
.sq{margin-top:9px;font-size:.88rem;font-weight:600;color:var(--tinta-2)}
.sq img{width:26px;height:26px}
.so{margin-top:6px;font-family:var(--sans);font-size:.75rem;font-weight:600;color:var(--tinta-3)}
.est{top:12px;right:11px;width:34px;height:34px;color:var(--tinta-3)}
.est svg{width:19px;height:19px}
.est[aria-pressed="true"],.est:hover{color:var(--forte)}
.ss.sel .est[aria-pressed="true"]{color:var(--forte)}

/* O VÃO: continua sendo ausência, não bloco. Sem preenchimento, tracejado
   mantido, e a barra de tipo fica em fantasma para não competir. */
.folga .ss{
  background:transparent;border-style:dashed;border-color:var(--linha-forte);
  box-shadow:inset 5px 0 0 var(--folga-barra);
}
.folga .ss:hover{transform:none;box-shadow:inset 5px 0 0 var(--folga-barra)}
.folga .st-livre{font-size:.95rem;font-weight:700;color:var(--tinta-3)}

/* ══ 6. FICHA LATERAL ════════════════════════════════════════════════════ */
.fl{border-left:0;box-shadow:-18px 0 50px var(--sombra-ficha)}
.flc{background:var(--ficha-topo-fundo);border-bottom:0;padding:26px 26px 24px;color:var(--ficha-topo-tinta)}
.flm{font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.13em;color:var(--ficha-topo-tinta);opacity:.75}
.flt{font-size:1.55rem;font-weight:800;line-height:1.12;letter-spacing:-.035em;color:var(--ficha-topo-tinta)}
.flx{border:1.5px solid var(--ficha-topo-tinta);border-radius:99px;color:var(--ficha-topo-tinta);background:transparent}
.flx:hover{background:var(--ficha-topo-tinta);color:var(--ficha-topo-fundo);border-color:var(--ficha-topo-tinta)}
.flb{padding:26px 26px 44px}
.flq img,.flq .ini{width:54px;height:54px;font-family:var(--sans);font-weight:800;
  background:var(--realce);color:var(--forte)}
.flq b{font-size:1rem;font-weight:800}
.fld{font-size:.96rem;line-height:1.68;color:var(--tinta-2)}
.fltr{border-left:3px solid var(--tr);border-radius:0 var(--raio-p) var(--raio-p) 0;
  background:var(--superficie-2);padding:14px 16px}
 /* O nome da trilha usava --tr, que é a cor CRUA da planilha: dava 3,43 no
   arquivo original e 3,26 aqui, porque meu fundo é um creme um passo mais
   escuro. Aplico o princípio que o próprio arquivo já documenta em .strl —
   "a cor vive no ícone, não no texto": a cor da trilha fica na barra
   lateral, que é elemento gráfico (régua 3:1), e o nome vai para verde
   escuro, que passa em texto pequeno. */
.fltr b{font-size:.66rem;letter-spacing:.1em;color:var(--forte)}
.flg dt{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--tinta-3)}
.flg dd small{font-family:var(--sans);color:var(--tinta-3)}
.flg div{border-bottom-color:var(--linha)}
.flg{border-top-color:var(--linha)}
.bt{border:1.5px solid var(--linha);border-radius:99px;padding:13px 20px;font-weight:800}
.bt:hover{border-color:var(--forte)}
.bt.forte{background:var(--forte);border-color:var(--forte);color:var(--sobre-forte)}
.bt small{font-family:var(--sans);font-weight:600;letter-spacing:.08em}
.cg{border:1.5px solid var(--linha);border-radius:var(--raio-p)}
.cg summary{font-weight:800}
.cl a{border:1.5px solid var(--linha);border-radius:99px;text-align:center;font-weight:700}
.cl a:hover{border-color:var(--forte)}
.veu{background:var(--veu)}

/* ══ 7. DOCA — campo verde escuro, creme por cima (8,81) ═════════════════ */
.doca{background:var(--doca-fundo);border-top:0;color:var(--doca-tinta)}
.di{padding:15px 26px;max-width:1100px}
.di b{font-family:var(--sans);font-size:1.5rem;font-weight:800;color:var(--realce);
  font-variant-numeric:tabular-nums}
.di span{color:var(--doca-tinta-2);font-weight:600}
.di .di-nota{font-family:var(--sans);font-size:.72rem;color:var(--doca-tinta-3);letter-spacing:0}
.di button{
  border:1.5px solid var(--doca-borda);border-radius:99px;padding:10px 18px;
  color:var(--doca-tinta);font-weight:700;transition:background .18s,color .18s,border-color .18s;
}
.di button:hover{background:var(--doca-tinta);color:var(--doca-fundo);border-color:var(--doca-tinta)}
.di button.forte{background:var(--realce);border-color:var(--realce);color:var(--tinta-forte)}
.di button.forte:hover{background:var(--doca-tinta);color:var(--doca-fundo)}
.di button small{font-weight:600;opacity:.75}
.di .imp{
  border:1.5px solid var(--doca-borda);border-radius:99px;padding:10px 18px;color:var(--doca-tinta);
}
.di .imp:hover{background:var(--doca-tinta);color:var(--doca-fundo);border-color:var(--doca-tinta)}
.di .imp-nota{color:var(--doca-tinta-4)}
.doca-tog{
  background:var(--doca-fundo);border:0;border-radius:var(--raio-p) var(--raio-p) 0 0;
  padding:7px 15px;color:var(--doca-tinta);font-family:var(--sans);font-weight:700;letter-spacing:.06em;
}
.doca-tog:hover{color:var(--realce)}
.doca.min .doca-tog{border:0}
.doca.min .doca-tog b{color:var(--realce)}

/* ══ 8. PORTA — a banda ocupa a tela inteira ════════════════════════════ */
/* body.claro NÃO recebe o azul: a classe permanece no <body> depois que a
   agenda abre, e pintá-la deixava o campo azul atrás da lista inteira.
   Quem carrega o azul é a própria .porta, que já ocupa 100svh. */
.porta{background:var(--porta-fundo);color:var(--porta-tinta)}
.porta .rec{color:var(--porta-ornamento)}
.porta .rec1{opacity:.2;width:340px;height:340px;top:-80px;right:-80px}
.porta .rec2{color:var(--porta-ornamento);opacity:.14;width:300px;height:300px;bottom:-90px;left:-90px}
.porta-cx{max-width:440px}
.porta-marca .oxy,.porta-marca .jrn,.selo .marca-oxy{color:var(--porta-tinta)}
.porta-rot{font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.14em;
  color:var(--porta-tinta);opacity:.72}
.porta h1{font-size:clamp(2.1rem,6.4vw,3rem);line-height:.98;letter-spacing:-.042em;color:var(--porta-tinta)}
.porta h1 em{color:var(--forte);font-style:normal}  /* 3,84, ≥24px */
.porta p{color:var(--porta-tinta);opacity:.82}
.campo label{font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.13em;
  color:var(--porta-tinta);opacity:.75}
.campo input{
  border:0;border-radius:99px;background:var(--campo);padding:15px 22px;
  font-family:var(--sans);font-weight:700;letter-spacing:.1em;color:var(--tinta-forte);
}
.campo input::placeholder{color:var(--tinta-3);font-weight:600}
.campo input:focus{outline:2.5px solid var(--forte);outline-offset:2px}
.porta button.entrar{
  border-radius:99px;background:var(--forte);border-color:var(--forte);
  color:var(--sobre-forte);padding:15px;font-weight:800;margin-top:10px;
}
.porta button.entrar:hover{background:var(--tinta-forte);border-color:var(--tinta-forte);color:var(--sobre-forte)}
.aviso{
  border-left:0;border-radius:var(--raio-p);background:var(--porta-aviso-fundo);
  padding:14px 16px;color:var(--porta-tinta);
}
.aviso b{color:var(--porta-tinta)}
.rodape-porta{border-top:1px solid var(--porta-linha);color:var(--porta-tinta);opacity:.8}
 /* Verde escuro sobre o azul dá 3,84 e reprova a 15px. O link se distingue
   por sublinhado em vez de cor — preto sobre azul dá 7,22. */
.rodape-porta a{color:var(--porta-tinta);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.selo{font-family:var(--sans);font-weight:800;color:var(--porta-tinta)}
.selo .cli{color:var(--porta-tinta);opacity:.7}
.selo i{background:var(--forte)}
.carregando{background:var(--porta-fundo);color:var(--porta-tinta);font-family:var(--sans);font-weight:800}
.carregando i{background:var(--carregando-trilho)}
.carregando i::after{background:var(--forte)}

/* ══ 9. PATROCINADORES ═══════════════════════════════════════════════════ */
.apoio{background:var(--superficie-2);border-radius:var(--raio);padding:22px 26px;
  margin:26px auto 0;max-width:1100px}
.rotb{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.14em;color:var(--tinta-3)}

/* ══ 10. MOVIMENTO ═══════════════════════════════════════════════════════
   Entrada escalonada, travando no 9º item: um dia com 30 blocos com
   escalonamento contínuo faz trocar de dia parecer travamento.

   `both` em tudo que nasce em opacity:0 — se a animação não rodar
   (impressão, motor antigo), o conteúdo aparece em vez de ficar preso.

   E a trava do briefing que não estava no briefing: a busca chama pintar()
   a cada TECLA, sem debounce. Sem a regra do :has() abaixo, digitar
   "austin" reanimaria a lista inteira seis vezes em um segundo. Com a
   busca preenchida, a animação sai. Navegador sem :has() ignora a regra e
   volta ao comportamento animado — degrada, não quebra.                 */
@keyframes jr-sobe{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes jr-entra{from{opacity:0}to{opacity:1}}
#lista>*{animation:jr-sobe .34s cubic-bezier(.22,.61,.36,1) both}
#lista>*:nth-child(1){animation-delay:0ms}
#lista>*:nth-child(2){animation-delay:26ms}
#lista>*:nth-child(3){animation-delay:52ms}
#lista>*:nth-child(4){animation-delay:78ms}
#lista>*:nth-child(5){animation-delay:104ms}
#lista>*:nth-child(6){animation-delay:130ms}
#lista>*:nth-child(7){animation-delay:156ms}
#lista>*:nth-child(8){animation-delay:182ms}
#lista>*:nth-child(n+9){animation-delay:200ms}
.filtros:has(.busca:not(:placeholder-shown))~#lista>*{animation:none}
.topo .corpo>*{animation:jr-entra .42s ease both}
.eyebrow{animation-delay:40ms}
.headline{animation-delay:80ms}
.quando{animation-delay:140ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ══ 11. CELULAR — 390px é o alvo real ═══════════════════════════════════ */
@media (max-width:760px){
  .topo{padding-bottom:20px}
  /* ornamento do tema (topo-o-760a) → temas/oxygen/tema.css */
  .masthead-l{padding-top:16px;padding-bottom:14px}
  /* ornamento do tema (filete-760a) → temas/oxygen/tema.css */
  .headline{font-size:clamp(2rem,9.4vw,2.9rem);max-width:none}
  .eyebrow{margin-bottom:14px;font-size:.63rem;padding:6px 13px}
  .quando{margin-top:16px;font-size:.76rem}
  .dias{margin-top:18px}
  .diab{border-radius:var(--raio-p);padding:12px 15px}
  .diab .dd{font-size:1.4rem}
  /* A hora sobe para cima da caixa: 64px de calha custam um terço da
     largura útil num 390, e o título é quem tem que respirar. */
  /* O seletor de dia vira faixa que rola na horizontal. Empilhado, cinco
     dias custavam meia tela antes da primeira sessão. */
  .dias{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x mandatory;margin:18px -18px 0;padding:0 18px 4px;
  }
  .dias::-webkit-scrollbar{display:none}
  .diab{
    flex:0 0 auto;width:132px;display:block;scroll-snap-align:start;
    padding:12px 14px 11px;
  }
  .diab .d1{display:flex;align-items:baseline;gap:7px}
  .diab .dn{margin:3px 0 0;font-size:.7rem;line-height:1.3}
  .spark{margin:8px 0 0;width:auto}

  .linha,.folga{padding-left:0;margin-bottom:16px}
  .linha::before,.folga::before{display:none}
  .linha.fork::before{display:none}
  .pt{display:none}
  /* text-align:left explícito: a regra base alinha a hora à DIREITA para a
     calha do desktop, e sem isto ela ficava colada na borda direita da tela. */
  .hh{position:static;width:auto;display:block;text-align:left;
    font-size:1.15rem;margin:0 0 6px 2px}
  .ss{padding:14px 42px 15px 18px;border-radius:var(--raio-p)}
  .st{font-size:1.06rem}
  .par .st{font-size:1.02rem}
  .di{padding:13px 18px}
  .apoio{border-radius:var(--raio-p);padding:18px}
  .fint{padding:11px 18px}
}


/* ═════════════════════════════════════════════════════════════════════════
   MODO VIAGEM — camada de celular. 2026.
   ─────────────────────────────────────────────────────────────────────────
   APAGAR DAQUI ATÉ O FIM DO <style> DEVOLVE A PÁGINA À PELE ANTERIOR.
   Nenhuma classe renomeada, nenhum elemento novo, nenhum JS tocado. Só
   cascata sobre o DOM que já existe — inclusive as regras de celular da
   pele, que ficam intactas acima e são sobrescritas aqui.

   O QUE MUDOU DE PREMISSA
   A pele anterior desenhou a página para ser vista. Esta camada desenha
   para ser USADA em pé, andando, com uma mão, no meio do festival — a
   decisão que faltava no handoff (§6, pendência 2) foi respondida:
   é ferramenta de viagem, não material de venda.

   O NÚMERO QUE MOTIVA TUDO
   Medido no arquivo anterior, num 390×844:
     · cabeça .............. 466px
     · barra de filtro ..... 205px  (fixa)
     · doca ................ 195px  (fixa)
     · primeira sessão em ... y=709 — abaixo da dobra
   Rolando, 400px dos 844 eram moldura: sobravam 444px de conteúdo, ou
   1,3 cartão de sessão por tela. Metade do celular estava alugada para
   controle.

   O QUE ESTA CAMADA NÃO RESOLVE, e por quê
   O seletor de dia continua sumindo ao rolar, e o filtro continua fixo
   inteiro. Trocar isso — dia fixo no topo, filtro atrás de um botão —
   exige mover nó no DOM, e este arquivo monta o DOM no JS. É decisão do
   Michael, não de CSS. Está anotado como pendência.
   ═════════════════════════════════════════════════════════════════════ */

/* ── CORREÇÃO DE CONTRASTE (vale em qualquer largura) ────────────────────
   Achado ao medir esta camada, mas o defeito é anterior a ela e reprova
   igual no desktop: a cor do texto do chip de trilha vem inline em --trt,
   calculada por corLegivel(cor, 4.5) contra o CAMPO BRANCO do cartão. No
   cartão MARCADO o campo vira power green, e a conta não é refeita —
   "IA & Agentes" cai para 3,30 e reprova em 4,5.

   Não dá para corrigir no inline sem mexer no JS. Dá para corrigir aqui:
   sobre power green, verde escuro mede 6,31 (a mesma linha já tabelada na
   pele). O PONTO continua na cor cheia da trilha — forma pequena, régua
   3:1 — então a trilha continua identificável pela cor.                */
.ss.sel .strl{color:var(--forte)}


@media (max-width:760px){

  /* ══ 1. CABEÇA — de cartaz a cabeçalho ════════════════════════════════
     Não é corte de conteúdo, é corte de CORPO. Tudo continua na tela: o
     nome do evento, o cliente, as datas, a cidade. O que sai é o tamanho
     de pôster, que serve para convencer alguém a comprar a viagem — e
     quem está com isto na mão já comprou.                              */
  .topo{padding-bottom:18px;margin-bottom:2px}
  /* ornamento do tema (topo-o-760b) → temas/oxygen/tema.css */
  .masthead-l{padding-top:14px;padding-bottom:10px}
  /* ornamento do tema (filete-760b) → temas/oxygen/tema.css */
  .eyebrow{margin:0 0 11px;padding:5px 13px;font-size:.61rem;letter-spacing:.12em}
  .headline{font-size:clamp(1.7rem,7.8vw,2.25rem);line-height:1.0;letter-spacing:-.04em}
  .headline .linha2{margin-top:.24em;font-size:.56em}
  .quando{margin-top:13px;gap:5px 6px;font-size:.73rem}
  .quando span{padding:4px 11px}
  .saudacao{margin-top:11px;font-size:.86rem}
  /* #capa é a faixa da imagem do cliente e nasce vazia na maioria das
     jornadas — mas o margin-top de 22px vale mesmo vazio, e viravam 22px
     de azul sem nada dentro no fim da cabeça. */
  #capa:empty{margin-top:0}

  /* Os dois últimos selos são MÉTRICA DE CURADORIA — "9 sessões curadas",
     "4 trilhas". São excelentes na proposta comercial e inúteis na rua:
     ninguém precisa saber o tamanho do catálogo enquanto procura a sala.
     Ficam no desktop, onde a mesma página também é apresentada em call.
     nth-last-child porque os dois PRIMEIROS selos são condicionais
     (período e local podem não vir da planilha) — contar do fim é o
     único jeito estável. Uma linha; apagar devolve os quatro.          */
  .quando span:nth-last-child(-n+2){display:none}

  /* A barra fixa mudou de altura: o alvo de rolagem tem que acompanhar,
     ou o item ancorado nasce POR BAIXO do filtro. Era 150 para 205px de
     barra; agora são 188px de barra. */
  .linha{scroll-margin-top:198px}

  /* ── Seletor de dia: mais dias por tela ──────────────────────────────
     A faixa horizontal já existia na pele. O cartão só encolheu: com
     132px cabiam 2,6 dias na tela; com 116px cabem 3,2, e uma jornada de
     5 dias passa a caber quase inteira sem rolar. */
  .dias{margin-top:15px}
  .diab{width:116px;padding:11px 13px 10px}
  .diab .dd{font-size:1.5rem}
  .diab .ds{font-size:.62rem;letter-spacing:.13em}
  .diab .dn{font-size:.67rem;margin-top:2px}
  .spark{margin-top:7px;height:3px}

  /* ══ 2. BARRA DE FILTRO — duas filas viram alvo de polegar ════════════
     A ordem muda: os dois SEGMENTOS sobem para a mesma fila, porque são
     os dois controles que a pessoa usa em movimento ("meu roteiro é o A",
     "me mostra só o que eu marquei"). A BUSCA desce para a fila inteira
     de baixo — é o controle de quem parou para procurar, não de quem
     está andando.                                                       */
  .fint{padding:8px 18px;gap:7px;align-items:center}
  .seg{flex:none}
  .seg button{padding:9px 13px;font-size:.73rem;min-height:38px}
  .busca{order:3;flex:1 1 100%;min-width:0;padding:9px 14px;font-size:.82rem;min-height:38px}

  /* As duas filas de pastilha alinham com o cartão (18px), não com os
     26px do desktop — a borda desencontrada era visível no scroll. */
  .trilhas{padding:0 18px 8px;gap:5px}
  .trilhas + .trilhas{padding-bottom:9px}
  .tb{padding:7px 12px;font-size:.72rem;min-height:34px}
  /* As duas filas rolam na horizontal desde sempre, e nada dizia isso: a
     última pastilha era cortada em seco pela borda da tela e lia como
     bug. A máscara faz a fila DESAPARECER em vez de ser cortada, que é o
     sinal que a pessoa reconhece como "tem mais para o lado". Só quando
     há transbordo — em tela larga a fila cabe e a máscara não aparece. */
  .trilhas{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  }
  .dias{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }

  /* ══ 3. A LISTA — o vão calculado para de competir ════════════════════
     A caixa de "tempo livre" tinha o mesmo corpo de uma sessão real: dois
     níveis, rótulo próprio, 88px de altura. Numa jornada de festival os
     vãos são metade das caixas do dia, e o resultado era uma lista onde
     metade da rolagem não era programação.

     Vira UMA LINHA: a janela e o que cabe nela. O rótulo "Tempo livre"
     sai porque o texto já diz — "30min sem nada marcado" não precisa de
     etiqueta explicando que é tempo livre.                             */
  .folga{margin-bottom:10px}
  .folga .ss{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;
    padding:10px 16px 11px;
  }
  .folga .sm{margin:0;flex:none}
  .folga .stp{display:none}
  .folga .st-livre{margin:0;font-size:.85rem;font-weight:700}

  /* ── Cartão de sessão ────────────────────────────────────────────────
     A INVERSÃO DE HIERARQUIA É O PONTO. No material de venda o título
     manda: é ele que faz a curadoria parecer boa. Na rua, quem age é o
     LOCAL — a pessoa já decidiu ir, o que ela precisa saber é para onde
     andar. O local sai de 0,75rem em tinta terciária (5,7:1) e vira
     pastilha em verde escuro (8,8:1), que é o que se acha de relance com
     o sol batendo na tela.                                             */
  .linha{margin-bottom:12px}
  .ss{padding:14px 52px 15px 18px}
  .st{font-size:1.1rem}
  .par .st{font-size:1.04rem}
  .sq{margin-top:8px;font-size:.86rem}
  .so{
    display:inline-block;margin-top:10px;padding:5px 11px;
    border-radius:99px;background:var(--superficie-2);
    font-size:.76rem;font-weight:800;color:var(--forte);
  }
  /* Na caixa marcada o campo já é amarelo: a pastilha vira contorno para
     não virar mancha sobre mancha. */
  .ss.sel .so{background:transparent;box-shadow:inset 0 0 0 1.5px var(--local-contorno)}

  /* A estrela era 34px. O mínimo de alvo tocável é 44 — e esta é a única
     coisa que a pessoa toca de propósito enquanto anda. O ícone continua
     com 19px: cresce a ÁREA, não o desenho. */
  .est{width:44px;height:44px;top:7px;right:5px}
  .est svg{width:19px;height:19px}

  .rot{margin-bottom:6px;font-size:.62rem}
  .hh{font-size:1.1rem;margin:0 0 5px 2px}

  /* ══ 4. DOCA — de painel a barra ══════════════════════════════════════
     Eram 195px fixos: 23% do celular, permanentes, para um painel cujo
     conteúdo é um número e três botões. Vira barra.

     A hierarquia real das três ações, em viagem:
       · ASSINAR o calendário é a ação do celular. Continua cheia e alta.
       · BAIXAR .ics é ação de desktop — no celular o arquivo cai em
         Downloads e a pessoa tem que achar e importar na mão. Vira link.
       · LIMPAR é destrutiva e rara. Vira link.
     Nada foi removido: as três continuam a um toque.

     A NOTA FICA. É ela que diz "sincronizado 18:40", e é a única
     confirmação de que a estrela que a pessoa tocou no corredor subiu
     mesmo. Some o corpo, não a informação.                             */
  .doca{padding-bottom:env(safe-area-inset-bottom,0px)}
  .di{
    flex-wrap:wrap;align-items:center;gap:5px 10px;padding:9px 18px 10px;
  }
  .di b{font-size:1.25rem;line-height:1.05}
  .di span{flex:1 1 auto;min-width:0;font-size:.79rem}
  .di button{min-height:42px;padding:10px 15px;font-size:.77rem}
  .di button small{display:none}
  .di button.forte{order:1;flex:none}
  .di #dlimpar,.di #dbaixar{
    order:2;flex:none;min-height:0;padding:0;border:0;background:none;
    font-size:.72rem;font-weight:700;text-decoration:underline;
    text-underline-offset:3px;color:var(--doca-tinta-link);
  }
  .di #dlimpar:hover,.di #dbaixar:hover{background:none;color:var(--doca-tinta)}
  .di .di-nota{order:3;flex:1 1 100%;font-size:.66rem;margin:0;line-height:1.3}

  /* O rodapé da lista acompanhava uma doca de 195px. Com a barra, 130px
     viravam um vão morto no fim do último dia. */
  main{padding:16px 0 92px}

  /* Área segura do iPhone: o arquivo declara viewport-fit=cover e nunca
     tratou o inset. Sem isto, no 15/16 os botões da doca ficam POR BAIXO
     da barra de gestos — clicáveis no papel, inalcançáveis na mão. */
  .doca.min .doca-tog{padding-bottom:0}
  .fl{padding-bottom:env(safe-area-inset-bottom,0px)}
}


/* ═════════════════════════════════════════════════════════════════════════
   PATCH · DIA FIXO E FILTRO RECOLHIDO — camada de CSS. 2026.
   ─────────────────────────────────────────────────────────────────────────
   Acompanha as três edições do ESQUELETO e o <script> aditivo. Sozinho não
   faz nada; junto, tira a moldura fixa do celular de 291px para ~100px.

   O QUE MUDA DE FORMA
   O seletor de dia era CARTÃO CREME sobre o campo azul — bonito, e caro:
   90px, e sumia na primeira rolagem. Vira ABA PÍLULA dentro da barra
   fixa. Perde o corpo, não perde informação: a data, o dia da semana e o
   sparkline de densidade continuam todos lá. No desktop a contagem de
   sessões volta, porque lá cabe.
   ═════════════════════════════════════════════════════════════════════ */

/* ══ 1. O DIA, AGORA DENTRO DA BARRA ═══════════════════════════════════ */
.filtros .dias{
  display:flex;gap:6px;margin:0 auto;padding:9px 26px 0;
  max-width:1100px;overflow-x:auto;scrollbar-width:none;
  grid-template-columns:none;   /* neutraliza o grid da pele */
  scroll-snap-type:x proximity;
}
.filtros .dias::-webkit-scrollbar{display:none}
.filtros .diab{
  flex:0 0 auto;width:auto;display:flex;align-items:center;gap:9px;
  border-radius:99px;padding:8px 15px;background:var(--controle-fundo);
  border:1.5px solid var(--linha);box-shadow:none;
  scroll-snap-align:start;min-height:40px;
}
.filtros .diab:hover{transform:none;box-shadow:none;border-color:var(--forte)}
.filtros .diab[aria-selected="true"]{
  background:var(--realce);border-color:var(--forte);
  box-shadow:inset 0 0 0 1px var(--forte);
}
.filtros .diab .d1{flex:none;display:flex;align-items:baseline;gap:6px}
.filtros .diab .dd{font-size:1.05rem;line-height:1}
.filtros .diab .ds{font-size:.6rem;letter-spacing:.12em}
.filtros .diab .dn{
  flex:none;margin:0;font-size:.7rem;font-weight:600;white-space:nowrap;
}
.filtros .spark{flex:none;width:36px;margin:0;height:3px;gap:1.5px}

/* ══ 2. O BOTÃO NOVO ═══════════════════════════════════════════════════ */
.fbtn{
  flex:none;border:1.5px solid var(--linha);border-radius:99px;background:var(--controle-fundo);
  padding:9px 15px;font-size:.73rem;font-weight:800;color:var(--forte);
  min-height:38px;display:inline-flex;align-items:center;gap:7px;
  transition:background .16s,border-color .16s,color .16s;
}
.fbtn::before{
  content:"";width:13px;height:13px;flex:none;
  background:currentColor;
  -webkit-mask:no-repeat center/contain var(--ico);mask:no-repeat center/contain var(--ico);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E");
}
/* O contador. Sem ele, filtro recolhido é armadilha: a pessoa marca
   "Refeição", fecha o painel e vê um dia de duas linhas sem nenhuma pista
   de que é ela quem está escondendo o resto. Laranja sobre preto mede
   4,83 — a única combinação da paleta que libera número pequeno. */
.fbtn[data-n]::after{
  content:attr(data-n);
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--alerta);color:var(--tinta-forte);
  font-size:.68rem;font-weight:800;line-height:19px;text-align:center;
}
.fbtn[aria-expanded="true"]{background:var(--forte);border-color:var(--forte);color:var(--sobre-forte)}
.fbtn:hover{border-color:var(--forte)}

/* ══ 3. O PAINEL ═══════════════════════════════════════════════════════ */
.fdet .busca{
  display:block;width:calc(100% - 52px);margin:11px auto 0;max-width:1048px;
}
/* As duas filas somem sozinhas quando têm menos de dois valores — o JS
   põe [hidden] nelas. A busca não some nunca, então o painel nunca fica
   vazio e o botão não precisa de regra de desaparecimento. */

/* No desktop nada disso acontece: o painel é sempre aberto e o botão não
   existe. `[hidden]` perde para a especificidade daqui de propósito — é o
   único jeito de manter o atributo semântico no celular sem duplicar
   estado no JS. */
@media (min-width:761px){
  .fbtn{display:none}
  .fdet[hidden]{display:block}

  /* CUSTO DE DESKTOP, e como ele é pago.
     Trazer o dia para dentro da barra fixa engordou a barra do desktop de
     162px para 259 — 29% de uma tela de 900, permanentes, para resolver um
     problema que é de celular. O `top` negativo devolve os 162: a barra
     pina quando seu topo passa de -97px, ou seja, a fila de dias rola para
     fora e só o filtro fica grudado. No desktop o dia volta a ser o que
     era antes deste patch — visível no topo, some ao rolar.

     Precisa ser exatamente a altura da fila de dias. Se o corpo da pílula
     mudar, este número muda junto, ou sobra/falta uma fatia de dia
     pendurada na barra. */
  .filtros{top:-97px}
}

@media (max-width:760px){
  .filtros .dias{padding:8px 18px 0;gap:5px}
  .filtros .diab{padding:8px 13px;gap:8px}
  /* "11 sessões · 2 destaques" não cabe na pílula num 390 e empurraria a
     terceira aba para fora. O sparkline fica: ele é a mesma informação
     em forma, e forma pequena não precisa de largura. */
  .filtros .diab .dn{display:none}
  .filtros .spark{width:30px}

  /* A barra fixa some para dois níveis: dia + uma fila de controle.
     Busca, tipo e trilha passam a viver dentro do painel. */
  .fint{padding:8px 18px;gap:7px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  /* Folga do tamanho do botão fixo, como ESPAÇADOR e não como padding: com
     padding-right o `right:0` do sticky passa a mirar a borda da caixa de
     padding, e o botão parava no meio da tela. O espaçador dá a mesma
     folga no fim da rolagem sem mover a referência do sticky. */
  .fint::after{content:"";flex:0 0 96px}
  .fint::-webkit-scrollbar{display:none}
  .fint>*{flex:none}
  /* A fila de controle não cabe num 390: os dois segmentos somados dão
     466px de conteúdo em 390 de tela, e o botão novo nascia FORA — cortado
     pela borda, que é o pior lugar possível para a única porta de entrada
     do filtro.

     Em vez de encolher fonte até caber (o alvo já está em 38px, que é o
     piso), o botão fica GRUDADO na direita enquanto a fila rola por baixo.
     É o padrão de ação persistente de barra de ferramentas: o que rola é
     a lista de opções, a ação fica. O degradê à esquerda é o que impede
     de virar botão flutuando em cima de texto. */
  .fbtn{
    position:sticky;right:0;z-index:2;
    box-shadow:-14px 0 14px -6px var(--barra-sombra);
  }

  .fdet{
    border-top:1px solid var(--linha);
    padding-bottom:11px;max-height:64vh;overflow-y:auto;
  }
  .fdet .busca{width:calc(100% - 36px);margin-top:11px}
  .fdet .trilhas{padding:9px 18px 0}
  .fdet .trilhas:last-child{padding-bottom:2px}

  /* A barra encolheu de 189px para ~100: o alvo de rolagem tem que
     acompanhar, ou o item ancorado nasce por baixo dela. */
  .linha{scroll-margin-top:112px}
}


/* ═════════════════════════════════════════════════════════════════════════
   TINTA CLARA NO CAMPO AZUL — bloco único. 2026.
   ─────────────────────────────────────────────────────────────────────────
   Pedido: no fundo azul, usar a cor clara (Comfort White #FFFFF4).
   Inverte a tinta de TUDO que vive dentro do .topo. Nada fora do cabeçalho
   é tocado — a lista, a barra de filtro, a ficha e a doca seguem iguais.
   Apagar o bloco devolve a tinta preta.

   O NÚMERO QUE PRECISA ESTAR À VISTA
     creme #FFFFF4 sobre Soft Blue #37BBC7 ......... 2,29
   A régua é 4,5 para texto pequeno e 3,0 para texto grande (≥24px, ou
   ≥18,66px em bold). 2,29 não passa em nenhuma das duas. É a mesma
   combinação que o briefing anterior tinha marcado como armadilha.

   Duas saídas, e as duas estão neste arquivo:
     A · campo Soft Blue puro — a cor da marca intacta, contraste 2,29
     B · campo no azul aprofundado #217077 — mesma matiz, contraste 5,72
   O que muda entre A e B é UMA LINHA, marcada lá embaixo.
   ═════════════════════════════════════════════════════════════════════ */

/* ── O lockup ────────────────────────────────────────────────────────────
   Logotipo é isento de régua de contraste — a própria pele já anotava
   isso quando decidiu que o azul puro pinta a marca. Então esta parte
   funciona nos dois campos, sem ressalva. */
.oxy,.jrn{color:var(--topo-tinta)}

/* ── Identificação e saída ───────────────────────────────────────────── */
.eu{color:var(--topo-tinta);opacity:1}
/* Duas armadilhas juntas aqui, e as duas são regra própria do arquivo.
   1. `.eu b` tinha COR CHUMBADA (linha 625, var(--tinta) = tech black) e
      não herdava nada — só a metade "agenda de" virava clara e o nome do
      cliente continuava preto. Passa a herdar.
   2. A opacidade de .72 do original sai. A pele já tinha escrito a regra:
      hierarquia por PESO e TAMANHO, não por opacidade, porque opacidade
      sobre cor derruba o contraste medido e não avisa ninguém. */
.eu b{opacity:1;color:inherit}
.sair{color:var(--topo-tinta);border-color:var(--topo-tinta)}
.sair:hover{background:var(--topo-tinta);color:var(--topo-fundo-escuro)}

/* ornamento do tema (filete-opac) → temas/oxygen/tema.css */

/* ── Eyebrow ─────────────────────────────────────────────────────────────
   Inverte: era pastilha verde escura com tinta creme, vira pastilha creme
   com tinta verde escura. Os dois medem 8,81 — a pastilha é campo próprio
   e não depende do azul atrás. */
.eyebrow{background:var(--topo-tinta);color:var(--topo-fundo-escuro)}

/* ── Headline ────────────────────────────────────────────────────────────
   O ano estava em verde escuro para se separar do nome do evento. Sobre
   tinta clara ele sumiria, então passa a power green: continua sendo a
   diferença de MATIZ que já existia, na direção clara. */
.headline{color:var(--topo-tinta)}
.headline em{color:var(--topo-realce)}
.headline .linha2{color:var(--topo-tinta)}
.saudacao{color:var(--topo-tinta)}

/* ── Selos de data e cidade ──────────────────────────────────────────────
   Eram pastilha creme cheia com tinta preta. Com o cabeçalho inteiro em
   creme, pastilha cheia virava mancha: quatro blocos claros disputando
   com um título claro. Vira contorno — mesma cor, sem peso. */
.quando{color:var(--topo-tinta)}
.quando span{
  background:transparent;color:var(--topo-tinta);
  box-shadow:inset 0 0 0 1.5px var(--topo-tinta-suave);
}

/* ornamento do tema (topo-o-opac) → temas/oxygen/tema.css */

/* ═════════════════════════════════════════════════════════════════════════
   ↓↓↓ A LINHA QUE DECIDE ENTRE A E B ↓↓↓

   COMENTADA  = versão A. Campo Soft Blue puro. Creme mede 2,29.
   DESCOMENTADA = versão B. Campo no azul-60, que é o próprio #37BBC7
                  escurecido na mesma matiz (a escala já existe no :root
                  do arquivo, não é cor nova). Creme mede 5,72 e passa em
                  texto pequeno.

   Não há terceira saída com creme por cima: nenhum valor entre #37BBC7 e
   #28878F chega a 3,0. Para o creme passar, o campo tem que escurecer.  */

/* .topo{background:var(--acento-escuro)} */

/* ── 05-apoio-filete.css — aprovado por Mike/Rebeca em 18/08/2026 ─────
   Medido, o cartão #FBF9E9 sobre a página #FFFFF4 dá 1,05 de diferença:
   não lê como superfície, só como canto arredondado solto. Volta a ser
   filete de 1px e ar, como era antes da pele anterior. O logo do
   patrocinador passa a ser a única coisa com forma na faixa. Não muda a
   régua de altura do logo (--banda, 17px desktop / 15px celular) — só
   tira fundo, borda e padding ao redor. */
.apoio{background:transparent;border-radius:0;padding:18px 0 4px;margin-top:4px}
.apoio .env{border-top:1px solid var(--linha);padding-top:15px}
@media (max-width:760px){ .apoio{padding:14px 0 2px} }

/* ── RÓTULO CURTO NO CELULAR ───────────────────────────────────────────
   Medido em Chromium a 390px: a fila de controle pedia 513px de largura
   para 390 de tela, e o botão Filtrar — que é sticky à direita — cobria
   116px dos 121px de "Minha agenda". Não era encosto, era sobreposição
   quase total: sobrava a última letra espiando, e meia palavra cortada
   lê como defeito, não como "role para ver o resto".

   A saída NÃO foi crescer a barra (ela caiu de 205px para 105 e é esse
   o ganho do modo viagem) nem soltar o botão no fim da esteira (o número
   de filtros ativos vive nele; escondido, some justamente de quem
   filtrou sem perceber). Foi encurtar o texto: 513px → 362px, sobra de
   28px a 390 e sobreposição zero também a 360.

   Só no celular. No desktop sobravam 623px de folga, então lá o rótulo
   continua por extenso — a promessa de "desktop inalterado" fica de pé.
   Dentro da lista os cabeçalhos seguem escritos "ROTEIRO A" e
   "ROTEIRO B": o filtro é o atalho, a lista é quem nomeia. */
.rct{display:none}
@media (max-width:760px){
  .rlg{display:none}
  .rct{display:inline}
}



/* ═════════════════════════════════════════════════════════════════════════
   GRAMÁTICAS — 2026-09
   ─────────────────────────────────────────────────────────────────────────
   Formas de desenho escolhidas pela planilha (Pacotes → apresentação) ou,
   quando ela não diz, pelo tema (tema.json → padroes). O motor põe no
   <html> os atributos data-bloco, data-planos, data-palestrante e
   data-interesse; nada abaixo vale no perfil legado.

   Os tokens desta seção têm padrão aqui, apontando para a paleta. O tema
   redefine o que quiser — ver docs/temas.md.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  /* A/B como cor */
  --plano-a:var(--realce);
  --plano-b:var(--linha);
  --plano-comum:var(--superficie-2);
  --plano-a-tinta:var(--tinta);          /* o motor recalcula: preto ou branco */
  --plano-b-tinta:var(--tinta);
  --plano-comum-tinta:var(--tinta);

  /* faixa */
  --fx-calha:88px;
  --fx-gap:10px;
  --fx-raio:0px;
  --fx-fundo:var(--superficie);
  --fx-fundo-a:var(--fx-fundo);
  --fx-fundo-b:var(--fx-fundo);
  --fx-titulo-tinta:var(--tinta);
  --fx-titulo-deco:none;                 /* ex.: underline */
  --fx-local-tinta:var(--tinta);
  --fx-desc-tinta:var(--tinta-2);
  --fonte-titulo:var(--sans);            /* título de sessão */
  --fonte-data:var(--sans);              /* título do dia */
  --dia-num-tinta:var(--tinta);
  --dia-sem-tinta:var(--tinta-3);
}

/* ── Trilha sem sessão no dia: fica na fila, apagada ─────────────────── */
.tb:disabled{opacity:.38;cursor:default}
.tb:disabled:hover{border-color:var(--linha)}

/* ── Legenda dos planos (só com planos = cor) ────────────────────────── */
.legenda{display:flex;align-items:center;gap:14px;flex:none;
  font-size:.74rem;font-weight:700;color:var(--tinta-2)}
.legenda[hidden]{display:none}
.legenda .lg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.legenda i{width:14px;height:14px;flex:none;border-radius:var(--raio-p);
  background:var(--plano-a);box-shadow:inset 0 0 0 1px var(--linha)}
.legenda .lg-b i{background:var(--plano-b)}

/* ── Cartão com A/B por cor: a barra vira o roteiro ─────────────────── */
/* (a cor chega por --tc no próprio bloco; nada a fazer aqui além de
   garantir a mesma leitura para a sessão comum) */
.ss[data-plano="comum"]{--tc:var(--plano-comum)}

/* ── Palestrante inline ───────────────────────────────────────────────── */
.sq-inline{display:block}
.sq-inline b{font-weight:800;color:var(--tinta)}

/* ── Doca de calendário (sem favoritos) ─────────────────────────────── */
.doca.cal .di-cham{flex:1;min-width:0;font-weight:600}
.doca.cal .doca-tog-n{display:none}
.doca.cal.min .doca-tog-n{display:inline}

/* ── Título do dia (gramática faixa) ────────────────────────────────── */
.dia-titulo{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin:4px 0 18px;font-weight:500;line-height:1}
.dia-num{font-family:var(--fonte-data);font-size:clamp(2rem,6vw,2.8rem);
  color:var(--dia-num-tinta);font-variant-numeric:tabular-nums}
.dia-sem{font-family:var(--fonte-data);font-size:clamp(1.5rem,4.4vw,2rem);
  color:var(--dia-sem-tinta)}

/* ── FAIXA ───────────────────────────────────────────────────────────── */
.fx{
  position:relative;display:flex;align-items:stretch;margin:0 0 var(--fx-gap);
  background:var(--fx-fundo);border-radius:var(--fx-raio);overflow:hidden;
  cursor:pointer;text-align:left;
}
.fx[data-plano="a"]{background:var(--fx-fundo-a)}
.fx[data-plano="b"]{background:var(--fx-fundo-b)}
.fx:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.fx.sel{box-shadow:inset 0 0 0 2px var(--forte)}

.fx-hora{
  flex:0 0 var(--fx-calha);box-sizing:border-box;padding:15px 12px;
  display:flex;flex-direction:column;gap:2px;
  font-size:.9rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;
  background:var(--plano-comum);color:var(--plano-comum-tinta);
}
.fx[data-plano="a"] .fx-hora{background:var(--plano-a);color:var(--plano-a-tinta)}
.fx[data-plano="b"] .fx-hora{background:var(--plano-b);color:var(--plano-b-tinta)}

.fx-corpo{flex:1;min-width:0;padding:15px 18px 16px;display:flex;flex-direction:column;gap:6px}
.fx-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fx-titulo{margin:0;font-family:var(--fonte-titulo);font-size:1.04rem;font-weight:700;
  line-height:1.28;color:var(--fx-titulo-tinta);text-decoration:var(--fx-titulo-deco);
  text-underline-offset:3px;padding-right:30px}
.fx-local{margin:0;font-size:.8rem;font-weight:800;color:var(--fx-local-tinta)}
.fx-quem{margin:0;font-size:.84rem;font-weight:700;color:var(--tinta)}
.fx-quem span{font-weight:500;color:var(--tinta-3)}
.fx-desc{margin:0;font-size:.86rem;line-height:1.55;color:var(--fx-desc-tinta)}
.fx-desc b{font-weight:700;color:var(--tinta)}
.fx .est{top:8px;right:8px}

@media (max-width:760px){
  :root{--fx-calha:74px}
  .fx-hora{padding:13px 10px;font-size:.84rem}
  .fx-corpo{padding:13px 14px 14px}
  .fx-titulo{font-size:1rem}
  .fx .est{width:44px;height:44px;top:2px;right:2px}
  .legenda{gap:10px;font-size:.7rem}
}

/* ── Ficha FECHADA não projeta sombra ─────────────────────────────────
   A ficha fechada fica fora da tela por translateX(100%), mas a sombra de
   50px à esquerda dela continuava DENTRO da tela: uma faixa escura colada
   na borda direita, em toda página, o tempo todo. Com a sombra verde do
   oxygen quase não se via; com tema de sombra mais escura, virava defeito
   óbvio. Corrigido em 09/2026 — a única diferença proposital do teste de
   regressão (ver teste/comparar.py, ESPERADAS). */
.fl:not(.on){box-shadow:none}

/* ── Doca de calendário no celular ─────────────────────────────────────
   A chamada ganha a linha inteira; o botão forte e o link do .ics ficam
   embaixo. Espremida ao lado dos botões ela quebrava em quatro linhas. */
@media (max-width:760px){
  .doca.cal .di-cham{flex:1 1 100%;order:0;font-size:.8rem;margin:0 0 2px}
  .doca.cal .di button.forte{order:1}
  .doca.cal .di #dbaixar{order:2}
}