/* Maison: galeria escura de ateliê. Imagens de ponta a ponta, interface de máquina de escrever (Courier Prime),
   títulos em grotesca (Archivo). Preto é o padrão; o claro é opcional. Sem cor de destaque. */
:root {
  --parede: #0b0b0b;
  --papel: #151515;
  --tinta: #ecebe6;
  --grafite: #b8b6b0;
  --poeira: #8c8a85;
  --fio: #242424;
  --sombra: rgb(0 0 0 / .6);
  --foto-filtro: brightness(.94);
  --mono: "Courier Prime", "Courier New", monospace;
  --sans: "Archivo", system-ui, sans-serif;
  --saida: cubic-bezier(0.16, 1, 0.3, 1);
  --suave: cubic-bezier(0.45, 0.05, 0.2, 1); /* hover: começo macio, fim assentado; --saida dispara rápido demais para algo que o mouse provoca */
  --margem: clamp(16px, 2.8vw, 40px);
  --topo: 58px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --parede: #fcfcfc; --papel: #f1f1ef; --tinta: #121212; --grafite: #3c3c3a; --poeira: #6a6a66;
  --fio: #e3e3e0; --sombra: rgb(0 0 0 / .16); --foto-filtro: brightness(1); color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--fio) var(--parede); scrollbar-width: thin; }
body {
  margin: 0; background: var(--parede); color: var(--tinta);
  font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--tinta); transition: background-color .45s var(--saida), color .45s var(--saida);
}
::selection { background: var(--tinta); color: var(--parede); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
html { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--tinta); outline-offset: 4px; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 60; background: var(--tinta); color: var(--parede); padding: 10px 14px; font-family: var(--mono); }
.pular:focus { top: 12px; }
.mono, .rotulo, .status, kbd { font-family: var(--mono); }

