/* ==========================================================================
   ENCONTRO DE NEGOCIOS DA BELEZA - Programacao Varejo
   Glamour Beauty Show 2026 | 10.OUT.26
   Estrutura de LP de congresso (conversao). Paleta e tipografia do KV oficial.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* fundo */
  --bg:#05010F;
  --bg-2:#0A0320;
  --card:rgba(255,255,255,.035);
  --card-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  /* marca (do KV) */
  --ciano:#16B7F5;
  --ciano-2:#5CD2FF;
  --roxo:#7B2FF7;
  --roxo-2:#A855F7;
  --magenta:#D926C4;
  --azul:#2B4BFF;
  /* texto */
  --txt:#FFFFFF;
  --muted:#B7ADD4;
  --dim:#8479A8;
  /* medidas */
  --r:14px; --r2:22px; --r3:32px;
  --max:1180px;
  --nav-h:76px;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Gabarito,"Plus Jakarta Sans",sans-serif;line-height:1.06;letter-spacing:-.02em}
h1,h2,h3{text-wrap:balance}
::selection{background:var(--roxo);color:#fff}
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.section{padding:clamp(60px,8vw,112px) 0;position:relative}
/* A ancora fica na <section>, mas o olho procura o titulo — e entre um e outro ha
   ate 112px de padding. Somado aos 92px do `scroll-padding-top`, o clique no menu
   parava com meia tela vazia. A margem negativa desconta o padding da propria
   secao, entao o rotulo para logo abaixo do cabecalho. Vale so para as secoes:
   os cards de palestrante (`#p-...`) nao tem esse padding e usam o padrao. */
.section[id]{scroll-margin-top:calc(12px - clamp(60px,8vw,112px))}
.center{text-align:center}

/* ---------- tipografia utilitaria ---------- */
.eyebrow{
  font-family:Gabarito,sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ciano);margin-bottom:16px;display:block;
}
/* Os triangulos do KV abrem cada secao, ACIMA do rotulo. Ao lado do texto eles
   ficavam do tamanho da letra e sumiam; em cima, sozinhos, tem presenca.
   Arquivo justo (SVG desde 02/09, viewBox cortado no brilho), entao a caixa E o
   desenho — com o `triangulos.svg`, que tem a moldura larga, 51% desta altura
   seria margem transparente.
   O `margin-inline:auto` centra: os 8 rotulos da pagina sao centralizados. Se um
   dia algum for alinhado a esquerda, trocar por `margin-right:auto` nele. */
.eyebrow::before{
  content:"";display:block;width:44px;height:24px;margin:0 auto 14px;
  background:url("triangulos-justo.svg?v=20260902d") center/contain no-repeat;
  filter:drop-shadow(0 0 12px rgba(123,47,247,.55));
}
.h2{font-size:clamp(1.6rem,4.3vw,3.1rem);font-weight:800}
.lead{color:var(--muted);font-size:clamp(1rem,1.3vw,1.1rem);max-width:60ch}
.lead.center{margin-inline:auto}
.grad-ciano{
  background:linear-gradient(92deg,var(--ciano) 0%,var(--ciano-2) 55%,#9F7BFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-roxo{
  background:linear-gradient(92deg,var(--roxo-2) 0%,#C86BFF 50%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Mote da marca: "Novas perspectivas." em Satisfy, como no convite de
   WhatsApp (_originais/convites/). Irma das duas classes acima.

   Tres numeros que NAO sao gosto:
   - `1.34em` e a proporcao do proprio convite, onde a linha em Montserrat
     esta em 32 e a em Satisfy em 43. Uma script desenha menor que uma sans
     no mesmo corpo; igualar os dois faria a segunda linha encolher.
   - `letter-spacing:0` desfaz o -.02em que `h1,h2,h3,h4` aplicam. Numa
     letra de mao o negativo cola os tracos e a palavra vira borrao.
   - `line-height` e `padding-bottom` existem porque o 1.06 dos titulos
     corta a perna do "p" de "perspectivas".

   A cor e o #ad43ff do convite, copiado cru e nao aproximado. Da 4,94:1
   sobre o fundo da pagina, acima dos 3,0 que texto grande pede. */
.mote{
  display:inline-block;
  font-family:Satisfy,"Brush Script MT",cursive;font-weight:400;
  font-size:1.34em;line-height:1.18;letter-spacing:0;
  color:#ad43ff;padding-bottom:.1em;
}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:Gabarito,sans-serif;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  font-size:.9rem;padding:18px 36px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s;
}
.btn-primary{
  background:linear-gradient(100deg,var(--roxo) 0%,#9333EA 50%,var(--magenta) 100%);
  color:#fff;box-shadow:0 12px 40px -12px rgba(148,51,234,.85),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 52px -14px rgba(168,85,247,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-2);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--ciano);transform:translateY(-2px)}
.btn-sm{padding:12px 24px;font-size:.76rem}
.btn-lg{padding:21px 46px;font-size:1rem}

.cta-note{display:block;margin-top:13px;font-size:.8rem;color:var(--dim);font-weight:600}
.cta-note b{color:var(--ciano-2);font-weight:700}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.site-header.stuck{background:rgba(5,1,15,.86);backdrop-filter:blur(18px);border-bottom-color:var(--line)}
/* O botao do cabecalho so entra depois que a pagina rola. No topo ele repetia o
   CTA grande do hero a poucos centimetros de distancia. `stuck` e a mesma classe
   que o JS ja liga em `scrollY > 24` para o fundo do cabecalho.
   Nao usar `display:none`: o `.header-in` e `space-between` e a nav pularia de
   lugar quando o botao aparecesse. `visibility` tambem tira do foco do teclado. */
.header-cta{opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s,transform .25s,visibility .25s}
.site-header.stuck .header-cta{opacity:1;visibility:visible;transform:none}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100% - 40px,var(--max));margin-inline:auto}
.brand img{width:128px}
/* Navegação da página, em linha no cabeçalho. O risquinho continua existindo
   ao lado dela, mas com as outras páginas da Glamour. */
.nav{display:flex;gap:26px}
.nav a{font-size:.85rem;font-weight:600;color:#fff;position:relative;padding:6px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--ciano),var(--roxo-2));transition:right .3s}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.nav-toggle{display:block;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:0;
  position:relative;z-index:2}
.nav-toggle span{display:block;height:2px;width:24px;margin:5px auto;
  background:#fff;border-radius:2px;transition:transform .3s,opacity .2s}
.site-header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.open .nav-toggle span:nth-child(2){opacity:0}
.site-header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- menu geral da Glamour (abre pelos risquinhos) ---------- */
/* Overlay de tela cheia, lista vertical alinhada à direita — o mesmo padrão das
   LPs de congresso. `position:fixed` funciona porque este elemento está FORA do
   <header>; dentro dele o backdrop-filter viraria bloco de contenção e o overlay
   deixaria de cobrir a viewport depois do primeiro scroll.

   z-index 55 fica ABAIXO do header (60) de propósito: assim o logo e o X
   continuam visíveis e clicáveis por cima do overlay. */
.menu-geral{
  position:fixed;inset:0;z-index:55;
  background:rgba(5,1,15,.97);backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;justify-content:flex-end;align-items:flex-start;
  padding:calc(var(--nav-h) + 20px) clamp(20px,5vw,60px) calc(56px + env(safe-area-inset-bottom));
}
html.menu-aberto .menu-geral{opacity:1;visibility:visible}

/* ⚠ Aqui havia `html.menu-aberto{overflow:hidden}` para travar o fundo. No
   WebKit do iPhone isso trava TAMBÉM a rolagem de dentro do overlay: o menu
   abria e não descia, com os últimos itens inalcançáveis. Não usar overflow
   hidden na raiz para bloquear fundo.
   Não é preciso travar nada: o overlay cobre a viewport inteira, então todo
   arrasto acontece sobre ele, e o `overscroll-behavior:contain` impede a
   rolagem de vazar para a página quando o menu chega ao fim. */

/* a barra fixa do CTA tem z-index 70 e ficava POR CIMA do menu, escondendo os
   últimos itens */
html.menu-aberto .sticky-cta{display:none}

.menu-geral-in{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:26px;width:100%;max-width:460px;
}
.menu-col{width:100%}
.menu-col h2{
  font-family:Gabarito,sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ciano);
  margin-bottom:8px;text-align:right;
}
.menu-col a{
  display:block;text-align:right;
  font-size:1.02rem;font-weight:600;color:#EDE7FA;
  padding:10px 0;border-bottom:1px solid var(--line);
  transition:color .2s,padding-right .2s;
}
.menu-col a:last-child{border-bottom:0}
.menu-col a:hover,.menu-col a:focus-visible{color:var(--ciano-2);padding-right:6px}
/* No desktop o menu do risquinho tem SÓ as outras páginas da Glamour — as
   âncoras desta página vivem na nav em linha do cabeçalho. No celular a nav
   some, então a coluna volta (ver o bloco mobile). */
.menu-col-lp{display:none}

/* Grupos recolhíveis, como no menu das LPs de congresso. `<details>` nativo:
   abre e fecha sem JS e já vem acessível pelo teclado.
   "Nesta página" fica fora disso, sempre aberta — é a navegação da própria LP
   e é o que a pessoa mais usa aqui. */
.menu-grupo summary{
  list-style:none;cursor:pointer;text-align:right;
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  font-family:Gabarito,sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ciano);
  padding:10px 0;border-bottom:1px solid var(--line);
}
.menu-grupo summary::-webkit-details-marker{display:none}
.menu-grupo summary::after{
  content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s;
}
.menu-grupo[open] summary::after{transform:translateY(1px) rotate(225deg)}
.menu-grupo summary:hover{color:var(--ciano-2)}
.menu-grupo > a:first-of-type{padding-top:12px}
.menu-grupo > a:last-child{border-bottom:0;padding-bottom:2px}

/* ---------- selo de preco + vagas limitadas ---------- */
.selo{
  display:inline-flex;align-items:stretch;flex-wrap:wrap;
  border:1px solid rgba(22,183,245,.45);border-radius:999px;
  background:rgba(22,183,245,.10);overflow:hidden;
}
.selo span{
  display:flex;align-items:center;justify-content:center;
  font-family:Gabarito,sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 18px;
}
/* Era `.free` ("Evento gratuito") ate 10/09/2026. O evento passou a ter
   ingresso de R$ 497 e a palavra gratuidade saiu da pagina inteira por decisao
   do cliente: o cupom das marcas parceiras zera o ingresso no checkout, mas
   quem conta isso e a marca que convidou. O selo agora e a ANCORA de valor —
   e a primeira coisa que se le, antes do titulo. */
.selo .valor{color:var(--ciano-2)}
.selo .limit{background:linear-gradient(100deg,var(--roxo),var(--magenta));color:#fff}

/* ---------- HERO ---------- */
/* A folga de baixo e curta de proposito: e ela que decide se a barra do
   cronometro entra na primeira dobra num monitor de 900px. Ao mexer aqui,
   conferir a conta em `.countdown-bar`. */
.hero{position:relative;padding:calc(var(--nav-h) + 40px) 0 14px;overflow:hidden;isolation:isolate}
/* Fundo do hero. Trocado de bg-gradient.jpg (1920x1072, 40 KB) para WebP em 02/09:
   o arquivo agora vem do master `_originais/kv/fundo-gradiente.png` no tamanho
   nativo dele, 2752x1536, e pesa 37 KB — mais resolucao por menos peso.
   Motivo: num desktop de 1440 esta faixa renderiza a 1425px de largura, o que pede
   2850px num aparelho DPR 2. Com 1920 ela era esticada em qualquer tela retina.
   Nao virou degrade de CSS porque nao da: a arte tem um SWOOSH, um arco de luz
   varrendo do topo-esquerdo para baixo, e radial-gradient so faz brilho concentrico.
   Tentei ajustar tres focos por otimizacao e o erro medio deu 7,7/255 — baixo so
   porque a imagem e quase toda escura; o arco, que e o que caracteriza a arte,
   sumia inteiro. */
.hero-bg{position:absolute;inset:0;z-index:-3;background:url("bg-gradient.webp?v=20260902d") center/cover no-repeat}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 78% 42%,rgba(123,47,247,.35),transparent 70%),
    linear-gradient(180deg,rgba(5,1,15,.55) 0%,rgba(5,1,15,.15) 35%,rgba(5,1,15,.92) 100%);
}
.hero-in{display:grid;grid-template-columns:1.06fr .94fr;
  column-gap:clamp(28px,4vw,58px);row-gap:clamp(16px,2.2vw,26px);align-items:center}
