/* ONCOLAO — estilo principal (mobile-first) */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* garante que "hidden" esconda mesmo com display definido */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-lamina);
  color: var(--cor-tinta);
  font: 400 var(--t-18)/1.65 var(--fonte-texto);
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 var(--e-2); }
a { color: var(--cor-hematoxilina); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cor-gfp); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--cor-gfp); color: var(--cor-noite); padding: 10px 16px; border-radius: 99px; font-weight: 700; }
.pular:focus { top: 12px; }

.mono { font: 500 0.75rem/1.2 var(--fonte-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.container { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.secao { position: relative; padding: var(--e-6) 0; }
.secao--clara { background: var(--cor-lamina); }
.secao--fluor { background: var(--cor-noite); color: var(--cor-luz); }
.secao--fluor a { color: var(--cor-gfp); }
.rotulo { display: inline-flex; align-items: center; gap: 10px; color: var(--cor-eosina); }
.rotulo::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.secao--fluor .rotulo { color: var(--cor-gfp); }
.titulo-secao { font-size: var(--t-48); color: var(--cor-marinho-logo); margin: var(--e-2) 0 var(--e-3); max-width: 18ch; }
.secao--fluor .titulo-secao { color: var(--cor-luz); }
.titulo-secao em { font-style: italic; color: var(--cor-hematoxilina); }
.secao--fluor .titulo-secao em { color: var(--cor-lavanda); }
.lead { font-size: var(--t-22); color: var(--cor-texto-suave); max-width: 62ch; }
.secao--fluor .lead { color: var(--cor-dapi); }

/* Mira do microscópio nos cantos */
.mira { position: absolute; width: 26px; height: 26px; border: solid #9aa3c780; pointer-events: none; }
.mira--a { top: 20px; left: 20px; border-width: 1px 0 0 1px; }
.mira--b { top: 20px; right: 20px; border-width: 1px 1px 0 0; }
.mira--c { bottom: 20px; left: 20px; border-width: 0 0 1px 1px; }
.mira--d { bottom: 20px; right: 20px; border-width: 0 1px 1px 0; }
.secao--clara .mira { border-color: #5b3fa640; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: 12px 16px;
  transition: background .4s, box-shadow .4s, color .4s;
  color: var(--cor-luz);
}
.topo.solido { background: #0a0f24e6; backdrop-filter: blur(10px); box-shadow: 0 1px 0 #ffffff14; }
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marca img { width: 40px; height: 40px; border-radius: 50%; }
.marca b { font: 600 1.15rem/1 var(--fonte-titulo); letter-spacing: .02em; }
.marca small { display: block; color: var(--cor-dapi); font: 500 .62rem/1.3 var(--fonte-mono); letter-spacing: .14em; text-transform: uppercase; }
.topo__instagram { color: var(--cor-luz); border: 1px solid #c4b5f466; border-radius: 99px; padding: 8px 14px; font-size: var(--t-14); text-decoration: none; }
.topo__instagram:hover { border-color: var(--cor-gfp); color: var(--cor-gfp); }
.topo__links { display: flex; gap: 8px; }
.topo__entrar { background: var(--cor-lavanda); color: var(--cor-noite); border-color: var(--cor-lavanda); font-weight: 700; }
@media (max-width: 420px) { .topo__links .topo__instagram:first-child { display: none; } }

/* ---------- Revólver de objetivas ---------- */
.revolver {
  position: fixed; z-index: 30; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 6px; padding: 6px; border-radius: 99px;
  background: #0a0f24e0; backdrop-filter: blur(10px); box-shadow: 0 6px 30px #0006, inset 0 0 0 1px #ffffff1a;
}
.revolver a {
  display: grid; place-items: center; min-height: 44px; padding: 0 12px; border-radius: 99px;
  color: var(--cor-dapi); text-decoration: none; text-align: center; white-space: nowrap;
  font: 700 .78rem/1 var(--fonte-texto); transition: background .35s var(--ease), color .35s, box-shadow .35s;
}
.revolver a:hover { color: var(--cor-luz); }
.revolver a[aria-current="true"] { background: var(--cor-gfp); color: var(--cor-noite); box-shadow: var(--brilho); }

/* ---------- 4× Abertura ---------- */
.abertura {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #18235200 0%, #0a0f24 75%), radial-gradient(circle at 50% 42%, #1b2758, #0a0f24 70%);
  padding: 110px 0 120px;
}
#campo-celulas { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__conteudo { position: relative; z-index: 1; pointer-events: none; }
.abertura__conteudo a, .abertura__conteudo button { pointer-events: auto; }
.abertura__conteudo::before { content: ""; position: absolute; inset: -60px -40px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, #0a0f24e6 0%, #0a0f24a6 50%, transparent 78%); }
.abertura h1, .abertura__frase { text-shadow: 0 2px 18px #0a0f24; }
.abertura__dica { margin: var(--e-3) auto 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; color: var(--cor-gfp); letter-spacing: .06em; cursor: pointer; }
.abertura__dica:hover { background: #5ee6b014; }
.abertura__dica::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--cor-gfp); box-shadow: 0 0 10px var(--cor-gfp); animation: pulsar 1.8s ease-in-out infinite; }
@keyframes pulsar { 50% { transform: scale(1.6); opacity: .5; } }
.abertura__logo { width: 132px; height: 132px; margin: 0 auto var(--e-3); border-radius: 50%; box-shadow: 0 0 0 6px #c4b5f426, 0 0 60px #c4b5f455; }
.abertura h1 { font-size: var(--t-64); max-width: 14ch; margin: 0 auto var(--e-2); }
.abertura h1 em { font-style: italic; color: var(--cor-lavanda); }
.abertura__sigla { color: var(--cor-gfp); margin-bottom: var(--e-2); }
.abertura__frase { font-size: var(--t-22); color: var(--cor-dapi); max-width: 34ch; margin: 0 auto var(--e-4); }
.botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 99px;
  font-weight: 700; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s;
}
.botao--luz { background: var(--cor-gfp); color: var(--cor-noite) !important; box-shadow: var(--brilho); }
.botao--contorno { border: 1.5px solid #c4b5f499; color: var(--cor-luz) !important; }
.botao:hover { transform: translateY(-2px); }
.abertura__etiqueta { position: absolute; left: 50%; transform: translateX(-50%); bottom: 84px; color: var(--cor-dapi); white-space: nowrap; }

/* ---------- Modo exploração das células ---------- */
.abertura__conteudo { transition: opacity .6s var(--ease), filter .6s var(--ease); }
.abertura.explorando .abertura__conteudo { opacity: .12; filter: blur(2px); }
.abertura.explorando .abertura__conteudo a { pointer-events: none; }
.abertura.explorando .abertura__etiqueta { opacity: 0; }
.painel-celula {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 76px;
  max-height: 52%; overflow-y: auto; text-align: left;
  padding: 16px 18px 14px; border-radius: 22px;
  background: #0d1430f2; backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px #c4b5f433, 0 18px 50px #0009;
  color: var(--cor-luz); font-size: var(--t-16); line-height: 1.5;
  animation: painel-entra .45s var(--ease);
}
@keyframes painel-entra { from { opacity: 0; transform: translateY(16px); } }
.painel-celula__fechar {
  position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #ffffff12; color: var(--cor-luz); font-size: 24px; line-height: 1; cursor: pointer;
}
.painel-celula__topo { display: flex; align-items: center; gap: 14px; padding-right: 40px; margin-bottom: 10px; }
.painel-celula h3 { font-size: var(--t-22); color: var(--cor-luz); }
.painel-celula__tipo { color: var(--cor-gfp); margin: 0 0 6px; }
.painel-celula.tumoral .painel-celula__tipo { color: var(--cor-rosa-fluor); }
.painel-celula > p { color: #d5d0ea; margin: 0 0 10px; }
.anel { width: 72px; height: 72px; flex: 0 0 auto; }
.anel__seg { fill: none; stroke: #9aa3c74d; stroke-width: 9; transition: stroke .4s; }
.anel__seg.ativo { stroke: var(--cor-gfp); }
.painel-celula.tumoral .anel__seg.ativo { stroke: var(--cor-rosa-fluor); }
.anel__chk { fill: #ffd58a; stroke: #0d1430; stroke-width: 2; }
.anel__txt { fill: var(--cor-luz); font: 600 15px var(--fonte-mono); }
.painel-celula__onco { padding: 10px 12px; border-radius: 14px; background: #ffffff0d; margin-bottom: 10px; }
.painel-celula__onco.critico { background: #ffd58a14; box-shadow: inset 0 0 0 1px #ffd58a66; }
.painel-celula__onco .mono { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--cor-lavanda); margin: 0 0 6px; }
.painel-celula__onco p:last-child { margin: 0; color: var(--cor-luz); }
.painel-celula__critico { padding: 3px 8px; border-radius: 99px; background: #ffd58a; color: #3a2a00; font-size: .68rem; letter-spacing: .08em; }
.painel-celula__passos { display: flex; gap: 4px; margin-bottom: 12px; }
.painel-celula__passos span { flex: 1; height: 4px; border-radius: 4px; background: #ffffff1f; }
.painel-celula__passos span.feito { background: #5ee6b088; }
.painel-celula__passos span.agora { background: var(--cor-gfp); box-shadow: 0 0 8px var(--cor-gfp); }
.painel-celula.tumoral .painel-celula__passos span.agora { background: var(--cor-rosa-fluor); box-shadow: 0 0 8px var(--cor-rosa-fluor); }
.painel-celula__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.painel-celula__acoes button {
  min-height: 42px; padding: 0 16px; border-radius: 99px; cursor: pointer; font: 700 var(--t-14) var(--fonte-texto);
  border: 1.5px solid #c4b5f499; background: transparent; color: var(--cor-luz);
}
.painel-celula__acoes button:first-child { background: var(--cor-gfp); border-color: var(--cor-gfp); color: var(--cor-noite); }
#pc-tumoral { border-color: #ff8fc0aa; color: #ffc2dc; }
.painel-celula__fonte { font-size: .75rem; color: var(--cor-dapi) !important; margin: 10px 0 0 !important; }
@media (min-width: 700px) {
  .painel-celula { left: 28px; right: auto; bottom: 28px; width: 380px; max-height: calc(100% - 120px); }
}
@media (min-width: 1000px) {
  .painel-celula { left: 40px; bottom: 40px; width: 400px; }
}

/* ---------- Efeito foco ---------- */
.js .foco { filter: blur(7px); opacity: .25; transform: translateY(14px); transition: filter 1.1s var(--ease), opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .foco.nitido { filter: none; opacity: 1; transform: none; }

/* ---------- Iluminação fluorescente acendendo ---------- */
.secao--fluor::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, #5ee6b014, transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, #ff8fc012, transparent 70%);
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.secao--fluor.acesa::before { opacity: 1; }

/* ---------- 10× A Liga ---------- */
.objetivo {
  position: relative; margin: var(--e-4) 0; padding: var(--e-4) var(--e-3);
  background: var(--cor-branco); border-radius: var(--raio-cartao); box-shadow: var(--sombra-clara);
  border: 1px solid var(--cor-lavanda-claro);
}
.objetivo blockquote { margin: 0; font: italic 400 var(--t-28)/1.35 var(--fonte-titulo); color: var(--cor-marinho-logo); }
.objetivo cite { display: block; margin-top: var(--e-2); font-style: normal; color: var(--cor-texto-suave); }
.duas-colunas { display: grid; gap: var(--e-4); }
.duas-colunas p { color: var(--cor-texto-suave); }
.eixos { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: var(--e-3); }
.celula {
  position: relative; background: var(--cor-branco); text-align: center;
  padding: 48px 32px 44px; border-radius: var(--raio-celula);
  border: 1.5px solid var(--cor-lavanda-claro); box-shadow: var(--sombra-clara);
  transition: border-radius 1.4s var(--ease), transform .5s var(--ease), box-shadow .5s;
}
.celula:hover { border-radius: var(--raio-celula-2); transform: translateY(-6px); box-shadow: 0 18px 46px #5b3fa62e; }
.nucleo { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.nucleo svg { width: 28px; height: 28px; }
.nucleo--h { background: radial-gradient(circle at 35% 35%, #8b6fd6, var(--cor-hematoxilina)); }
.nucleo--e { background: radial-gradient(circle at 35% 35%, #d76b9c, var(--cor-eosina)); }
.nucleo--g { background: radial-gradient(circle at 35% 35%, #49c79a, #17714f); }
.celula h3 { font-size: var(--t-28); color: var(--cor-hematoxilina); margin-bottom: 10px; }
.celula p { color: var(--cor-texto-suave); margin: 0; }

/* ---------- 40× Números ---------- */
.numeros { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
.numero { padding: var(--e-3); border-radius: var(--raio-cartao); background: var(--cor-noite-2); box-shadow: inset 0 0 0 1px #ffffff12; }
.numero b { display: block; font: 600 var(--t-64)/1 var(--fonte-titulo); color: var(--cor-gfp); text-shadow: 0 0 24px #5ee6b055; }
.numero:nth-child(2) b { color: var(--cor-rosa-fluor); text-shadow: 0 0 24px #ff8fc055; }
.numero:nth-child(3) b { color: var(--cor-lavanda); text-shadow: 0 0 24px #c4b5f455; }
.numero span { color: var(--cor-dapi); }

/* ---------- 40× Cronograma em hélice ---------- */
.proximo {
  margin: var(--e-4) 0; padding: var(--e-3); border-radius: var(--raio-cartao);
  background: linear-gradient(135deg, #5ee6b01f, #c4b5f414); box-shadow: inset 0 0 0 1px #5ee6b055;
}
.proximo .mono { color: var(--cor-gfp); }
.proximo h3 { font-size: var(--t-36); margin: 10px 0 6px; }
.proximo p { color: var(--cor-dapi); margin: 0; }
.filtros { display: flex; gap: 8px; margin-bottom: var(--e-3); flex-wrap: wrap; }
.filtros button {
  min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid #9aa3c766; background: transparent;
  color: var(--cor-luz); font: 700 var(--t-14) var(--fonte-texto); cursor: pointer;
}
.filtros button[aria-pressed="true"] { background: var(--cor-lavanda); color: var(--cor-noite); border-color: var(--cor-lavanda); }
.helice { position: relative; padding-left: 64px; }
.helice__svg { position: absolute; left: 0; top: 0; width: 56px; height: 100%; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.par-base {
  position: relative; padding: var(--e-2) var(--e-3); border-radius: 16px;
  background: var(--cor-noite-2); box-shadow: inset 0 0 0 1px #ffffff10;
  transition: box-shadow .4s, transform .4s var(--ease);
}
.par-base::before {
  content: ""; position: absolute; left: -38px; top: 26px; width: 30px; height: 2px;
  background: linear-gradient(90deg, var(--cor-gfp), var(--cor-rosa-fluor));
}
.par-base:hover { box-shadow: inset 0 0 0 1px #5ee6b066, var(--brilho); transform: translateX(4px); }
.par-base__data { color: var(--cor-gfp); }
.par-base h3 { font-size: var(--t-22); margin: 6px 0 4px; }
.par-base p { color: var(--cor-dapi); margin: 0; font-size: var(--t-16); }
.par-base__tipo { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 99px; background: #c4b5f41f; color: var(--cor-lavanda); font-size: .8rem; }
.par-base.passado { opacity: .62; }
.par-base.passado .par-base__data::after { content: " · data já passou"; color: var(--cor-dapi); }
.par-base.destaque { box-shadow: inset 0 0 0 1.5px var(--cor-rosa-fluor); }
.par-base.e-proximo { box-shadow: inset 0 0 0 1.5px var(--cor-gfp), var(--brilho); }

/* ---------- 100× Pessoas ---------- */
.grupo-titulo { font-size: var(--t-28); color: var(--cor-hematoxilina); margin: var(--e-5) 0 var(--e-3); }
.pessoas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-3) var(--e-2); }
.pessoa { text-align: center; }
.pessoa__celula {
  position: relative; width: 112px; height: 112px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: var(--raio-celula); background: radial-gradient(circle at 50% 50%, #fff 0 54%, var(--cor-lavanda-claro) 55%);
  border: 1.5px solid #c4b5f4; transition: border-radius 1.4s var(--ease), transform .5s var(--ease);
}
.pessoa__celula span {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 35%, #8b6fd6, var(--cor-hematoxilina)); color: #fff;
  font: 600 1.15rem var(--fonte-titulo);
}
.pessoa:nth-child(3n+2) .pessoa__celula span { background: radial-gradient(circle at 35% 35%, #d76b9c, var(--cor-eosina)); }
.pessoa:nth-child(3n) .pessoa__celula span { background: radial-gradient(circle at 35% 35%, #4f74a8, var(--cor-marinho-logo)); }
.pessoa:hover .pessoa__celula { border-radius: var(--raio-celula-2); transform: scale(1.05) rotate(-4deg); }
.pessoa h3 { font: 700 var(--t-16)/1.3 var(--fonte-texto); margin: 0 0 2px; }
.pessoa p { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-14); }
.ligantes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ligantes li { padding: 8px 16px; border-radius: 99px; background: var(--cor-branco); border: 1px solid var(--cor-lavanda-claro); color: var(--cor-texto-suave); }

/* ---------- Lâminas (documentos) ---------- */
.laminas { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: grid; gap: var(--e-3); }
.lamina {
  display: grid; grid-template-columns: 96px 1fr; align-items: stretch; overflow: hidden; min-height: 150px;
  border-radius: 10px; text-decoration: none; color: var(--cor-tinta);
  background: linear-gradient(115deg, #ffffffe6 0%, #f1edfbcc 55%, #ffffffee 100%);
  box-shadow: 0 1px 0 #fff inset, 0 10px 30px #5b3fa622, 0 0 0 1px #5b3fa61f;
  transition: transform .45s var(--ease), box-shadow .45s;
}
.lamina:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 1px 0 #fff inset, 0 18px 44px #5b3fa633, 0 0 0 1px #5b3fa633; }
.lamina__etiqueta {
  display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg);
  background: repeating-linear-gradient(0deg, #fbf3d9, #fbf3d9 22px, #f3e7c0 23px); color: #5a4a12;
}
.lamina__corpo { position: relative; padding: var(--e-3); }
.lamina__corpo::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 74px; height: 74px; transform: translateY(-50%);
  border-radius: var(--raio-celula); background: radial-gradient(circle at 45% 45%, #a8326a55 0 18%, #e6defa 20%, #c9b8f2aa 60%, transparent 62%);
  opacity: .8;
}
.lamina h3 { font-size: var(--t-22); color: var(--cor-marinho-logo); margin-bottom: 6px; padding-right: 90px; }
.lamina p { color: var(--cor-texto-suave); margin: 0; font-size: var(--t-16); padding-right: 90px; }
.lamina .mono { color: var(--cor-eosina); display: block; margin-top: 12px; }

/* ---------- Contato / rodapé ---------- */
.contato { text-align: center; }
.contato .titulo-secao { margin-inline: auto; }
.contato .lead { margin-inline: auto; }
.fita { width: 84px; height: 124px; margin: 0 auto var(--e-3); }
.fita path { stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 2.6s var(--ease); }
.fita.desenhada path, .no-js .fita path { stroke-dashoffset: 0; }
.rodape { background: var(--cor-noite); color: var(--cor-dapi); padding: var(--e-4) 0 120px; border-top: 1px solid #ffffff12; font-size: var(--t-14); }
.rodape__grade { display: grid; gap: var(--e-3); }
.rodape strong { color: var(--cor-luz); }
.aviso { padding: var(--e-2); border-radius: 12px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff14; }
.caranguejo { width: 72px; height: 54px; color: var(--cor-lavanda); }

/* ---------- Telas maiores ---------- */
@media (min-width: 700px) {
  .topo { padding: 16px 28px; }
  .duas-colunas { grid-template-columns: 1fr 1fr; }
  .eixos { grid-template-columns: repeat(3, 1fr); }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .laminas { grid-template-columns: 1fr 1fr; }
  .rodape__grade { grid-template-columns: 2fr 3fr; align-items: center; }
  .objetivo { padding: var(--e-5); }
}
@media (min-width: 1000px) {
  .revolver {
    left: auto; right: 22px; bottom: auto; top: 50%; transform: translateY(-50%);
    flex-direction: column; border-radius: 40px;
  }
  .revolver a { min-height: 42px; padding: 0 16px; font-size: .82rem; }
  .helice { padding-left: 0; }
  .helice__svg { left: 50%; width: 70px; transform: translateX(-50%); }
  .linha-tempo { grid-template-columns: 1fr 1fr; column-gap: 120px; }
  .par-base:nth-child(odd) { grid-column: 1; text-align: right; }
  .par-base:nth-child(even) { grid-column: 2; margin-top: 70px; }
  .par-base:nth-child(odd)::before { left: auto; right: -52px; }
  .par-base:nth-child(even)::before { left: -52px; }
  .par-base:nth-child(odd):hover { transform: translateX(-4px); }
  .rodape { padding-bottom: var(--e-4); }
  .abertura__etiqueta { bottom: 32px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .js .foco { filter: none; opacity: 1; transform: none; }
  .abertura__dica::before { animation: none; }
  .fita path { stroke-dashoffset: 0; }
}

/* ---------- 60× Notícias ---------- */
.noticias { display: grid; gap: var(--e-2); margin-top: var(--e-4); }
.noticia {
  display: block; padding: var(--e-3); border-radius: var(--raio-cartao); text-decoration: none; color: var(--cor-tinta);
  background: var(--cor-branco); border: 1px solid var(--cor-lavanda-claro); box-shadow: var(--sombra-clara);
  transition: transform .4s var(--ease), box-shadow .4s;
}
a.noticia:hover { transform: translateY(-4px); box-shadow: 0 18px 44px #5b3fa633; }
.noticia h3 { font-size: var(--t-22); color: var(--cor-marinho-logo); margin: 8px 0; }
.noticia p { color: var(--cor-texto-suave); font-size: var(--t-16); margin: 0 0 10px; }
.noticia__meta { color: var(--cor-eosina) !important; margin: 0 !important; }
.noticia__selo { background: var(--cor-hematoxilina); color: #fff; padding: 3px 8px; border-radius: 99px; }
.noticia--liga { border: 2px solid var(--cor-hematoxilina); }
.noticia__ler { font-weight: 700; color: var(--cor-hematoxilina); }
.noticias__vazio, .noticias__nota { color: var(--cor-texto-suave); font-size: var(--t-14); }
.noticias__nota { margin-top: var(--e-3); max-width: 70ch; }

/* ---------- Camiseta ---------- */
.camiseta { display: grid; gap: var(--e-4); align-items: center; }
.camiseta__vitrine { margin: 0; text-align: center; }
.camiseta__foto { width: min(100%, 420px); margin: 0 auto; border-radius: var(--raio-cartao); box-shadow: 0 20px 50px #0008; }
.camiseta__vitrine figcaption { color: var(--cor-dapi); margin-top: 12px; }
.camiseta h3 { font-size: var(--t-28); margin: 0 0 8px; }
.camiseta__desc { white-space: pre-line; }
.botoes--esquerda { justify-content: flex-start; margin-top: var(--e-3); }

/* ---------- Contato, suporte e dúvidas ---------- */
.contato__grade { display: grid; gap: var(--e-4); margin-top: var(--e-4); text-align: left; }
.contato__form { padding: var(--e-3); border-radius: var(--raio-cartao); background: var(--cor-noite-2); box-shadow: inset 0 0 0 1px #ffffff14; }
.contato .campo { display: grid; gap: 6px; margin-bottom: var(--e-2); }
.contato .campo label { font-weight: 700; }
.contato .campo small { color: var(--cor-dapi); font-size: var(--t-14); }
.contato .campo input, .contato .campo select, .contato .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #9aa3c766;
  background: var(--cor-noite); color: var(--cor-luz); font: 400 var(--t-16)/1.4 var(--fonte-texto);
}
.contato .campo textarea { min-height: 130px; resize: vertical; }
.contato .campo input:focus, .contato .campo select:focus, .contato .campo textarea:focus { outline: 3px solid var(--cor-gfp); outline-offset: 1px; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contato .checar { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--e-2); font-size: var(--t-14); color: var(--cor-dapi); }
.contato .checar input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--cor-gfp); }
.contato .botao { border: 0; cursor: pointer; font-size: var(--t-16); }
.contato .msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.contato .msg--erro { color: #ff9c9c; }
.contato .msg--ok { color: var(--cor-gfp); }
.contato__lado h3 { font-size: var(--t-22); margin-bottom: 12px; }
.contato__lado details { border-bottom: 1px solid #ffffff18; padding: 12px 0; }
.contato__lado summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.contato__lado details p { color: var(--cor-dapi); margin: 10px 0 0; }
.confiavel { margin-top: var(--e-3); padding: var(--e-3); border-radius: var(--raio-cartao); background: #5ee6b012; box-shadow: inset 0 0 0 1px #5ee6b044; }
.confiavel ul { margin: 0; padding-left: 20px; color: var(--cor-luz); }
.confiavel li { margin: 6px 0; }

/* ---------- Rodapé ---------- */
.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 18px; grid-column: 1 / -1; }
.rodape__links a { color: var(--cor-lavanda); }
.rodape__copia { grid-column: 1 / -1; margin: 0; font-size: .8rem; }

@media (min-width: 700px) {
  .noticias { grid-template-columns: repeat(2, 1fr); }
  .camiseta { grid-template-columns: 1fr 1.1fr; }
}
@media (min-width: 1000px) {
  .noticias { grid-template-columns: repeat(3, 1fr); }
  .contato__grade { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- Vitrine da camiseta (frente/costas com giro 3D) ---------- */
.camiseta__palco { position: relative; width: min(100%, 440px); margin: 0 auto; perspective: 1400px; }
.camiseta__palco::before {
  content: ""; position: absolute; inset: 8% 4% 2%; border-radius: 50%;
  background: radial-gradient(circle, #c4b5f455 0%, #5ee6b01f 45%, transparent 70%); filter: blur(10px);
}
.camiseta__giro {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  transform-style: preserve-3d; transition: transform 1s var(--ease);
}
.camiseta__giro.costas { transform: rotateY(180deg); }
.camiseta__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.camiseta__face img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px #0009); transition: transform .5s var(--ease); }
.camiseta__face--costas { transform: rotateY(180deg); }
.camiseta__giro:hover .camiseta__face img { transform: scale(1.03) translateY(-4px); }
.camiseta__lados { display: inline-flex; gap: 4px; padding: 4px; margin-top: 10px; border-radius: 99px; background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff1c; }
.camiseta__lados button {
  min-height: 42px; min-width: 96px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent;
  color: var(--cor-luz); font: 700 var(--t-14) var(--fonte-texto); cursor: pointer;
}
.camiseta__lados button[aria-pressed="true"] { background: #bcd6f4; color: var(--cor-marinho-logo); }
.camiseta__vitrine figcaption a { color: var(--cor-lavanda); }
.camiseta__info { color: var(--cor-dapi); }
.camiseta__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.camiseta__galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .camiseta__giro { transition: none; } }

/* deixa espaço para o revólver de objetivas no desktop */
@media (min-width: 1000px) { .container { width: min(100% - 200px, var(--largura)); } }

/* Notícias: 4 manchetes + "Leia mais" */
.noticias--manchetes .noticia:first-child { grid-column: 1 / -1; }
.noticias--manchetes .noticia:first-child h3 { font-size: var(--t-28); }
.noticias__mais { margin-top: var(--e-3); }
.noticias__mais-botao {
  min-height: 48px; padding: 0 22px; border-radius: 99px; border: 1.5px solid var(--cor-hematoxilina);
  background: #fff; color: var(--cor-hematoxilina); font: 700 var(--t-16) var(--fonte-texto); cursor: pointer;
}
.noticias__mais-botao:hover { background: var(--cor-lavanda-claro); }
.noticias__lista { list-style: none; padding: 0; margin: var(--e-2) 0 0; display: grid; gap: 4px; }
.noticias__lista li a {
  display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--cor-tinta);
  background: var(--cor-branco); border: 1px solid var(--cor-lavanda-claro);
}
.noticias__lista li a:hover { border-color: var(--cor-hematoxilina); }
.noticias__lista b { font: 600 var(--t-18)/1.3 var(--fonte-titulo); color: var(--cor-marinho-logo); }
.noticias__lista span { font-size: var(--t-14); color: var(--cor-eosina); }
@media (min-width: 700px) { .noticias--manchetes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Brilho fluorescente ao tocar/passar ---------- */
.brilho-camada { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.brilho-camada::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(220px circle at var(--bx, 50%) var(--by, 50%), var(--brilho-cor), transparent 70%);
}
.brilho-ativo > .brilho-camada::before { opacity: 1; }
.brilho--verde { --brilho-cor: #5ee6b033; --brilho-onda: #5ee6b066; }
.brilho--lavanda { --brilho-cor: #8b6fd626; --brilho-onda: #8b6fd640; }
.brilho-ativo.brilho--verde { box-shadow: 0 0 0 1px #5ee6b055, 0 0 26px #5ee6b033; }
.brilho-ativo.brilho--lavanda { box-shadow: 0 0 0 1px #8b6fd655, 0 10px 34px #8b6fd633; }
.brilho-onda {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--brilho-onda) 0%, transparent 60%);
  transform: scale(0); opacity: 1; animation: onda-brilho .75s var(--ease) forwards;
}
@keyframes onda-brilho { to { transform: scale(1); opacity: 0; } }

/* ---------- Mascote caranguejo no rodapé ---------- */
.rodape { position: relative; }
.mascote-trilha { position: fixed; left: 0; right: 0; bottom: 70px; height: 70px; pointer-events: none; z-index: 25; }
@media (min-width: 1000px) { .mascote-trilha { bottom: 6px; right: 110px; } }
.mascote { width: 80px; height: 58px; left: -40px; }
.mascote-esconder, .mascote-mostrar {
  display: block; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--cor-lavanda); font: 700 .78rem var(--fonte-texto); text-decoration: underline;
}
.mascote-mostrar { display: inline; margin: 0; font-size: inherit; }
.mascote-pos { position: absolute; left: 0; bottom: 0; width: 0; height: 0; will-change: transform; }
.mascote {
  position: absolute; left: -46px; bottom: -6px; width: 92px; height: 66px; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; border-radius: 40%; filter: drop-shadow(0 6px 10px #0008);
}
.mascote svg { width: 100%; height: 100%; overflow: visible; }
.mascote:focus-visible { outline: 3px solid var(--cor-gfp); outline-offset: 4px; }
.mascote .brilho-camada { border-radius: 50%; }
.mascote__perna { transform-box: fill-box; transform-origin: right top; }
.mascote__perna.perna-d { transform-origin: left top; }
.mascote__garra { transform-box: fill-box; }
.mascote__garra--e { transform-origin: right bottom; }
.mascote__garra--d { transform-origin: left bottom; }
.mascote__olho { transform-box: fill-box; transform-origin: center bottom; }
.mascote__pupila { transition: transform .15s; }
.mascote__corpo-todo { transform-box: fill-box; transform-origin: center bottom; }
.mascote.andando .perna-a { animation: perna-anda .26s ease-in-out infinite alternate; }
.mascote.andando .perna-b { animation: perna-anda .26s ease-in-out infinite alternate-reverse; }
.mascote.andando .mascote__corpo-todo { animation: corpo-bamboleia .26s ease-in-out infinite alternate; }
.mascote.acenando .mascote__garra--d { animation: garra-acena .32s ease-in-out 4 alternate; }
.mascote.acenando .mascote__garra--e { animation: garra-abre .32s ease-in-out 2 alternate; }
.mascote.piscando .mascote__olho { animation: olho-pisca .2s ease-in-out; }
.mascote.pulando { animation: mascote-pula .7s cubic-bezier(.3, 1.6, .5, 1); }
.mascote:hover .mascote__garra--d { transform: rotate(-12deg); }
@keyframes perna-anda { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes corpo-bamboleia { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2px) rotate(2deg); } }
@keyframes garra-acena { from { transform: rotate(0); } to { transform: rotate(-32deg); } }
@keyframes garra-abre { from { transform: rotate(0); } to { transform: rotate(18deg); } }
@keyframes olho-pisca { 50% { transform: scaleY(.1); } }
@keyframes mascote-pula { 40% { transform: translateY(-34px) rotate(-6deg); } 70% { transform: translateY(0) scale(1.08, .92); } }
.mascote-balao {
  position: absolute; bottom: 70px; left: 0; width: min(260px, 74vw); margin: 0; padding: 12px 14px;
  border-radius: 16px; background: #121a3af7; color: var(--cor-luz); font-size: var(--t-14); line-height: 1.45;
  box-shadow: inset 0 0 0 1.5px #c4b5f466, 0 14px 34px #000a; pointer-events: auto;
  animation: balao-entra .35s var(--ease);
}
.mascote-balao small { display: block; margin-top: 6px; color: var(--cor-gfp); font: 500 .68rem var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; }
.mascote-balao.some { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
@keyframes balao-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.mascote-confete {
  position: absolute; left: -3px; bottom: 30px; width: 7px; height: 12px; border-radius: 2px; pointer-events: none;
  animation: confete-voa 1.1s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes confete-voa { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mascote, .mascote * { animation: none !important; }
}