/* ---------------------------------------------------------- topo */
.topo {
  position: sticky; top: 0; z-index: 30; height: var(--topo);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--margem); background: var(--parede);
  padding-top: env(safe-area-inset-top); height: calc(var(--topo) + env(safe-area-inset-top));
  transition: background-color .45s var(--saida), box-shadow .3s;
}
body.rolou .topo { box-shadow: 0 1px 0 var(--fio); }
.topo-esq { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topo-dir { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.marca {
  /* botão costurado em M + nome em grotesca espaçada (proposta 06 · Botão) */
  display: inline-flex; align-items: center; gap: 12px; line-height: 1;
  font: 500 15px var(--sans); letter-spacing: .42em; text-transform: uppercase;
}
.marca .marca-nome { padding-left: .42em; margin-right: -.42em; }
.marca .marca-botao { width: 30px; height: 30px; flex: none; transition: rotate .6s var(--suave); }
@media (hover: hover) { .marca:hover .marca-botao { rotate: -14deg; } }
.filtros { position: absolute; width: 0; height: 0; overflow: hidden; }
.rotulo {
  display: inline-flex; align-items: center; gap: 8px; height: 40px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; transition: opacity .2s;
}
.rotulo i { font-size: 16px; }
.rotulo:hover, .icone:hover { opacity: .78; }
.icone { width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; transition: opacity .2s; }
.icone:active, .rotulo:active { scale: .96; }
.icone.girando .ic { animation: girar .9s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
.status { color: var(--poeira); font-size: 12px; margin-right: 8px; white-space: nowrap; }

.busca { display: flex; align-items: center; gap: 10px; }
.busca input {
  width: min(240px, 34vw); height: 30px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--tinta);
  background: none; outline: none; color: var(--tinta); font: 13px var(--mono);
  clip-path: inset(0 100% 0 0); opacity: 0; pointer-events: none;
  transition: clip-path .5s var(--saida), opacity .3s;
}
.busca input::placeholder { color: var(--poeira); }
.busca input::-webkit-search-cancel-button { display: none; }
.busca.aberta input { clip-path: inset(0); opacity: 1; pointer-events: auto; }
.busca.aberta #busca-abrir span { display: none; }

/* ---------------------------------------------------------- menu em tela cheia */
.menu {
  position: fixed; inset: var(--topo) 0 0; z-index: 25; overflow-y: auto; background: var(--parede);
  animation: abrir-menu .55s var(--saida);
}
@keyframes abrir-menu { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.menu-in { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 48px; padding: 32px var(--margem) 60px; }
.menu-esq { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 44px; min-width: 0; }
.menu-secoes { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; }
.menu-rotulo { margin: 0; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.menu-alertas { display: grid; gap: 8px; justify-items: start; text-align: left; padding: 18px 0 0; border-top: 1px solid var(--fio); animation: entrar-menu .7s var(--saida) both; animation-delay: 360ms; }
.menu-alertas-titulo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; transition: gap .35s var(--saida); }
.menu-alertas:hover .menu-alertas-titulo { gap: 16px; }
.menu-alertas[hidden] { display: none; }
/* relatório diário: um cartão de edição com pontos de costura nos cantos, como a etiqueta do logo */
.menu-carta {
  --ponto: radial-gradient(circle, var(--poeira) 1.4px, transparent 1.8px);
  position: relative; gap: 14px; justify-items: stretch; padding: 22px 24px 20px; border: 1px solid var(--fio); background: var(--papel);
  background-image: var(--ponto), var(--ponto), var(--ponto), var(--ponto);
  background-size: 8px 8px; background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
  transition: border-color .35s var(--suave);
}
.menu-carta:hover, .menu-carta:focus-visible { border-color: var(--grafite); }
.carta-topo, .carta-pe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.carta-hora { color: var(--grafite); }
.carta-texto { font-size: 15px; line-height: 1.5; color: var(--poeira); max-width: 46ch; text-wrap: pretty; }
.carta-sumario { display: grid; border-top: 1px solid var(--fio); }
.carta-sumario > span { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--fio); font-size: 15px; font-weight: 500; }
.carta-sumario b { font: 12px var(--mono); letter-spacing: .08em; color: var(--poeira); }
.carta-sumario em { font: normal 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }
.carta-cta { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; background: var(--tinta); color: var(--parede); transition: opacity .3s var(--suave); }
.menu-carta:hover .carta-cta { opacity: .86; }
@media (max-width: 520px) { .menu-carta { padding: 20px 18px 18px; } .carta-sumario em { display: none; } .carta-sumario > span { grid-template-columns: 34px 1fr; } }

/* alertas no Discord */
.alertas { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 34px 34px 30px; border: 1px solid var(--fio); background: var(--parede); color: var(--tinta); overflow-y: auto; }
.alertas::backdrop { background: rgb(0 0 0 / .7); }
.alertas[open] { animation: abrir-alertas .4s var(--saida); }
@keyframes abrir-alertas { from { opacity: 0; translate: 0 12px; } }
.alertas h2 { margin: 14px 0 10px; font-size: clamp(26px, 4vw, 34px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.alertas-texto { margin: 0 0 28px; color: var(--poeira); line-height: 1.5; max-width: 44ch; }
.alertas-fechar { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; }
.alertas label { display: block; margin-bottom: 8px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.alertas-linha { display: flex; border: 1px solid var(--fio); }
.alertas-linha:focus-within { border-color: var(--tinta); }
.alertas input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent; color: inherit; font: 16px var(--mono); outline: none; }
.alertas form button { padding: 0 20px; background: var(--tinta); color: var(--parede); font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: opacity .2s; }
.alertas form button:hover { opacity: .85; }
.alertas form button:disabled { opacity: .5; }
.alertas-erro { min-height: 1.4em; margin: 8px 0 0; font-size: 13px; color: #d6806b; }
.alertas-passos { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--fio); }
.alertas-passos li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--fio); opacity: .42; transition: opacity .4s; }
.alertas-passos li.atual, .alertas-passos li.feito { opacity: 1; }
.alertas-passos .n { font: 12px var(--mono); letter-spacing: .08em; color: var(--poeira); padding-top: 3px; }
.alertas-passos li.feito .n { text-decoration: line-through; }
.alertas-passos strong { font-weight: 600; }
.alertas-passos p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--poeira); }
.alertas-passos a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.alertas-passos li:not(.atual) a { display: none; }
.alertas-status { margin: 18px 0 0; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }
.menu-secoes .secao { padding: 0; text-align: left; text-transform: none; letter-spacing: -0.015em; white-space: normal; text-wrap: balance; }
.menu-secoes .secao::after { display: none; }
.menu-secoes button {
  justify-self: start; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--poeira); transition: color .25s, translate .45s var(--saida);
  animation: entrar-menu .7s var(--saida) both; animation-delay: calc(var(--i, 0) * 40ms);
}
.menu-secoes button:hover, .menu-secoes button[aria-current="true"] { color: var(--tinta); translate: 8px 0; }
@keyframes entrar-menu { from { opacity: 0; translate: 0 14px; } }
.menu-casas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-content: start; border-top: 1px solid var(--fio); border-left: 1px solid var(--fio); }
.menu-casas > * { border-right: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.casas-grupo {
  grid-column: 1 / -1; margin: 0; padding: 14px 14px 10px; background: var(--parede);
  font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira);
}
.etiqueta {
  display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 104px; padding: 18px 12px 10px;
  background: var(--parede); text-align: left; transition: background-color .25s;
}
.etiqueta:hover, .etiqueta[aria-pressed="true"] { background: var(--papel); }
.logo-caixa { display: grid; align-self: center; height: 38px; }
.logo { display: block; width: 100%; height: 100%; background: var(--tinta); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.etiqueta .logo { height: 38px; scale: var(--esc, 1); }
.logo-caixa.fino { filter: drop-shadow(0 0 .35px var(--tinta)) drop-shadow(0 0 .35px var(--tinta)); }
.logo-texto { align-self: center; justify-self: center; font: 700 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.etiqueta small { font: 11px var(--mono); color: var(--poeira); letter-spacing: .03em; }
.etiqueta.quieta { opacity: .5; }
.etiqueta.quieta:hover { opacity: 1; }

/* ---------------------------------------------------------- seções */
.secoes {
  position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px;
  padding: 14px var(--margem) 22px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.secao { position: relative; padding: 6px 0; color: var(--poeira); transition: color .25s; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.secao:hover, .secao[aria-current="true"] { color: var(--tinta); }
.secao::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--saida); }
.secao[aria-current="true"]::after, .secao:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------- quadro: palco, dupla e grade */
.quadro { outline: none; display: grid; gap: clamp(56px, 7vw, 96px); padding-bottom: 20px; }
.cabeca { padding: 6px var(--margem) 0; display: grid; gap: 10px; }
.cabeca h2 { margin: 0; font-size: clamp(40px, 6vw, 84px); font-weight: 500; line-height: 1; letter-spacing: -0.025em; }
.cabeca .logo { width: min(460px, 72vw); height: clamp(56px, 8vw, 104px); -webkit-mask-position: left center; mask-position: left center; }
.cabeca p { margin: 0; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }

.look { display: block; position: relative; min-width: 0; }
.prova { position: relative; margin: 0; overflow: hidden; background: var(--papel); }
.prova-in { position: absolute; inset: 0; overflow: hidden; }
.prova img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(0) brightness(1) var(--foto-filtro); /* mesma lista de funções em todos os estados: só assim o filtro anima em vez de saltar */
  transition: opacity 1s var(--suave), scale 1.4s var(--saida), filter 1.1s var(--suave);
}
.prova img.carregando { opacity: 0; }
@media (hover: hover) { html:not(.hover-fisico) .look:hover .prova img { scale: 1.03; } } /* com mouse de verdade quem dá o movimento é a inclinação 3D */
/* ao entrar na tela a foto assenta: começa um pouco ampliada e volta ao tamanho (nunca escondida) */
@media (prefers-reduced-motion: no-preference) {
  .revelar .prova img { scale: 1.08; }
  .revelar.visivel .prova img { scale: 1; }
}
.prova.sem-img .prova-in { display: grid; place-items: end start; padding: 18px; }
.prova.sem-img .prova-in::after { content: attr(data-fonte); font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--poeira); }