.hero .selo{margin-bottom:22px}

.hero h1{font-size:clamp(1.85rem,4.2vw,3.3rem);font-weight:800;margin-bottom:16px;line-height:1.05}
.hero h1 em{font-style:normal;color:var(--ciano);display:block}
.hero-claim{
  font-family:Gabarito,sans-serif;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.02rem,1.9vw,1.5rem);line-height:1.25;color:#fff;
  margin-bottom:16px;max-width:24ch;
}
.hero-claim strong{color:var(--ciano);font-weight:800}
/* Os triangulos entram como se fossem mais uma letra minuscula: altura de xis
   (`1ex`) e assentados na linha de base, entao nascem e morrem junto com o "a" e
   o "e" de "Negocios da Beleza".
   Usa o arquivo JUSTO, nao o `triangulos.svg`: naquele o desenho ocupa so 51%
   da altura, o resto e margem transparente (era 46,6% no PNG antigo), entao
   `1ex` dimensionava a moldura e o desenho saia com metade do tamanho.
   Os dois viraram SVG regularizado em 02/09. */
.hero h1 .tri{display:inline-block;width:auto;height:1ex;
  vertical-align:baseline;margin-left:.3em;
  filter:drop-shadow(0 0 14px rgba(123,47,247,.7))}
.hero-lead{font-size:clamp(.96rem,1.3vw,1.06rem);color:#C9C0E2;max-width:50ch;line-height:1.62}
.hero-lead strong{color:#fff;font-weight:700}
/* Duas acoes na mesma linha, e a nota embaixo ocupando a largura toda. */
.hero-actions{margin:28px 0 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-actions .cta-note{flex-basis:100%;margin-top:2px}

/* O botao do Eu Vou usa a classe `btn-lg`, a MESMA do principal, e nao uma
   altura cravada aqui: assim ele acompanha sozinho o encolhimento do `btn-lg`
   no mobile (linha ~1022) e qualquer ajuste futuro, sem os dois se
   descolarem. Daqui sai so a cor.

   O azul e o do ANEL DA CAPSULA, medido no arquivo da moldura e nao escolhido
   de olho: o anel vai de #0482DF no meio da lateral ate #00BAFB no ponto mais
   claro, que e a cor dominante dele. O gradiente abaixo percorre esse mesmo
   trecho, no mesmo angulo do `.btn-primary`, para os dois botoes parecerem da
   mesma familia. */
.hero-euvou{
  background:linear-gradient(100deg,#0482DF 0%,#0BA5F2 55%,#00BAFB 100%);
  color:#fff;
  box-shadow:0 12px 40px -12px rgba(4,130,223,.85),inset 0 1px 0 rgba(255,255,255,.25);
}
.hero-euvou:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 52px -14px rgba(0,186,251,.95),inset 0 1px 0 rgba(255,255,255,.3);
}
/* A data mora dentro da capsula (ver `.kv-data`), fechando o lockup do cartaz. */

/* --- KV do hero --- */
.kv{position:relative;justify-self:center;width:min(100%,430px)}

/* quando a arte da composicao dos palestrantes entrar, ela assume o lugar
   do marcador (a capsula com o lockup) sem precisar apagar nada */
.kv-composicao{width:100%}
.kv:has(.kv-composicao) .kv-capsule{display:none}

.kv-capsule{position:relative;aspect-ratio:720/960}
.kv-clip{
  position:absolute;left:10.5%;right:10.5%;top:2.5%;bottom:2.5%;
  border-radius:999px;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 25%,#1B2FA8 0%,#120A46 45%,#0B0327 75%),#0B0327;
}
/* foto de ambiente dentro da capsula (drop-in: basta um <img> no .kv-clip) */
.kv-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* A capsula e SVG desde 02/09: `assets/capsula.svg`, reconstruida por amostragem
   de `_originais/kv/capsula-neon.png` — 265 bandas concentricas com a cor tirada
   do proprio bitmap, passo de 1px.
   NAO leva mais `mix-blend-mode:screen`. O PNG antigo trazia so o anel e dependia
   do blend para o brilho somar sobre o fundo; o SVG ja tem o miolo dentro dele, e
   com screen o desenho inteiro estouraria.
   Por isso o `.kv-clip` logo acima ficou coberto: virou a rede de seguranca que so
   aparece se o SVG nao carregar. Se algum dia entrar FOTO dentro da capsula
   (`.kv-clip img`), o miolo opaco do SVG vai tapar a foto — nessa hora troque por
   uma versao so do anel, com o centro transparente. */
.kv-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;
  z-index:3}
.kv-inner{
  position:absolute;inset:10% 13%;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.kv-inner .kv-logo{width:44%;margin-bottom:22px;opacity:.95}
/* `line-height:1` nos dois: o VAREJO herdava o 1.65 do body e o entrelinha
   sozinho abria uns 25px entre ele e o PROGRAMACAO. */
.kv-inner .kv-eyebrow{font-family:Gabarito,sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ciano);display:block;
  text-indent:.42em;line-height:1}
.kv-inner .kv-track{font-family:Gabarito,sans-serif;font-weight:900;
  font-size:clamp(2.2rem,5.4vw,3.1rem);display:block;margin-top:8px;line-height:1;
  text-shadow:0 0 34px rgba(90,140,255,.55)}
.kv-inner .kv-tri{width:22%;margin-top:18px;opacity:.95;
  filter:drop-shadow(0 0 12px rgba(123,47,247,.6))}

/* Data dentro da capsula, fechando o lockup como num cartaz: risquinho de
   gradiente, dia grande, horario e local. Medidas em % da largura da capsula
   (`cqw` nao da porque a capsula nao e container), entao tudo escala junto com
   `.kv{width}` — no celular a capsula cai para 340px e o bloco acompanha. */
.kv-inner .kv-data{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:20px;width:100%;
}
.kv-inner .kv-data::before{
  content:"";width:70%;height:2px;border-radius:2px;margin-bottom:13px;
  background:linear-gradient(90deg,transparent,var(--magenta),var(--ciano),transparent);
}
/* encolhe ate a largura da data — e essa largura que as duas linhas de baixo
   perseguem. O local fica FORA daqui de proposito: e mais largo que a data e
   puxaria a caixa junto. */
.kv-dt{display:inline-flex;flex-direction:column;align-items:stretch;gap:7px}
.kv-data .d{font-family:Gabarito,sans-serif;font-weight:900;line-height:1;
  font-size:clamp(1.6rem,3.6vw,2.2rem);letter-spacing:-.03em;white-space:nowrap}
.kv-data .d b{color:var(--ciano);font-weight:900}
.kv-data .d i{font-style:normal;color:var(--ciano)}
.kv-data .h{display:block;text-align:center;
  font-family:Gabarito,sans-serif;font-weight:800;letter-spacing:0;
  font-size:clamp(.82rem,1.85vw,1.25rem);text-transform:uppercase;line-height:1}
/* a bolinha em ciano ecoa os pontos do "10.OUT.26" logo acima; o traco do
   horario fica branco, junto com o resto da linha */
.kv-data .h i{font-style:normal;color:var(--ciano);margin-inline:.42em}
.kv-data .loc{font-family:Gabarito,sans-serif;font-weight:700;color:#C9C0E2;
  font-size:clamp(.6rem,1.25vw,.7rem);letter-spacing:.09em;text-transform:uppercase}

/* ---------- foto de ambiente como fundo sutil de secao ---------- */
.com-foto{position:relative;isolation:isolate}
.foto-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.foto-fundo::before{content:"";position:absolute;inset:0;background:inherit}
.foto-fundo::after{content:"";position:absolute;inset:0}

/* ambas entram como faixa no rodape da secao, esmaecendo para cima:
   presenca de "sala cheia" sem virar imagem de destaque */
.foto-plateia{
  inset:auto 0 0 0;background-position:center bottom;background-size:cover;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
}
.foto-plateia{
  background-image:url("ambiente-plateia-wide.jpg");
  height:min(42%,260px);opacity:.42;filter:saturate(.75);
}
/* o scrim vive no proprio container para nao clarear o texto */
.com-foto > .wrap{position:relative;z-index:1}
.escassez.com-foto{background:
  radial-gradient(60% 90% at 50% 0%,rgba(123,47,247,.38),transparent 70%),
  radial-gradient(50% 70% at 12% 100%,rgba(22,183,245,.2),transparent 70%),
  linear-gradient(180deg,rgba(10,3,32,.9),rgba(10,3,32,.82) 50%,rgba(10,3,32,.95))}

/* ---------- tira de ambiente ---------- */
.ambiente{margin-top:42px}
.ambiente-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ambiente-fotos img{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r2);
  border:1px solid var(--line);filter:saturate(.9) brightness(.92);
}
.ambiente figcaption{
  margin-top:14px;text-align:center;
  font-family:Gabarito,sans-serif;font-weight:700;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}

/* ---------- faixa das marcas no palco ---------- */
.palco-bar{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:10px 0;
}
.palco-bar .wrap{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:12px clamp(18px,3vw,34px);
}
.palco-label{
  font-family:Gabarito,sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ciano);
  padding-right:clamp(6px,1.4vw,14px);border-right:1px solid var(--line-2);
}
.palco-marcas{
  list-style:none;display:flex;align-items:center;flex-wrap:wrap;
  justify-content:center;gap:10px clamp(16px,2.6vw,30px);
}
.palco-marcas li{
  font-family:Gabarito,sans-serif;font-weight:800;font-size:clamp(.86rem,1.3vw,1rem);
  letter-spacing:-.01em;color:#E4DEF6;white-space:nowrap;
}