.legenda { display: grid; gap: 8px; padding-top: 16px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 12px var(--mono); letter-spacing: .04em; color: var(--poeira); text-transform: uppercase; }
.meta .casa { color: var(--tinta); }
.meta .novo { color: var(--tinta); }
.meta .novo::before { content: "▸"; margin-right: 4px; }
.look h3 { margin: 0; font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -0.005em; text-wrap: pretty; }
.ler { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); }
.ler::before { content: "▸"; margin-right: 6px; }
.ler span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .9s var(--suave); }
.look:hover .ler span { background-size: 100% 1px; }
.look .resumo { margin: 0; color: var(--grafite); font-size: 15px; line-height: 1.55; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* palco: uma notícia de ponta a ponta */
.palco .prova { height: min(86vh, 980px); min-height: 420px; }
.palco .prova img { object-position: 50% 18%; } /* foto de passarela em formato largo: manter o rosto */
.palco .legenda { padding: 18px var(--margem) 0; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
.palco .legenda > * { grid-column: 1; }
.palco .ler { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.palco h3 { font-size: clamp(28px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -0.022em; max-width: 24ch; }

/* dupla: duas notícias lado a lado, de borda a borda */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dupla .prova { aspect-ratio: 4 / 5; }
.dupla .legenda { padding: 16px var(--margem) 0; }
.dupla .look + .look .legenda { padding-left: clamp(12px, 1.6vw, 24px); }
.dupla h3 { font-size: clamp(20px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.015em; max-width: 30ch; }

/* grade: quatro por linha, com respiro */
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 22px; padding: 0 var(--margem); }
.grade .prova { aspect-ratio: 3 / 4; }
.grade h3 { font-size: 16px; }

.look:focus-visible { outline: none; }
.look:focus-visible .prova { outline: 1px solid var(--tinta); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .look.chegou { animation: chegar .9s var(--saida) both; }
  @keyframes chegar { from { opacity: 0; translate: 0 -18px; } }
}

.parou { display: flex; align-items: center; gap: 16px; padding: 0 var(--margem); font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.parou::before, .parou::after { content: ""; height: 1px; background: var(--fio); flex: 1; }

.fim-quadro { display: flex; align-items: center; gap: 16px; padding: 0 var(--margem); font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.fim-quadro::after { content: ""; flex: 1; height: 1px; background: var(--fio); }

/* esqueleto, vazio, erro */
.esq { background: var(--papel); position: relative; overflow: hidden; }
.esq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .04), transparent); translate: -100% 0; animation: brilho 1.6s infinite; }
@keyframes brilho { to { translate: 100% 0; } }
.esq-texto { height: 14px; margin: 0 0 12px; }
.vazio { padding: 40px var(--margem) 0; max-width: 620px; }
.vazio h2 { margin: 0 0 10px; font-size: 44px; font-weight: 500; letter-spacing: -0.02em; }
.vazio p { color: var(--grafite); margin: 0 0 22px; }
.botao { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border: 1px solid var(--tinta); font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background-color .25s, color .25s; }
.botao:hover { background: var(--tinta); color: var(--parede); }
.fim { height: 1px; }

/* ---------------------------------------------------------- aviso de novidades */
.novas {
  position: fixed; z-index: 40; left: 50%; bottom: max(22px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 12px;
  background: var(--tinta); color: var(--parede); text-align: left;
  box-shadow: 0 24px 50px -18px var(--sombra), 0 2px 6px rgb(0 0 0 / .25);
  translate: -50% 0; transition: translate .5s var(--saida), opacity .35s;
}
.novas[hidden] { display: flex; opacity: 0; translate: -50% 140%; pointer-events: none; }
.novas:active { scale: .98; }
.novas-fotos { position: relative; width: 74px; height: 46px; flex: none; }
.novas-fotos img {
  position: absolute; top: 2px; left: calc(var(--i) * 16px); width: 34px; height: 42px; object-fit: cover;
  border: 2px solid var(--tinta); background: var(--papel);
  rotate: calc((var(--i) - 1) * 5deg); transition: translate .45s var(--saida), rotate .45s var(--saida);
  animation: dar-carta .6s var(--saida) both; animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes dar-carta { from { opacity: 0; translate: 0 18px; rotate: 0deg; } }
.novas:hover .novas-fotos img { translate: calc((var(--i) - 1) * 7px) -5px; rotate: calc((var(--i) - 1) * 11deg); }
.novas-texto { display: grid; gap: 2px; }
.novas-texto strong { font: 700 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.novas-texto strong::before { content: "▸ "; }
.novas-texto small { font: 12px var(--mono); opacity: .7; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.novas-seta { font-size: 18px; margin-left: 4px; transition: translate .35s var(--saida); }
.novas:hover .novas-seta { translate: 0 -3px; }

/* ---------------------------------------------------------- provador (leitor) */
.provador { outline: none; padding: 14px var(--margem) 40px; }
.prov-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto 34px; }
.prov-topo .voltar, .prov-acoes button { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; height: 38px; display: inline-flex; align-items: center; gap: 8px; }
.prov-topo .voltar:hover { opacity: .6; }
.prov-acoes button { padding: 0 14px; border: 1px solid var(--fio); transition: border-color .2s, background-color .2s, color .2s; }
.prov-acoes button:hover { border-color: var(--tinta); }
.prov-acoes button[aria-pressed="true"] { background: var(--tinta); color: var(--parede); border-color: var(--tinta); }
.prov-acoes button:disabled { opacity: .55; cursor: progress; }
.prov-cabeca { max-width: 880px; margin: 0 auto; }
.prov-cabeca .meta { margin-bottom: 20px; }
.prov-cabeca h1 { margin: 0; font-size: clamp(34px, 5vw, 70px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.linha-fina { margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--grafite); max-width: 62ch; }
.prov-marcas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.prov-marcas button { height: 30px; padding: 0 12px; border: 1px solid var(--fio); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: border-color .2s; }
.prov-marcas button:hover { border-color: var(--tinta); }
.prov-foto { max-width: 1180px; margin: 44px auto 0; }
.prov-foto img { width: 100%; max-height: 86vh; object-fit: contain; margin: 0 auto; filter: var(--foto-filtro); }
.prov-foto figcaption { margin-top: 10px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }
.na-materia { max-width: 680px; margin: 48px auto 0; }
.na-materia h2 { margin: 0 0 14px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.rede { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--fio); }
.rede:last-child { border-bottom: 1px solid var(--fio); }
.rede-nome { display: inline-flex; align-items: center; gap: 10px; padding-top: 6px; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rede-nome i { font-size: 18px; }
a.rede-nome { transition: color .2s; } a.rede-nome:hover { color: var(--grafite); }
.rede-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.post { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 8px 12px 8px 8px; border: 1px solid var(--fio); background: var(--parede); transition: border-color .32s var(--suave), background-color .32s var(--suave); }
.post-foto { position: relative; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; background: var(--papel); color: var(--poeira); font-size: 20px; }
.post-foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro); animation: post-foto .5s var(--saida) both; }
@keyframes post-foto { from { opacity: 0; } }
.post-play { position: absolute; font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .6); }
.post-texto { display: grid; gap: 2px; min-width: 0; }
.post-texto strong { overflow: hidden; font: 700 12px/1.3 var(--mono); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.post-texto small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; color: var(--grafite); }
.post-seta { align-self: start; margin-top: 2px; font-size: 13px; color: var(--poeira); transition: transform .32s var(--suave), color .32s var(--suave); }
.post:hover { border-color: var(--grafite); background: var(--papel); }
.post:hover .post-seta { color: var(--tinta); transform: translate(2px, -2px); }
.post:focus-visible { outline: 1px solid var(--tinta); outline-offset: 2px; }

/* prévia flutuante do post: só com mouse */
.post-previa { position: fixed; z-index: 60; width: 300px; padding: 0 0 14px; border: 1px solid var(--fio); background: var(--parede); color: var(--tinta); box-shadow: 0 18px 50px var(--sombra);
  pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(var(--y, 6px)) scale(.97); transform-origin: var(--origem-x, 50%) 100%;
  transition: opacity .2s var(--suave), transform .26s var(--suave), visibility 0s .26s; }
.post-previa[data-lado="baixo"] { --y: -6px; transform-origin: var(--origem-x, 50%) 0; }
.post-previa.aberta { pointer-events: auto; cursor: pointer; opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--suave), transform .26s var(--suave), visibility 0s; }
.post-previa.sem-foto { padding-top: 14px; }
.previa-foto { position: relative; display: grid; place-items: center; max-height: 300px; margin-bottom: 12px; overflow: hidden; background: var(--papel); }
.previa-foto img { width: 100%; max-height: 300px; object-fit: cover; filter: var(--foto-filtro); }
.previa-foto .ph-play { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; font-size: 18px; }
.previa-cabeca { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.previa-cabeca > i { font-size: 18px; color: var(--poeira); }
.previa-nome { display: grid; min-width: 0; }
.previa-nome strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.previa-nome small { font: 12px var(--mono); color: var(--poeira); }
.previa-texto { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; margin: 10px 14px 0; font-size: 13.5px; line-height: 1.45; color: var(--grafite); }
.previa-pe { display: block; margin: 12px 14px 0; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }
@media (prefers-reduced-motion: reduce) { .post-previa, .post-previa.aberta { transform: none; } }
@media (max-width: 560px) { .rede { grid-template-columns: 1fr; gap: 10px; } }
.corpo { max-width: 680px; margin: 48px auto 0; font-size: 18px; line-height: 1.75; color: var(--grafite); }
.corpo p { margin: 0 0 1.2em; }
.corpo h2 { color: var(--tinta); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin: 1.8em 0 .6em; }
.corpo blockquote { margin: 1.6em 0; color: var(--tinta); font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
.corpo ul { padding-left: 1.1em; margin: 0 0 1.2em; }
.corpo figure { margin: 2em 0; }
.corpo figure img { width: auto; max-width: 100%; margin: 0 auto; filter: var(--foto-filtro); }
.galeria { max-width: 1280px; margin: 48px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 2px; }
.galeria figure { margin: 0; cursor: zoom-in; }
.galeria .prova { aspect-ratio: 2 / 3; }
.galeria figcaption { padding: 10px 8px 0; font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.aviso { max-width: 680px; margin: 30px auto 0; padding: 16px 18px; border: 1px solid var(--fio); font-size: 15px; color: var(--grafite); }
.prov-fim { max-width: 680px; margin: 48px auto 0; padding-top: 18px; border-top: 1px solid var(--fio); font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }
.proxima {
  max-width: 680px; margin: 30px auto 0; display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center;
  padding-bottom: 6px; transition: opacity .3s;
}
.proxima:hover { opacity: .75; }
.proxima-foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--papel); }
.proxima-foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-filtro); }
.proxima-texto { display: grid; gap: 8px; }
.proxima-texto small { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); }
.proxima-texto strong { font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.proxima:not(:has(.proxima-foto)) { grid-template-columns: 1fr; }
kbd { font-size: 11px; padding: 0 5px; border: 1px solid var(--fio); }
.relacionadas { max-width: 1280px; margin: 96px auto 0; }
.relacionadas h2 { margin: 0 0 24px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }
.relacionadas-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.relacionadas-grade .prova { aspect-ratio: 3 / 4; }
.relacionadas-grade h3 { font-size: 16px; }
.traduzindo .corpo, .traduzindo .prov-cabeca h1, .traduzindo .linha-fina { opacity: .45; transition: opacity .3s; }

/* fio de progresso da leitura, preso ao topo (calculado no JS a cada quadro: não trava em rolagem rápida) */
.progresso {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tinta);
  transform: scaleX(0); transform-origin: left; will-change: transform; opacity: 0; transition: opacity .3s;
}
body.lendo .progresso { opacity: 1; }

/* transições de vista */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(root) { animation-name: sair; }
::view-transition-new(root) { animation-name: entrar-lado; }
@keyframes sair { to { opacity: 0; } }
@keyframes entrar-lado { from { opacity: 0; } }
:root[data-direcao="frente"]::view-transition-new(root) { animation-name: vir-direita; }
:root[data-direcao="tras"]::view-transition-new(root) { animation-name: vir-esquerda; }
@keyframes vir-direita { from { opacity: 0; translate: 40px 0; } }
@keyframes vir-esquerda { from { opacity: 0; translate: -40px 0; } }
::view-transition-group(prova) { animation-duration: .6s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(prova), ::view-transition-new(prova) { height: 100%; object-fit: cover; }

/* visor de looks em tela cheia */
.visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(6 6 6 / .97); color: #ecebe6; }
.visor::backdrop { background: rgb(0 0 0 / .6); }
.visor[open] { display: grid; place-items: center; animation: abrir-visor .35s var(--saida); }
@keyframes abrir-visor { from { opacity: 0; } }
.visor figure { margin: 0; }
.visor-palco { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.visor img { max-width: min(92vw, 1100px); max-height: 86dvh; object-fit: contain; cursor: zoom-in; transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.visor img.animando { transition: transform .32s var(--saida); }
.visor.ampliado img { cursor: zoom-out; }
.visor figcaption { position: fixed; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 18px; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a8a6a0; pointer-events: none; transition: opacity .25s; }
.visor-dica { color: #6f6d68; }
.visor.ampliado figcaption .visor-conta { display: none; }
.visor.ampliado .visor-dica { padding: 7px 12px; background: rgb(6 6 6 / .72); color: #c9c7c1; }
.visor.ampliado > button { background: rgb(6 6 6 / .55); }
.visor-zoom { position: fixed; right: 14px; bottom: 10px; display: flex; align-items: center; background: rgb(6 6 6 / .7); }
.visor-zoom output { min-width: 44px; text-align: center; font: 12px var(--mono); letter-spacing: .08em; color: #a8a6a0; }
.visor .visor-zoom button { position: static; width: 44px; height: 44px; font-size: 18px; }
.visor button { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; font-size: 22px; color: inherit; transition: opacity .2s; }
.visor button:hover { opacity: .6; }
.visor-fechar { top: 14px; right: 14px; }
.visor-seta { top: 50%; translate: 0 -50%; }
.visor-seta.ant { left: 10px; }
.visor-seta.prox { right: 10px; }
.visor.unica .visor-seta, .visor.unica .visor-conta { display: none; }

/* ---------------------------------------------------------- rodapé */
.rodape { margin: 120px var(--margem) 0; padding: 22px 0 48px; border-top: 1px solid var(--fio); font: 12px var(--mono); letter-spacing: .04em; color: var(--poeira); }
.rodape p { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; }
body.lendo .rodape { display: none; }
.fontes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fontes button:hover { color: var(--tinta); }
.fontes .erro { text-decoration: line-through; }

/* ---------------------------------------------------------- responsivo */
@media (max-width: 1180px) {
  .grade, .relacionadas-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relacionadas-grade > :nth-child(4) { display: none; }
  .menu-in { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .status { display: none; }
  .grade, .relacionadas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
  .palco .prova { height: 72vh; }
  .palco .legenda { grid-template-columns: 1fr; }
  .palco .ler { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .rotulo span { display: none; }
  .marca { font-size: 13px; letter-spacing: .3em; gap: 9px; } .marca .marca-botao { width: 26px; height: 26px; }
  .busca.aberta input { position: fixed; left: var(--margem); right: var(--margem); top: calc(var(--topo) + 6px); width: auto; background: var(--parede); height: 40px; }
  .dupla { grid-template-columns: 1fr; gap: 56px; }
  .look h3 { font-size: 16px; }
  .palco h3 { font-size: 30px; }
  .dupla h3 { font-size: 22px; }
  .menu-secoes .secao { white-space: normal; }
  .corpo { font-size: 17px; }
  .proxima { grid-template-columns: 84px 1fr; }
  .proxima-texto strong { font-size: 18px; }
  .visor-seta { display: none !important; }
  .visor-dica { display: none; }
  .visor.ampliado .visor-dica { display: inline; }
  .secoes { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (pointer: coarse), (max-width: 560px) {
  kbd { display: none; }
  /* dedo precisa de alvo de pelo menos 44px */
  .rotulo, .icone { min-width: 44px; min-height: 44px; justify-content: center; }
  .secao { padding: 13px 0; }
  .prov-acoes button, .prov-topo .voltar { min-height: 44px; }
}
@media (hover: none) { .post:hover { background: var(--parede); border-color: var(--fio); } .post:hover .post-seta { transform: none; color: var(--poeira); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================================================================ movimento (2026-11) */

/* ícones desenhados: mesmo traço do Phosphor regular, cada um com o seu gesto */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.rotulo .ic { width: 17px; height: 17px; }
.ic * { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--saida), opacity .3s, scale .4s var(--saida); }
/* menu: três fios viram um X */
#menu-abrir[aria-expanded="true"] .ic-menu line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#menu-abrir[aria-expanded="true"] .ic-menu line:nth-child(2) { transform: scaleX(0); opacity: 0; }
#menu-abrir[aria-expanded="true"] .ic-menu line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (hover: hover) { #menu-abrir[aria-expanded="false"]:hover .ic-menu line:nth-child(2) { transform: scaleX(.6) translateX(-3px); } }
/* a palavra rola: Menu sobe, Fechar entra */
.troca { display: inline-grid; height: 1.3em; overflow: hidden; line-height: 1.3; }
.troca > span { grid-area: 1 / 1; transition: translate .5s var(--saida), opacity .3s; }
.troca > span + span { translate: 0 110%; opacity: 0; }
#menu-abrir[aria-expanded="true"] .troca > span:first-child { translate: 0 -110%; opacity: 0; }
#menu-abrir[aria-expanded="true"] .troca > span + span { translate: 0 0; opacity: 1; }
/* busca: a lente procura */
@media (hover: hover) { #busca-abrir:hover .ic-busca { animation: procurar .7s var(--saida); } }
@keyframes procurar { 35% { translate: -1.5px -1px; rotate: -10deg; } 70% { translate: 1px .5px; rotate: 4deg; } }
.busca.aberta .ic-busca line { transform: scale(1.25); }
/* atualizar: dá meia volta no hover; gira enquanto busca */
@media (hover: hover) { #atualizar:not(.girando):hover .ic { rotate: 180deg; } }
#atualizar .ic { transition: rotate .7s var(--saida); }
/* tema: a metade cheia gira para o outro lado */
#tema .ic { transition: rotate .8s var(--saida); }
:root[data-theme="light"] #tema .ic { rotate: 180deg; }
#tema .meia { fill: currentColor; stroke: none; }
@media (hover: hover) { #tema:hover .ic { rotate: 25deg; } :root[data-theme="light"] #tema:hover .ic { rotate: 205deg; } }
.icone:active .ic, .rotulo:active .ic { scale: .86; }

/* letreiro datilografado (uma vez por sessão) */
.marca.datilografar .letra { animation: tecla .01s steps(1) both; animation-delay: calc(var(--c) * 85ms + 650ms); }
/* primeira visita: a linha costura o M no botão antes do nome aparecer */
.marca.datilografar .linha { stroke-dasharray: 1; animation: costura .7s var(--suave) .1s both; }
@keyframes costura { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tecla { from { opacity: 0; } }

/* marcador das seções */
.secoes-marca { position: absolute; left: 0; top: 0; width: 100px; height: 1px; background: var(--tinta); pointer-events: none; opacity: 0;
  transform-origin: 0 0; transition: transform .55s var(--saida), opacity .3s; }
.secoes .secao[aria-current="true"]::after { display: none; }

/* faixa de manchetes */
.fita { position: relative; overflow: hidden; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fita[hidden] { display: none; }
.fita-trilho { display: flex; width: max-content; }
.fita-grupo { display: flex; flex: none; }
.fita-item { display: inline-flex; align-items: center; gap: 12px; padding: 11px 0; white-space: nowrap; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poeira); transition: color .25s; }
.fita-item::after { content: ""; width: 1px; height: 11px; margin: 0 26px 0 14px; background: var(--fio); }
.fita-item .casa { color: var(--tinta); }
.fita-item:hover { color: var(--tinta); }
.fita-item:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .fita-trilho { animation: correr var(--duracao, 60s) linear infinite; }
  .fita:hover .fita-trilho, .fita:focus-within .fita-trilho { animation-play-state: paused; }
}
@keyframes correr { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .fita { overflow-x: auto; scrollbar-width: none; } .fita-grupo[aria-hidden] { display: none; } }

/* ---------------------------------------------------------- passarela (momento principal) */
.passarela { position: relative; display: grid; }
.passarela .slide { grid-area: 1 / 1; }
.passarela .slide:not(.ativo):not(.saindo) { visibility: hidden; }
.passarela .slide.ativo { z-index: 2; }
.passarela .slide.saindo { z-index: 1; }
.passarela .slide.saindo .legenda { visibility: hidden; }
.passarela .slide .prova-in { clip-path: inset(0); }
@media (hover: hover) { .passarela .look:hover .prova img { scale: 1; } }
/* véu no pé da foto: a legenda e a régua ficam legíveis sobre qualquer imagem */
.passarela .prova::after { content: ""; position: absolute; inset: auto 0 0; height: 62%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .55) 38%, rgb(0 0 0 / 0) 100%); }
/* a legenda sobe para dentro da foto: o título datilografado aparece já na primeira tela */
.passarela .slide .legenda { position: absolute; z-index: 3; left: var(--margem); right: var(--margem); bottom: 78px; padding: 0; color: #ecebe6; }
.passarela .slide .meta, .passarela .slide .meta .casa, .passarela .slide .meta .novo { color: rgb(236 235 230 / .78); }
.passarela .slide .meta .casa { color: #ecebe6; }
.passarela .slide .resumo { color: rgb(236 235 230 / .8); }
.passarela .slide .ler { color: #ecebe6; }
.passarela .slide h3 { max-width: 22ch; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  /* cortina: a nova foto abre da direita sobre a anterior (da esquerda ao voltar) */
  .passarela .slide.ativo .prova-in { animation: cortina 1.15s var(--saida) both; }
  .passarela.tras .slide.ativo .prova-in { animation-name: cortina-tras; }
  .passarela .slide.ativo .prova img { animation: respirar 9s cubic-bezier(.25, .1, .25, 1) both; }
  .passarela .slide.saindo .prova img { filter: grayscale(0) brightness(.55) var(--foto-filtro); transition: filter 1.1s var(--saida); scale: 1.04; }
  /* legenda: meta e resumo assentam, o título é datilografado */
  .passarela .slide.ativo .meta, .passarela .slide.ativo .resumo, .passarela .slide.ativo .ler { animation: assentar .8s var(--saida) both; }
  .passarela .slide.ativo .resumo { animation-delay: calc(var(--total-ms, 500ms) + 80ms); }
  .passarela .slide.ativo .ler { animation-delay: calc(var(--total-ms, 500ms) + 160ms); }
  .passarela .slide.ativo .dat-p > span { animation: tecla .01s steps(1) both; animation-delay: calc(var(--c) * var(--passo) + 280ms); }
}
@keyframes cortina { from { clip-path: inset(0 0 0 100%); } }
@keyframes cortina-tras { from { clip-path: inset(0 100% 0 0); } }
@keyframes respirar { from { scale: 1.09; } to { scale: 1; } }
@keyframes assentar { from { opacity: 0; translate: 0 10px; } }
.dat-p { white-space: nowrap; }
/* cursor de máquina no fim do título, piscando três vezes */
@media (prefers-reduced-motion: no-preference) {
  .passarela .slide.ativo .dat::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .06em; vertical-align: -.08em; background: currentColor;
    animation: piscar .5s steps(1) 6 forwards; animation-delay: calc(var(--total) * var(--passo) + 280ms); opacity: 0; }
}
@keyframes piscar { 0% { opacity: 1; } 50% { opacity: 0; } }

/* régua: um fio por notícia, numerado; o ativo enche no tempo do slide */
.trilho { position: absolute; z-index: 3; left: var(--margem); right: var(--margem); top: calc(min(86vh, 980px) - 54px);
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); grid-auto-flow: column; gap: 14px; }
.trilho-item { display: grid; gap: 8px; padding: 10px 0; text-align: left; color: #ecebe6; }
.trilho-n { font: 11px var(--mono); letter-spacing: .08em; opacity: .55; transition: opacity .3s; }
.trilho-item[aria-current="true"] .trilho-n, .trilho-item:hover .trilho-n { opacity: 1; }
.trilho-fio { position: relative; height: 1px; background: rgb(236 235 230 / .28); overflow: hidden; }
.trilho-cheio { position: absolute; inset: 0; background: #ecebe6; transform-origin: left; transform: scaleX(0); }
.trilho-item.passou .trilho-cheio { transform: scaleX(1); opacity: .55; }
.trilho-item[aria-current="true"] .trilho-cheio { transform: scaleX(1); }
.passarela.auto .trilho-item[aria-current="true"] .trilho-cheio { animation: encher 7.5s linear both; }
.passarela.pausada .trilho-cheio { animation-play-state: paused !important; }
@keyframes encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.trilho-item:focus-visible { outline: 1px solid #ecebe6; outline-offset: 2px; }

/* ---------------------------------------------------------- fotos entram como cortina subindo */
.anima .revelar .prova-in { clip-path: inset(100% 0 0 0); }
.anima .revelar.visivel .prova-in { clip-path: inset(0); transition: clip-path 1.05s var(--saida); }
.anima .revelar.visivel .prova img { transition: opacity 1s var(--suave), scale 1.6s var(--saida), filter 1.1s var(--suave); }
/* na mesma linha, cada foto abre um tempo depois da vizinha */
.anima .dupla .look:nth-child(2) .prova-in, .anima .grade .look:nth-child(4n+2) .prova-in { transition-delay: 90ms; }
.anima .grade .look:nth-child(4n+3) .prova-in { transition-delay: 180ms; }
.anima .grade .look:nth-child(4n+4) .prova-in { transition-delay: 270ms; }
.anima .revelar .legenda { opacity: 0; translate: 0 12px; }
.anima .revelar.visivel .legenda { opacity: 1; translate: 0 0; transition: opacity .8s var(--saida) .25s, translate .8s var(--saida) .25s; }

/* hover dos looks: a seta do "ler" anda, a foto acende */
.ler::before { display: inline-block; transition: translate .8s var(--suave); }
@media (hover: hover) {
  .look:hover .ler::before { translate: 4px 0; }
  .look:hover .prova img { filter: grayscale(0) brightness(1.04) var(--foto-filtro); }
}

/* cursor de leitura: sobre uma foto, o ponteiro vira uma etiqueta "Ler →" que segue o mouse com leve atraso */
.cursor-ler { position: fixed; left: 0; top: 0; z-index: 70; width: 0; height: 0; pointer-events: none; display: none; }
.cursor-proprio .cursor-ler { display: block; }
.cursor-ler span {
  position: absolute; left: 0; top: 0; translate: 16px 18px; /* ao lado da ponta da seta, sem cobrir */
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  background: var(--tinta); color: var(--parede); font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .45);
  scale: .6; opacity: 0; transition: scale .35s var(--suave), opacity .25s var(--suave);
}
.cursor-ler span::after { content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--seta) center / contain no-repeat; mask: var(--seta) center / contain no-repeat;
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E"); }
.cursor-ler.ligado span { scale: 1; opacity: 1; }


/* menu: logos entram em sequência, e crescem um pouco no hover */
@media (prefers-reduced-motion: no-preference) {
  .etiqueta { animation: entrar-menu .6s var(--saida) both; animation-delay: calc(min(var(--i, 0), 30) * 14ms + 140ms); }
}
.etiqueta .logo-caixa { transition: scale .45s var(--saida); }
@media (hover: hover) { .etiqueta:hover .logo-caixa { scale: 1.06; } }

@media (max-width: 820px) {
  .trilho { top: calc(72vh - 50px); gap: 8px; }
  .passarela .slide .legenda { bottom: 70px; }
}
@media (max-width: 560px) {
  .trilho-n { font-size: 10px; }
  .passarela .slide .resumo { display: none; }
  .passarela .slide h3 { font-size: 28px; }
  .fita-item { padding: 10px 0; }
}

/* ================================================================ fluidez e informação (2026-11, 2ª rodada) */

/* rolagem macia (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }

/* meta: logo da maison, assunto, ponto vivo no "novo" */
.meta .casa-logo { display: inline-flex; align-items: center; height: 16px; }
.meta .casa-logo .logo { width: 64px; height: 15px; background: currentColor; -webkit-mask-position: left center; mask-position: left center; scale: var(--esc, 1); transform-origin: left center; }
.palco .meta .casa-logo, .dupla .meta .casa-logo { height: 20px; }
.palco .meta .casa-logo .logo, .dupla .meta .casa-logo .logo { width: 104px; height: 19px; }
.meta .assunto { padding: 2px 7px; border: 1px solid var(--fio); color: var(--grafite); font-size: 10.5px; letter-spacing: .1em; }
.passarela .slide .meta .assunto { border-color: rgb(236 235 230 / .35); color: #ecebe6; }
.meta .novo::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .meta .novo::before { animation: pulsar 1.8s var(--saida) infinite; }
}
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }

/* grade: o resumo sobe por cima da foto no hover, sem empurrar a página */
.prova .sobre { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 10px; padding: 46px 16px 16px;
  background: linear-gradient(to top, rgb(8 8 8 / .92) 0%, rgb(8 8 8 / .78) 55%, rgb(8 8 8 / 0) 100%); color: #ecebe6;
  opacity: 0; translate: 0 24px; pointer-events: none;
  transition: opacity .7s var(--suave) .08s, translate .8s var(--suave) .08s; } /* sair: o texto apaga primeiro, o véu desce depois, sem pressa */
.prova .sobre p { margin: 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; translate: 0 8px; transition: opacity .35s var(--suave), translate .5s var(--suave); }
.prova .sobre span { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .4s var(--suave); }
/* entrar: espera um instante (o mouse só de passagem não acende nada), depois o véu sobe devagar e o texto vem atrás */
@media (hover: hover) {
  .look:hover .prova .sobre, .look:focus-visible .prova .sobre { opacity: 1; translate: 0 0; transition: opacity .9s var(--suave) .18s, translate 1.1s var(--suave) .18s; }
  .look:hover .prova .sobre p, .look:focus-visible .prova .sobre p { opacity: 1; translate: 0 0; transition: opacity .8s var(--suave) .42s, translate 1s var(--suave) .42s; }
  .look:hover .prova .sobre span, .look:focus-visible .prova .sobre span { opacity: 1; transition: opacity .8s var(--suave) .6s; }
}
@media (hover: none) { .prova .sobre { display: none; } }

/* paralaxe: a foto anda um pouco mais devagar que a página (só onde o navegador sabe ligar à rolagem) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dupla .prova img, .grade .prova img, .palco:not(.passarela) .prova img, .relacionadas-grade .prova img {
      position: absolute; inset: -7% 0 auto; height: 114%;
      animation: paralaxe linear both; animation-timeline: view(); animation-range: cover;
    }
  }
}
@keyframes paralaxe { from { translate: 0 -5%; } to { translate: 0 5%; } }

/* cabeça dos blocos novos */
.bloco-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 var(--margem) 18px; border-bottom: 1px solid var(--fio); margin-bottom: 0; }
.bloco-cabeca h2 { margin: 0; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.bloco-cabeca p { margin: 0; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); }

/* Maisons da semana */
.maisons-semana, .assuntos { min-width: 0; max-width: 100vw; } /* item de grid: sem isso a faixa estica até a largura do conteúdo */
.maisons-pista { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 var(--margem); cursor: grab; user-select: none; -webkit-user-select: none; }
.maisons-pista::-webkit-scrollbar { display: none; }
.maisons-pista.arrastando { cursor: grabbing; scroll-snap-type: none; }
.maisons-pista.arrastando .maison-cartao { pointer-events: none; }
.maison-cartao { position: relative; flex: none; width: clamp(220px, 19vw, 280px); min-height: 250px; scroll-snap-align: start;
  display: grid; grid-template-rows: 54px auto 1fr; gap: 18px; padding: 26px 22px 22px; text-align: left;
  border-right: 1px solid var(--fio); overflow: hidden; transition: background-color .35s; }
.maison-cartao:first-child { border-left: 1px solid var(--fio); }
.maison-cartao .logo-caixa { height: 40px; align-self: center; transition: scale .5s var(--saida); }
.maison-cartao .logo { height: 40px; -webkit-mask-position: left center; mask-position: left center; scale: var(--esc, 1); transform-origin: left center; }
.maison-cartao .logo-texto { justify-self: start; }
.maison-num { display: flex; align-items: flex-end; gap: 10px; }
.maison-num b { font: 500 clamp(44px, 4vw, 60px)/.85 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.maison-num small { font: 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--poeira); padding-bottom: 2px; }
.maison-ultima { align-self: end; font-size: 14px; line-height: 1.4; color: var(--grafite); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.maison-barra { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tinta); transform-origin: left; transform: scaleX(var(--p)); opacity: .9; }
@media (hover: hover) {
  .maison-cartao:hover { background: var(--papel); }
  .maison-cartao:hover .logo-caixa { scale: 1.07; }
}
/* quando a faixa aparece: os cartões assentam um a um e as barras crescem até a proporção da semana */
@media (prefers-reduced-motion: no-preference) {
  .anima .maisons-semana:not(.na-tela) .maison-cartao { opacity: 0; translate: 40px 0; }
  .anima .maisons-semana:not(.na-tela) .maison-barra { transform: scaleX(0); }
  .anima .maison-cartao { transition: opacity .7s var(--saida), translate .9s var(--saida), background-color .35s; transition-delay: calc(min(var(--i), 8) * 70ms), calc(min(var(--i), 8) * 70ms), 0s; }
  .anima .maison-barra { transition: transform 1.4s var(--saida); transition-delay: calc(min(var(--i), 8) * 70ms + 250ms); }
}

/* faixa de assuntos em letra grande, levada pela rolagem */
.assuntos { overflow: hidden; padding: clamp(20px, 3vw, 40px) 0; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.assuntos-trilho { display: flex; width: max-content; will-change: transform; }
.assuntos-grupo { display: flex; flex: none; }
.assunto-grande { display: inline-flex; align-items: flex-start; gap: 10px; padding: 0 clamp(26px, 3vw, 54px) 0 0; white-space: nowrap;
  font: 500 clamp(56px, 8.6vw, 136px)/.95 var(--sans); letter-spacing: -0.045em; color: var(--tinta); transition: color .35s, -webkit-text-stroke-color .35s; }
.assunto-grande:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px var(--tinta); }
.assunto-grande sup { font: 13px var(--mono); letter-spacing: .06em; color: var(--poeira); -webkit-text-stroke: 0; margin-top: .6em; }
.assunto-grande::after { content: ""; align-self: center; width: clamp(14px, 1.4vw, 22px); height: clamp(14px, 1.4vw, 22px); margin-left: clamp(20px, 2.4vw, 44px); border-radius: 50%; background: var(--fio); }
@media (hover: hover) {
  .assuntos:hover .assunto-grande { color: transparent; -webkit-text-stroke: 1.2px var(--fio); }
  .assuntos .assunto-grande:hover { color: var(--tinta); -webkit-text-stroke-color: var(--tinta); }
}
@media (prefers-reduced-motion: reduce) { .assuntos { overflow-x: auto; scrollbar-width: none; } .assuntos-grupo[aria-hidden] { display: none; } }

@media (max-width: 560px) {
  .bloco-cabeca { flex-direction: column; gap: 8px; }
  .maison-cartao { width: 74vw; min-height: 220px; }
  .meta .casa-logo .logo { width: 64px; }
}

/* ================================================================ hover com física (3ª rodada) */

/* fotos: a imagem desliza um pouco por dentro da moldura (o deslocamento vem do JS, amortecido por tempo) */
/* o título responde junto: sobe um pouco e ganha a cor cheia */
.look h3 { transition: color .6s var(--suave); }
@media (hover: hover) { .look .legenda .meta { transition: color .3s; } }

/* letras que rolam: cada uma sobe e a cópia (sombra de texto) entra por baixo, em cascata */
.rola { display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1.25; padding-bottom: .05em; }
.rola > span { display: inline-block; text-shadow: 0 1.6em currentColor; transition: translate .6s var(--saida); transition-delay: calc(var(--l) * 14ms); }
@media (hover: hover) {
  .secao:hover .rola > span, #busca-abrir:hover .rola > span, .voltar:hover .rola > span { translate: 0 -1.6em; }
}
.menu-secoes .rola { line-height: 1.12; }
.menu-secoes .rola > span { text-shadow: 0 1.5em currentColor; transition-duration: .7s; transition-delay: calc(var(--l) * 18ms); }
@media (hover: hover) { .menu-secoes .secao:hover .rola > span { translate: 0 -1.5em; } }
.look .ler > span { background-position: 0 100%; }

/* luz que segue o mouse nos quadros das maisons */
.etiqueta, .maison-cartao { background-image: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--tinta) 10%, transparent), transparent 70%);
  background-size: 100% 100%; background-repeat: no-repeat; }
.etiqueta:not(:hover), .maison-cartao:not(:hover) { background-image: none; }
.etiqueta .logo-caixa { transition: scale .55s var(--saida), translate .55s var(--saida); }
@media (hover: hover) { .etiqueta:hover .logo-caixa { translate: 0 -3px; } .etiqueta small { transition: color .3s, letter-spacing .5s var(--saida); } .etiqueta:hover small { color: var(--tinta); letter-spacing: .08em; } }

/* faixa de manchetes: a manchete em foco cresce de leve e as outras recuam */
.fita-item { transition: color .3s, opacity .35s; }
@media (hover: hover) { .fita:hover .fita-item { opacity: .45; } .fita .fita-item:hover { opacity: 1; color: var(--tinta); } }

/* ímãs: o deslocamento vem do JS; aqui só o "afundar" ao clicar */
.hover-fisico :is(.topo .icone, .topo .rotulo, .trilho-item, .botao, .prov-acoes button, .prov-topo .voltar) { will-change: translate; }

/* cursor que diz o que vai acontecer */
.cursor-ler { transform-origin: 0 0; will-change: transform; }
.cursor-ler.ligado span { transition: scale .7s var(--suave), opacity .5s var(--suave), padding .6s var(--suave), background-color .3s, color .3s; }
.cursor-ler.apertado span { scale: .86 !important; }
.cursor-ler[data-zona="Arrastar"] span::before, .cursor-ler[data-zona="Arrastar"] span::after { content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--seta) center / contain no-repeat; mask: var(--seta) center / contain no-repeat;
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E"); }
.cursor-ler[data-zona="Arrastar"] span::before { rotate: 180deg; }

.cursor-ler[data-zona="Ampliar"] span::after { --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }
.cursor-proprio .maisons-pista { cursor: grab; }