/* ---------- countdown ---------- */
.countdown-bar{
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(43,75,255,.18),rgba(123,47,247,.22),rgba(217,38,196,.16));
}
.countdown-in{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3.5vw,44px);
  flex-wrap:wrap;padding:24px 0;text-align:center}
.countdown-label{font-family:Gabarito,sans-serif;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;font-size:.74rem;color:#E7E1F7}
.countdown-label small{display:block;font-size:.68rem;letter-spacing:.02em;text-transform:none;
  color:var(--muted);font-weight:600;margin-top:5px}
.clock{display:flex;gap:clamp(8px,1.6vw,16px)}
.clock div{min-width:70px;background:rgba(5,1,15,.42);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 8px}
.clock b{font-family:Gabarito,sans-serif;font-weight:900;font-size:clamp(1.4rem,2.7vw,1.9rem);
  display:block;line-height:1;font-variant-numeric:tabular-nums}
.clock span{font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- bloco de dor ---------- */
.dor{background:
  radial-gradient(70% 90% at 12% 15%,rgba(43,75,255,.17),transparent 62%),
  radial-gradient(60% 80% at 90% 85%,rgba(217,38,196,.13),transparent 62%),var(--bg-2)}
.dor-in{max-width:760px;margin-inline:auto;text-align:center}
.dor .pergunta{
  font-family:Gabarito,sans-serif;font-weight:800;
  font-size:clamp(1.55rem,2.9vw,2.4rem);line-height:1.16;letter-spacing:-.02em;
  margin-bottom:24px;text-wrap:balance;
}
.dor .pergunta em{font-style:normal;color:var(--ciano)}
.dor p{color:var(--muted);max-width:56ch;margin-inline:auto}
.dor p + p{margin-top:14px}
.dor p strong{color:#fff;font-weight:700}
.dor .fecho{
  display:inline-block;margin-top:28px;padding:18px 26px;
  border:1px solid rgba(168,85,247,.45);border-radius:var(--r2);
  background:rgba(123,47,247,.12);
  font-family:Gabarito,sans-serif;font-weight:700;font-size:1.08rem;color:#fff;line-height:1.4;
  max-width:52ch;
}
.kv-poster{border-radius:var(--r3);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 40px 90px -40px rgba(123,47,247,.75)}

/* ---------- palestrantes ---------- */
/* No máximo 4 por linha, e a última linha centralizada quando não fecha 4.
   São 11 palestrantes: 4 + 4 + 3.

   É flexbox e não grid de propósito: grid não centraliza linha órfã — os 3
   últimos ficariam alinhados à esquerda com um buraco à direita. No flex,
   justify-content:center resolve sozinho.

   O flex-grow é 0 (o `0 1` do atalho). Com grow:1 os 3 da última linha
   esticariam para preencher e ficariam mais largos que os de cima. */
.people{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px;margin-top:44px;
}
/* CINCO por fileira, e nao quatro. Com 13 cards, quatro deixa um card SOZINHO
   na ultima fileira, que le como defeito. 13 e primo: nenhuma divisao fecha
   exata, e cinco e a unica que devolve um resto apresentavel (5+5+3, com a
   ultima fileira centrada lendo como fim de bloco).
   De quebra a secao encolheu de 2136px para 1376px, 36% menos rolagem.
   O preco e o card 21% mais estreito (222px contra 282px), igual para todos.
   ⚠ SE O NUMERO DE PALESTRANTES MUDAR, refazer esta conta: com 12 o certo
   volta a ser quatro por fileira, que fecha 4+4+4 com o card grande. */
.people > *{flex:0 1 calc((100% - 4*18px)/5)}
@media (max-width:900px){ .people > *{flex-basis:calc((100% - 2*18px)/3)} }
/* DUAS colunas até bem estreito, de propósito. Em uma coluna cada card fica
   com 589px de altura no celular — a cápsula sozinha tem 455px, mais de meia
   tela por pessoa. Vezes 11, a seção passava de 7.000px, 31% da página inteira.
   Em duas colunas ela cai para perto da metade disso.
   Só vai para uma coluna abaixo de 360px, onde dois cards ficariam estreitos
   demais para o nome caber. */
/* ⚠ O `flex-basis` tem que descontar o MESMO gap que está em `.people`.
   Escrevi `- 14px` enquanto o gap continuava 18px: 161+161+18 = 340 numa linha
   de 335, sobrava 5px, e a grade voltava para uma coluna sem avisar. Aqui o
   gap cai para 12px e a conta usa 12px — os dois valores andam juntos. */
@media (max-width:660px){
  /* No celular o card tem ~71px uteis para o nome e TODOS os doze quebram em
     duas linhas — ate "Samir Silva". O do Carlos, com quatro nomes, ia a
     quatro linhas e destoava. Aqui ele fica "Carlos Fensterseifer".
     Os nomes do meio somem por `display:none` em vez de existirem num segundo
     <h3>: assim o nome aparece UMA vez no documento, e nao duas versoes do
     mesmo para busca e leitor de tela desempatarem. */
  .person h3 .nome-meio{display:none}
  .people{gap:10px;justify-content:flex-start}
  .people > *{flex-basis:calc((100% - 2*10px)/3)}
  /* Só nos cargos que quebram em 3+ linhas. A classe é posta por JS, porque o
     CSS não consegue selecionar por quantidade de linhas.
     O `letter-spacing` cai mais que o corpo da fonte: em caixa alta, .13em
     espalha muito e é ele quem força a quebra. */
  .person .cargo.longo{font-size:.55rem;letter-spacing:.055em;line-height:1.42}

  /* No celular o retrato vem de assets/palestrantes-mobile/, já na proporção
     da cápsula (900x1343). Como a foto tem a mesma forma da pílula, ela
     preenche sem sobrar nada — daí `--foto:100%`, que NÃO corta os lados.

     No desktop continua 122% com a foto 4:5, que corta 18% da largura: aquele
     enquadramento fechado foi aprovado e não muda. É por isso que existem dois
     jogos de imagem — a cápsula é estreita demais para servir aos dois com um
     arquivo só. O troco é a pessoa aparecer ~16% menor aqui, o que a 76px de
     cápsula vale a pena para não decepar ombro.
     Gerar com: python ferramentas/gera-retratos-mobile.py

     Mexe na VARIÁVEL, não na `width`. A regra base é `.retrato-clip img
     {width:var(--foto,122%)}` e mora mais adiante no arquivo; redeclarar
     `width` aqui com a mesma especificidade perderia por ordem de origem —
     foi o que aconteceu na primeira tentativa. Custom property herda e não
     entra nessa disputa. */
  .retrato{--foto:100%}
}
/* `justify-content:center` (o padrão, no desktop) foi escolhido porque lá a
   linha órfã tem TRÊS cards e centralizar fica melhor que deixar um buraco à
   direita. No celular a órfã é UMA só, e centralizada ela cai entre as duas
   colunas — a Viviane ficava em x=107 enquanto todas as outras estavam em 20
   ou 194. Lê como desalinhamento. Por isso aqui é `flex-start`: a última
   encosta na coluna da esquerda e o ritmo da grade se mantém. */
@media (max-width:359px){ .people > *{flex-basis:100%} }
.person{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;transition:transform .3s,border-color .3s;
  display:flex;flex-direction:column;
}
.person:hover{transform:translateY(-5px);border-color:rgba(168,85,247,.5)}
/* Destaque de quem foi aberto por um link da programacao. Era `:target`, mas o
   Chrome nao recalcula o alvo quando a URL e limpa por `history.replaceState`
   (conferido) — o contorno ficava ate recarregar a pagina. Virou classe, ligada
   e desligada no JS. */
.person.destacado{border-color:var(--ciano);box-shadow:0 0 0 1px var(--ciano),0 0 34px -10px rgba(22,183,245,.8)}

/* Luz atrás da cápsula — é daqui que vem a profundidade do KV.
   A cápsula é semitransparente: sem nada atrás ela escurece o vazio e fica
   chapada. No cartaz ela cobre as faixas de luz do fundo, e é essa luz
   atravessando a camada que dá a leitura de vidro.
   assets/fundo-kv.webp é o próprio fundo do cartaz (elemento el01 do PDF),
   reduzido — são 5 KB porque é tudo degradê suave. */
.person::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("fundo-kv.webp") no-repeat;
  /* escala grande = cada card pega um trecho amplo e suave da aurora,
     em vez de um pedaço agitado */
  background-size:230% auto;
  background-position:26% 12%;   /* padrão; cada card sobrescreve abaixo */
  opacity:.62;
  /* apaga antes de chegar no nome, senão a luz disputa com o texto */
  -webkit-mask-image:linear-gradient(180deg,#000 0 52%,rgba(0,0,0,.35) 74%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0 52%,rgba(0,0,0,.35) 74%,transparent 88%);
}
.person{position:relative}
.person > *{position:relative;z-index:1}

/* Cada card pega um trecho diferente da aurora — mas NÃO escolhidos no olho.
   A aurora tem regiões escuras grandes; posições arbitrárias fazem a maioria
   cair no escuro e um ou outro pegar a pluma clara, e a variação passa a
   parecer defeito em vez de intenção.
   Estes 13 recortes foram medidos com ferramentas/escolhe-recortes-aurora.py:
   brilho numa faixa estreita (21,4 a 28,1) e matiz de 234° a 265°.
   Ao mexer em background-size ou na proporção do card, rodar o script de novo.
   AO MUDAR O NÚMERO DE CARDS TAMBÉM: as regras vão de 1 a N, e card sem regra
   cai na posição padrão. Ficaram 11 enquanto a página já tinha 13 (14/09).
   O script aceita a quantidade: `escolhe-recortes-aurora.py 13`. */
.people .person:nth-child(1)::before{background-position:0% 90%}
.people .person:nth-child(2)::before{background-position:0% 25%}
.people .person:nth-child(3)::before{background-position:25% 70%}
.people .person:nth-child(4)::before{background-position:0% 20%}
.people .person:nth-child(5)::before{background-position:20% 40%}
.people .person:nth-child(6)::before{background-position:0% 15%}
.people .person:nth-child(7)::before{background-position:0% 10%}
.people .person:nth-child(8)::before{background-position:0% 5%}
.people .person:nth-child(9)::before{background-position:20% 90%}
.people .person:nth-child(10)::before{background-position:30% 95%}
.people .person:nth-child(11)::before{background-position:55% 95%}
.people .person:nth-child(12)::before{background-position:75% 90%}
.people .person:nth-child(13)::before{background-position:100% 85%}

/* Retrato no formato do KV. A cápsula é o elemento original do cartaz,
   extraído do PDF do designer: assets/capsula-kv.webp (480x716).
   Ele NÃO é um contorno — é uma camada semitransparente (alfa 160/255 no
   miolo) que escurece o que está atrás e acrescenta um halo difuso.
   No KV ela fica ATRÁS da foto, então a ordem de pintura é:

     fundo (.retrato, background)  ->  halo (::before)  ->  foto (.retrato-clip)

   Isso é o oposto do erro antigo do capsula.png com mix-blend-mode:screen
   POR CIMA da foto, que clareava e desbotava a pessoa. Aqui é blend normal
   e por baixo, que é como o cartaz foi composto.

   A proporção 480/716 é a do próprio elemento; mudá-la o deforma. */
/* Sem fundo próprio, de propósito. A luz vem de .person::before, que fica
   ATRÁS deste elemento, e atravessa a cápsula semitransparente — é essa
   travessia que produz a leitura de vidro do KV. Qualquer background opaco
   aqui bloqueia a aurora e a cápsula volta a parecer chapada. */
.retrato{
  position:relative;aspect-ratio:480/716;margin:14px 14px 0;
}
/* Superfície da cápsula — brilho especular e espessura.

   NOTA, para não se tentar de novo: aqui havia um `backdrop-filter:blur(16px)`,
   na ideia de que o desfoque produziria refração de vidro. Não produz. A aurora
   atrás é um degradê liso cujas transições ocupam centenas de pixels; desfocar
   16px nela é imperceptível. Só o `saturate` tem efeito visível, e o blur
   custava GPU nos 11 cards em troca de nada.

   O que de fato dá a leitura de vidro é: (a) o brilho especular na quina de
   cima, como luz batendo na superfície; (b) a sombra interna na base, que dá
   espessura ao material; e principalmente (c) haver superfície VISÍVEL — ver
   a nota sobre --foto mais abaixo. */
.retrato::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:999px;
  -webkit-backdrop-filter:saturate(1.6);
  backdrop-filter:saturate(1.6);
  background:rgba(255,255,255,.045);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.34),
    inset 0 -34px 64px -22px rgba(4,1,14,.8);
}
/* o elemento do KV, por cima do vidro e atrás da foto */
.retrato::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  /* O `?v=` NAO e enfeite. O .htaccess manda o navegador guardar imagem por
     UM ANO, e o arquivo continua no mesmo endereco. Sem trocar a URL, quem
     ja visitou continua vendo a versao antiga para sempre — foi exatamente
     o que aconteceu quando corrigi o corte da direita e o usuario respondeu
     "continua exatamente igual". AO SUBSTITUIR QUALQUER IMAGEM NO LUGAR,
     subir este sufixo. */
  background:url("capsula-kv.webp?v=3") center/100% 100% no-repeat;
}
.person .retrato + .pinfo h3{margin-top:0}
/* recorte da foto. O desenho do KV é sólido de x=13 a x=697 em 709 px,
   ou seja, recuo de 1,8% de cada lado. */
.retrato-clip{
  position:absolute;left:1.8%;right:1.8%;top:0;bottom:0;
  border-radius:999px;overflow:hidden;z-index:3;
}
/* escurece a base da cápsula: é sobre ela que o nome se apoia */
.retrato-clip::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(4,1,14,.45) 80%,rgba(4,1,14,.9) 100%);
}

/* --foto controla quanto da cápsula a pessoa ocupa. Quanto MAIOR, menos
   superfície de vidro fica visível — a foto cobre o miolo. No cartaz o
   designer usa ~72%. */
.retrato-clip img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:var(--foto,122%);max-width:none;height:auto;z-index:2;
}


.pinfo{padding:0 16px 16px;margin-top:-4px;position:relative;z-index:5;
  display:flex;flex-direction:column;flex:1;text-align:center;align-items:center}
.person h3{
  font-family:Gabarito,sans-serif;font-weight:900;font-size:1rem;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--ciano);
  margin-bottom:2px;line-height:1.1;
  text-shadow:0 2px 10px rgba(5,1,15,.9);
  text-wrap:balance;   /* nomes de três palavras também quebravam mal */
}
.person .cargo{
  font-family:Gabarito,sans-serif;font-weight:700;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;color:#D9D2F0;line-height:1.5;
  /* Equilibra as linhas quando o cargo quebra. Sem isto o navegador enche a
     primeira linha e joga uma palavra sozinha na segunda — "COFUNDADOR E VP DE
     INTELIGÊNCIA E / MERCADO". O balance distribui o texto entre as linhas.
     Onde não houver suporte, o comportamento antigo continua valendo: é
     degradação limpa, não quebra nada. */
  text-wrap:balance;
}
/* slot fixo para a marca: todas as logos ocupam a mesma caixa e ficam
   ancoradas na base do card, entao alinham entre si mesmo com cargos de
   tamanhos diferentes */
.person .empresa{
  display:flex;align-items:center;justify-content:center;
  height:62px;margin-top:auto;padding-top:9px;box-sizing:content-box;
  font-family:Gabarito,sans-serif;font-weight:800;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano);
}
.person .empresa img{
  /* 112px, e nao 128: no card de 222px o teto antigo deixava o FGVcev e o
     Boticario ocupando 58% da largura, contra 45% no card de 282px. */
  max-height:100%;max-width:min(100%,112px);width:auto;height:auto;
  object-fit:contain;object-position:center;opacity:.95;
}
/* calibragem optica: logo de uma linha precisa ser mais baixo que logo
   empilhado para os dois parecerem do mesmo tamanho */
.person .empresa img.logo-dailus{max-height:25px}
.person .empresa img.logo-niq{max-height:31px}
.person .empresa img.logo-glamour{max-height:26px}
.person .empresa img.logo-rock{max-height:30px}
.person .empresa img.logo-wella{max-height:45px}
.person .empresa img.logo-gsc{max-height:40px}
.person .empresa img.logo-saorafael{max-height:48px}
.person .empresa img.logo-fgv{max-height:48px}
.person .empresa img.logo-brusque{max-height:62px}
/* Os dois sao lockup de UMA LINHA, entao caem na faixa baixa da calibragem,
   junto de Dailus (25) e NIQ (31), e nao na dos empilhados.
   O Harmonie chegou aqui pelo caminho errado: com altura 40 ele batia no teto
   de largura (128px) antes do de altura, ficando tao largo quanto o FGVcev e
   dominando a fileira. Limitar pela altura devolve o controle. */
.person .empresa img.logo-starlive{max-height:35px}
.person .empresa img.logo-harmonie{max-height:30px}
/* Lockup horizontal de uma linha, como o StarLive. Aqui quem limita e a
   LARGURA (128px), nao a altura: a proporcao e 4,5:1. */
/* +10%, a pedido dele. Quem limita este logo e a LARGURA, nao a altura: a
   proporcao e 4,5:1, entao ele batia nos 112px do teto geral e parava em 25px
   de altura. Subir o `max-height` nao faria nada; o que move e o teto proprio
   de largura. Dois +10% seguidos, a pedido dele: 112 -> 123 -> 135. */
.person .empresa img.logo-boticario{max-height:32px;max-width:min(100%,135px)}
/* --- lugar de palestrante ainda nao definido (`.em-breve`) ---
   Mesmo card de sempre: capsula, aurora e vidro continuam iguais, so a foto vira
   o vulto de `assets/palestrantes/em-breve.png` — a media do alfa dos 11
   retratos de celular, gerada por `ferramentas/gera-vulto-em-breve.py`. A
   intencao e ler como AUSENCIA dentro da mesma familia, e nao como card de
   outro tipo.
   O arquivo ja vem na proporcao da capsula (480x716), por isso aqui ele preenche
   o recorte inteiro em vez de usar o `--foto`, que existe para enquadrar pessoa.
   O nome sai do ciano: em ciano, "EM BREVE" lia como se fosse o nome de alguem. */
.person.em-breve .retrato-clip img{
  inset:0;left:0;width:100%;height:100%;transform:none;object-fit:cover;
}
.person.em-breve h3{color:#D6CFE9}
.person.aberta{display:flex;flex-direction:column;justify-content:center;text-align:center;
  border-style:dashed;padding:34px 24px;color:var(--dim)}
.person.aberta:hover{transform:none}
.person.aberta b{font-family:Gabarito,sans-serif;font-weight:800;color:#fff;display:block;margin-bottom:8px}
.person.aberta span{font-size:.85rem;line-height:1.5}

/* ---------- programacao ---------- */
.agenda{display:grid;gap:16px;margin-top:44px}
.bloco{
  display:grid;grid-template-columns:132px 1fr;gap:clamp(18px,2.6vw,34px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:clamp(22px,2.6vw,32px);
}
/* `.mini` marca os itens que nao sao palestra (credenciamento e abertura). Ele
   deixava esses dois com fundo transparente e borda tracejada, e no meio da
   lista isso lia como quadro de cor diferente, nao como hierarquia. Segue
   marcado no HTML, mas sem diferenca visual — a distincao ja vem do rotulo. */
.bloco .quando{border-right:1px solid var(--line);padding-right:18px}
.bloco .quando b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:1.15rem;
  color:var(--ciano);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bloco .quando small{display:block;color:var(--dim);font-size:.76rem;margin-top:4px;font-weight:600}
.bloco .tipo{
  display:inline-block;font-family:Gabarito,sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:12px;
}
/* todos os chips no mesmo padrao: pilula solida, muda so a cor */
.tipo-palestra{color:#fff;background:linear-gradient(100deg,var(--roxo),var(--magenta))}
.tipo-talk{color:#06121f;background:linear-gradient(100deg,var(--azul),var(--ciano-2))}
.tipo-neutro{color:#E4DEF6;background:rgba(255,255,255,.13)}
.tipo-dados{color:#06121f;background:linear-gradient(100deg,var(--ciano),#7FE0FF)}
.tipos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tipos .tipo{margin-bottom:0}
.bloco h3{font-size:clamp(1.1rem,1.9vw,1.42rem);font-weight:800;margin-bottom:14px}
.bloco ul{list-style:none;display:grid;gap:8px;margin-top:14px}
.bloco li{position:relative;padding-left:19px;font-size:.92rem;color:var(--muted);line-height:1.5}
.bloco li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--ciano)}
.bloco p{color:var(--muted);font-size:.93rem}
/* GRADE, não flex-wrap. Com flex os itens tomam a largura do próprio conteúdo
   (aqui variam de 149 a 320px), então a segunda linha começa em qualquer lugar
   e não bate com a de cima — lia como bagunça. Em colunas de largura igual as
   pessoas se alinham verticalmente entre as linhas.

   `auto-fit` colapsa as trilhas vazias, então o bloco com uma pessoa só ocupa
   a linha inteira em vez de deixar dois buracos. Em 949px (largura do .com no
   desktop) dá 3 colunas; encolhendo, cai sozinho para 2 e depois 1. */
.com{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:14px 24px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);
}
.com .quem{display:flex;align-items:center;gap:11px}
/* A bolinha é link para o card da pessoa, igual ao nome ao lado. O alvo de
   clique de 38px é pequeno, então o anel de foco/hover precisa ser visível. */
.com .av{
  width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:Gabarito,sans-serif;font-weight:900;font-size:.8rem;color:#fff;
  background:linear-gradient(140deg,var(--azul),var(--roxo) 55%,var(--magenta));
  box-shadow:0 0 0 0 rgba(92,210,255,0);
  transition:box-shadow .2s,transform .2s;
}
.com a.av{cursor:pointer}
.com a.av:hover,.com a.av:focus-visible{
  box-shadow:0 0 0 2px var(--ciano-2);transform:translateY(-1px);outline:none;
}
/* o avatar já vem quadrado e enquadrado no arquivo — object-position não muda
   nada aqui, e o recorte é feito no ffmpeg (ver CONTINUAR-AQUI.md) */
.com .av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.com .quem b{display:block;font-size:.88rem;font-weight:700;line-height:1.25}
.com .quem b a{color:inherit;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.com .quem b a:hover{color:var(--ciano-2);border-bottom-color:rgba(92,210,255,.6)}
.com .quem .med{
  font-style:normal;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano-2);
  border:1px solid rgba(22,183,245,.45);border-radius:999px;padding:2px 8px;margin-left:7px;
  vertical-align:middle;
}
.com .quem small{display:block;font-size:.74rem;color:var(--dim);line-height:1.35}
/* o rótulo ("Com" / "No palco") atravessa a grade inteira */
.com .rotulo{
  grid-column:1/-1;
  font-family:Gabarito,sans-serif;font-weight:800;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:-4px;
}
.nota{margin-top:26px;font-size:.83rem;color:var(--dim);text-align:center}

/* ---------- faixa de CTA ---------- */
.cta-strip{
  text-align:center;padding:clamp(44px,6vw,66px) 0;
  background:linear-gradient(100deg,rgba(43,75,255,.2),rgba(123,47,247,.26),rgba(217,38,196,.18));
  border-block:1px solid var(--line);
}
.cta-strip h2{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:800;margin-bottom:22px}

/* ---------- listas com check ---------- */
.check-list{list-style:none;display:grid;gap:14px;margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.check-list li{
  position:relative;padding:18px 22px 18px 58px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
.check-list li strong{display:block;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:1.02rem;margin-bottom:3px}
.check-list li span{color:var(--muted);font-size:.91rem;line-height:1.5}
.check-list li::before{
  content:"";position:absolute;left:20px;top:20px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(120deg,var(--roxo),var(--magenta));box-shadow:0 0 0 3px rgba(168,85,247,.16);
}
.check-list li::after{
  content:"";position:absolute;left:27px;top:26px;width:7px;height:11px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(42deg);
}
.perfil-list li::before{background:linear-gradient(120deg,var(--azul),var(--ciano));
  box-shadow:0 0 0 3px rgba(22,183,245,.16)}

/* ---------- experiencia glamour ---------- */
.exp{background:
  linear-gradient(180deg,transparent,rgba(123,47,247,.12) 45%,transparent),
  var(--bg-2);border-block:1px solid var(--line)}
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:18px;margin-top:42px}
.numero{text-align:center;padding:30px 18px;border-radius:var(--r2);
  background:var(--card);border:1px solid var(--line)}
.numero b{display:block;font-family:Gabarito,sans-serif;font-weight:900;
  font-size:clamp(2rem,4vw,2.8rem);line-height:1;margin-bottom:10px}
.numero span{color:var(--muted);font-size:.89rem}
.exp-fecho{margin-top:38px;text-align:center;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.3vw,1.6rem)}

/* ---------- ingresso ---------- */
.ingresso-in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(22px,3vw,36px);
  align-items:stretch;margin-top:44px}

/* Faixa da cortesia de expositor, abaixo da grade do ingresso.
   Fica DEPOIS do card de R$ 497, e nao antes, de proposito: e a mesma regra
   de 10/09 que tirou o preco do hero, so que ao contrario. Quem le isso ja
   viu o valor, entao a cortesia soa como excecao de quem tem contato, e nao
   como "tem de graca". A palavra "gratis" continua fora da pagina: quem
   anuncia a cortesia e a marca que convida. */
.cortesia{
  margin-top:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-radius:var(--r2);
  background:linear-gradient(180deg,rgba(123,47,247,.13),rgba(217,38,196,.05)),
             rgba(255,255,255,.02);
  padding:clamp(22px,3vw,30px) clamp(20px,4vw,40px);
  text-align:center;
}
.cortesia h3{
  font-family:Gabarito,sans-serif;font-weight:800;
  font-size:clamp(1.1rem,2.1vw,1.45rem);margin-bottom:10px;
}
.cortesia p{color:var(--muted);max-width:62ch;margin-inline:auto;font-size:.98rem}
.cortesia p b{color:var(--roxo-2);font-weight:700}
.ticket{
  position:relative;border-radius:var(--r3);padding:2px;
  background:linear-gradient(140deg,var(--ciano),var(--roxo) 45%,var(--magenta));
  box-shadow:0 40px 90px -40px rgba(148,51,234,.8);
}
.ticket-in{
  background:linear-gradient(170deg,#140A33,#0A0320 60%);
  border-radius:calc(var(--r3) - 2px);padding:clamp(28px,3.2vw,42px);height:100%;
  display:flex;flex-direction:column;
}
.ticket .tipo{font-family:Gabarito,sans-serif;font-weight:800;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ciano);margin-bottom:14px}
.ticket .preco{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ticket .preco b{font-family:Gabarito,sans-serif;font-weight:900;
  font-size:clamp(2.6rem,5.5vw,3.7rem);line-height:.9;letter-spacing:-.03em}
.ticket .preco i{font-style:normal;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:.95rem;color:var(--muted)}
.ticket .cond{color:var(--muted);font-size:.94rem;margin:10px 0 24px}
.ticket .cond strong{color:#fff;font-weight:700}
.ticket ul{list-style:none;display:grid;gap:11px;margin-bottom:28px}
.ticket li{position:relative;padding-left:29px;font-size:.94rem;color:#E4DEF6}
.ticket li::before{content:"";position:absolute;left:4px;top:.42em;width:7px;height:12px;
  border-right:2.5px solid var(--ciano);border-bottom:2.5px solid var(--ciano);transform:rotate(42deg)}
.ticket .acao{margin-top:auto}

.detalhes{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
  padding:clamp(28px,3.2vw,42px)}
.detalhes h3{font-size:1.3rem;font-weight:800;margin-bottom:24px}
.detalhes dl{display:grid;gap:19px}
.detalhes dt{font-family:Gabarito,sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ciano);margin-bottom:4px}
.detalhes dd{font-size:1rem;font-weight:600}
.detalhes dd small{display:block;color:var(--dim);font-weight:400;font-size:.86rem;margin-top:2px}
.detalhes .mapa{margin-top:26px}

/* ---------- creditos: patrocinador, inteligencia de mercado, realizacao ---------- */
.patro{border-top:1px solid var(--line);padding:clamp(46px,6vw,72px) 0}
.creditos{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
/* Rotulo ancorado no topo para os tres ficarem na mesma linha — antes o conteudo
   era centralizado na vertical e cada celula punha o titulo numa altura. O logo
   fica centralizado no que sobra (`margin-block:auto`). */
.credito{background:var(--bg);padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:14px}
.credito > :not(h2){margin-block:auto}
.credito h2{font-family:Gabarito,sans-serif;font-weight:800;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
/* A NielsenIQ e tipo, nao logo — precisa de corpo maior para pesar o mesmo que
   os logos vizinhos (215px do Grupo Santa Catarina, 168px da Glamour). */
.credito .marca{font-family:Gabarito,sans-serif;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.1}
.credito img{width:min(100%,168px)}
.credito .marca-logo{width:min(100%,215px)}
.marcas-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:290px}
.marcas-mini img{
  width:62px;height:38px;object-fit:contain;
  background:#fff;border-radius:7px;padding:4px 6px;
}
.credito.destaque{background:
  radial-gradient(90% 130% at 50% 0%,rgba(123,47,247,.26),transparent 70%),var(--bg)}
.credito.destaque .marca{font-size:clamp(1.5rem,3vw,2.15rem)}

/* ---------- faq ---------- */
.faq{max-width:800px;margin:42px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
  font-family:Gabarito,sans-serif;font-weight:700;font-size:1.03rem;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ciano);border-bottom:2px solid var(--ciano);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary{color:var(--ciano)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{color:var(--muted);font-size:.94rem;padding:0 20px 22px 0}

/* ---------- escassez / CTA final ---------- */
.escassez{
  position:relative;overflow:hidden;text-align:center;padding:clamp(64px,8.5vw,116px) 0;
  background:
    radial-gradient(60% 90% at 50% 0%,rgba(123,47,247,.42),transparent 70%),
    radial-gradient(50% 70% at 12% 100%,rgba(22,183,245,.22),transparent 70%),
    var(--bg-2);
}
.escassez .selo{margin-bottom:24px}
.escassez h2{font-size:clamp(2rem,4.8vw,3.2rem);font-weight:800;margin-bottom:20px}
.escassez p{color:var(--muted);max-width:56ch;margin:0 auto 12px;font-size:1.03rem}
.escassez p strong{color:#fff;font-weight:700}
.escassez .agora{font-family:Gabarito,sans-serif;font-weight:800;font-size:1.25rem;color:#fff;
  max-width:none;margin:24px auto 22px}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--line);padding:54px 0 28px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-in img{width:148px;margin-bottom:18px}
.foot-in p{color:var(--dim);font-size:.88rem;max-width:38ch}
.foot-in h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:14px}
.foot-in ul{list-style:none}
.foot-in a,.foot-in li{color:var(--muted);font-size:.88rem;line-height:2.1}
.foot-in a:hover{color:var(--ciano)}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:.81rem}
/* Os links legais herdam a cor apagada do rodape em vez do azul sublinhado
   do navegador: .foot-in a nao alcanca aqui, sao blocos irmaos. */
.foot-bottom a{color:var(--dim);text-decoration:none}
.foot-bottom a:hover{color:var(--ciano)}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- barra fixa mobile ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;text-align:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(5,1,15,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line);
}
.sticky-cta .btn{width:100%;padding:15px 20px}
.sticky-cta small{display:block;margin-top:6px;font-size:.68rem;color:var(--dim);font-weight:600}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn,.person,.bloco{transition:none}
}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .hero-in,.ingresso-in{grid-template-columns:1fr}
  /* Os 120px extras existiam so para o bloco de data nao cair em cima do selo
     quando a coluna virava uma so. Sem ele, sobra folga a toa. */
  .hero{padding-top:calc(var(--nav-h) + 40px)}
  .kv{width:min(100%,340px);margin-top:22px}
  .foot-in{grid-template-columns:1fr 1fr}
  .creditos{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Lado a lado nao cabem: "Garantir minha vaga" sozinho ja toma a linha util.
     Empilhados, os dois esticam igual — a distincao passa a ser a cor, o
     magenta contra o azul da capsula, e nao mais o tamanho. */
  .hero-actions .btn-lg{width:100%}
  /* A folga embaixo precisa caber a `.sticky-cta`, que é `position:fixed`.
     A barra mede 82px depois do enxugamento do mobile; 90 deixa 8px de folga.
     No iPhone a barra ainda soma `env(safe-area-inset-bottom)` (~34px), então a
     reserva soma também — senão o rodapé some atrás dela.
     AO MEXER NO TAMANHO DA BARRA, refazer esta conta. */
  body{font-size:16px;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  /* o menu já é overlay de tela cheia em qualquer largura */
  .nav{display:none}
  /* Sem a nav e sem o botao, sobram logo e risquinho — e o `space-between` jogava
     a logo na quina. Ela vai para o centro e o risquinho sai do fluxo, ancorado
     na direita, senao ele contaria como item e desalinharia o centro. */
  .header-in{position:relative;justify-content:center}
  .nav-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%)}
  .menu-col-lp{display:block}
  .header-cta{display:none}

  /* ---- enxugar o celular. Nada aqui vale no desktop. ----
     Os quatro blocos abaixo eram os que mais comiam tela vertical. */

  /* 1) Barra fixa do CTA: media 101px, ou 12% de um iPhone. O botao tinha o
        mesmo padding do desktop e a nota vinha em linha propria. */
  .sticky-cta{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
  .sticky-cta .btn{padding:12px 18px;font-size:.78rem}
  .sticky-cta small{margin-top:3px;font-size:.62rem}

  /* 2) Botao grande: com padding e corpo de desktop, "GARANTIR MINHA VAGA
        GRATUITA" quebrava em duas linhas e o botao ia a 97px de altura. O texto
        encurtou em 10/09 (a palavra gratuidade saiu da pagina), mas a regra
        fica: ela tambem segura "GARANTIR MINHA VAGA NO ENCONTRO" e qualquer
        rotulo futuro mais longo. */
  .btn-lg{padding:15px 18px;font-size:.85rem}

  /* 3) Numeros da feira: `auto-fit minmax(185px)` so cabe UMA coluna em 335px,
        entao os quatro cartoes empilhavam. Em duas colunas a altura cai pela
        metade, e 160px ainda comporta "de feira e congressos". */
  .numeros{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
  .numero{padding:18px 10px}
  .numero b{margin-bottom:4px}
  .numero span{font-size:.78rem}

  /* 4) Fotos de ambiente: `minmax(220px)` tambem colapsava para uma coluna, e
        as tres empilhadas somavam mais de 600px. Sao imagens de atmosfera, nao
        de informacao — funcionam pequenas. */
  .ambiente-fotos{grid-template-columns:1fr 1fr;gap:10px}

  /* ---- por que a capsula parecia "cortada" so no celular ----
     A margem do .retrato e FIXA em 14px. Num card de 282px isso e irrelevante e
     a capsula ocupa 90% da largura; num card de 105px come 29% e a capsula cai
     para 71%. Resultado: no desktop a borda da capsula quase encosta no card e
     passa despercebida; no celular ela fica sozinha no meio de um vao escuro, e
     o fim abrupto do brilho vira um corte evidente — principalmente a direita,
     onde o brilho e magenta claro contra card preto.

     Margem proporcional ao card devolve os mesmos 89% do desktop.

     Ainda assim sobrava uma faixa escura de poucos px onde o brilho terminava
     de repente — porque o desenho do KV NAO tem brilho externo: o anel vai a
     luz maxima a 9px da borda do arquivo, nos dois lados. Nao da para desvanecer
     o que nao existe, entao o halo e feito aqui, em CSS, preenchendo a faixa.
     Violeta como meio-termo entre o azul da esquerda e o magenta da direita. */
  .retrato{
    /* margem ASSIMETRICA de proposito: esquerda 0, direita 8. A capsula estava
       lendo deslocada para a direita, encostando na borda do card daquele lado
       e sobrando vao do outro. Ajustar aqui, nao no arquivo. */
    margin:6px 8px 0 0;
    border-radius:999px;
    box-shadow:0 0 9px 3px rgba(109,60,220,.55),0 0 20px 9px rgba(70,60,200,.26);
  }
  /* Logo da empresa mais perto do cargo. O bloco reserva 62px de altura no
     desktop; no card de 105px isso afasta demais. 42px sobe o logo em todos os
     cards, inclusive nos de cargo longo.
     O teto das imagens tambem cai: as alturas calibradas uma a uma (ate 62px na
     Farmacia Brusque, que e circular) estourariam um bloco de 42px. Este
     seletor tem a MESMA especificidade das regras por logo e vem depois no
     arquivo, entao ganha por ordem de origem. */
  .person .empresa{height:42px;padding-top:4px}
  .people .person .empresa img{max-height:36px}
  /* A Farmacia Brusque e CIRCULAR: no desktop ela vai a 62px enquanto os logos
     horizontais ficam entre 25 e 48, porque circulo precisa de mais altura para
     parecer do mesmo tamanho. O teto unico de 36px achatava so ela. Mantem a
     mesma proporcao aqui. */
  .people .person .empresa img.logo-brusque{max-height:46px}
  /* Logos curtos e cheios leem maiores que os alongados no card pequeno.
     Estes tres nao tinham batido no teto de 36px e ficaram desproporcionais. */
  .people .person .empresa img.logo-dailus{max-height:21px}
  .people .person .empresa img.logo-niq{max-height:26px}
  .people .person .empresa img.logo-rock{max-height:25px}
  .people .person .empresa img.logo-starlive{max-height:28px}
  .people .person .empresa img.logo-harmonie{max-height:23px}
  .people .person .empresa img.logo-boticario{max-height:22px}

  /* 5) Rodape: 748px, dos quais 520 eram as tres colunas empilhadas com 40px
        de intervalo. A marca segue em linha inteira; "Navegue" e "Contato"
        passam a dividir a linha. Conferido que o e-mail nao estoura. */
  footer{padding:32px 0 16px}
  .foot-in{grid-template-columns:1fr 1fr;gap:20px}
  .foot-in > :first-child{grid-column:1/-1}
  /* A barra so existe no celular, e mesmo la so a partir da segunda dobra: o JS
     poe `passou-dobra` na raiz quando a rolagem passa de uma tela. Na primeira
     dobra o hero ja tem o botao grande logo acima. */
  .sticky-cta{display:block;transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  html.passou-dobra .sticky-cta{transform:none}
  .btn-lg{width:100%}
  .palco-bar .wrap{flex-direction:column;gap:14px}
  .palco-label{border-right:0;padding-right:0}
  /* Lado a lado como no desktop. Empilhado, o selo virava um bloco de 100% de
     largura e roubava a atencao do titulo. Para os dois caberem em 320px de
     tela, a letra e o respiro encolhem — nao ha `flex-wrap` de socorro aqui, se
     nao couber ele quebra em duas linhas e volta a parecer bloco. */
  .selo span{padding:8px 12px;font-size:.62rem;letter-spacing:.08em}
  /* Cronometro subido para dentro do hero pelo JS (classe `no-hero`). Ali ele
     vira filho do `.wrap` e ficaria estreito; as margens negativas devolvem a
     largura de tela cheia, e o `overflow:hidden` do `.hero` segura o transbordo
     lateral. Sem isso a barra perderia a faixa que ela tem no resto da pagina. */
  .countdown-bar.no-hero{margin:26px calc(50% - 50vw) 0;width:100vw}
  .countdown-bar.no-hero .countdown-in{padding:12px 0;gap:8px}
  /* Folgas da coluna do hero apertadas para o cronometro caber INTEIRO na
     primeira dobra de um iPhone: com as barras do Safari sobram ~650px uteis,
     nao os 812 da tela. Cada linha abaixo tira alguns pixels; juntas, ~100.
     Ao mexer aqui, medir de novo em 390x650. */
  .hero{padding-top:calc(var(--nav-h) + 14px)}
  .hero-in{row-gap:10px}
  .hero .selo{margin-bottom:14px}
  .hero h1{margin-bottom:10px}
  .hero-claim{margin-bottom:10px}
  .hero-lead{line-height:1.5}
  .hero-actions{margin:18px 0 12px}
  .cta-note{margin-top:8px}
  .clock div{padding:6px}
  .bloco{grid-template-columns:1fr;gap:16px}
  .bloco .quando{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px}
  .bloco .quando b{display:inline-block;margin-right:10px}
  .bloco .quando small{display:inline-block;margin:0}
}