/* Site de notícias do Vinicius (20/10/2026). Marca dos reels: tinta #121316, ouro #E8C15A.
   Assinatura: a barra dourada de progresso dos vídeos vira a barra de leitura e a marca da notícia mais nova.
   Temas para o Doutor escolher: b = jornal de bolso em lista, c = capa do dia. Sem miniatura: a capa do reel é
   um cartão de texto, fica só como imagem de compartilhamento. */

@font-face { font-family: "Newsreader"; src: url("/fontes/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fontes/Newsreader-Italic.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fontes/Geist.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --tinta: #121316;
  --papel: #ECEEF0;
  --ouro: #E8C15A;
  --cinza: #5B6470;
  --alerta: #B8342A;
  --fundo: var(--papel);
  --texto: var(--tinta);
  --suave: var(--cinza);
  --serifa: "Newsreader", Georgia, "Times New Roman", serif;
  --sem: "Geist", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--serifa); font-size: 1.1875rem; line-height: 1.6;
  padding: env(safe-area-inset-top) max(1.25rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1.25rem, env(safe-area-inset-left));
}
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }

/* --- assinatura e parceria (bio) --- */
.assinatura { display: flex; gap: 0.875rem; align-items: center; max-width: 44rem; margin: 2rem auto 1.5rem; }
.avatar { border-radius: 50%; flex: none; }
.assinatura h1 { font-family: var(--serifa); font-size: 1.5rem; font-weight: 650; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
.assinatura p { font-family: var(--sem); font-size: 0.9375rem; color: var(--suave); margin: 0.2rem 0 0; line-height: 1.35; }
.parceria {
  max-width: 44rem; margin: 0 auto 1.75rem; padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--suave) 45%, transparent);
  border-radius: 10px; font-family: var(--sem); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline;
}
.parceria-marca { color: var(--suave); font-size: 0.8125rem; }
.parceria a { font-weight: 600; text-underline-offset: 3px; }
.vazio { font-family: var(--sem); color: var(--suave); max-width: 44rem; margin: 2rem auto; }

/* --- lista de notícias --- */
.noticias { list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; }
.noticia a { text-decoration: none; display: grid; }
.noticia time { font-family: var(--sem); font-size: 0.8125rem; color: var(--suave); display: block; }
.noticia .titulo { display: block; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.noticia .linha-fina { display: block; color: var(--suave); font-size: 1rem; margin-top: 0.35rem; }
.noticia a:hover .titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* b = jornal de bolso: título grande em lista, a mais nova com a barra dourada à esquerda */
[data-tema="b"] .noticia a, [data-tema="c"] .noticia:not(.nova) a { padding: 1.1rem 0 1.1rem 1rem; border-left: 3px solid transparent; }
[data-tema="b"] .noticia + .noticia a, [data-tema="c"] .noticia + .noticia a { border-top: 1px solid color-mix(in srgb, var(--suave) 25%, transparent); }
[data-tema="b"] .noticia .titulo { font-size: 1.5rem; line-height: 1.18; margin-top: 0.2rem; }
[data-tema="b"] .noticia.nova a { border-left-color: var(--ouro); }
[data-tema="b"] .noticia.nova .titulo { font-size: 1.875rem; }

/* c = capa do dia: a mais nova em destaque tipográfico sob a barra dourada, o resto em lista compacta */
[data-tema="c"] .noticia.nova a { padding: 1.25rem 0 1.75rem; border-top: 6px solid var(--ouro); }
[data-tema="c"] .noticia.nova .titulo { font-size: clamp(2.25rem, 9vw, 3.25rem); line-height: 1.04; letter-spacing: -0.022em; margin-top: 0.4rem; }
[data-tema="c"] .noticia.nova .linha-fina { font-size: 1.125rem; margin-top: 0.75rem; }
[data-tema="c"] .noticia:not(.nova) .titulo { font-size: 1.25rem; line-height: 1.2; }
[data-tema="c"] .noticia:not(.nova) a { padding-left: 0; border-left: 0; }   /* alinhado com o destaque */

/* --- leitura: a matéria sempre em papel claro --- */
body.leitura { --fundo: var(--papel); --texto: var(--tinta); --suave: var(--cinza); }
.voltar { max-width: 40rem; margin: 1.5rem auto 0; font-family: var(--sem); font-size: 0.9375rem; }
.voltar a { color: var(--suave); text-underline-offset: 3px; }
article { max-width: 40rem; margin: 0 auto; }
article h1 { font-size: clamp(2rem, 6.5vw, 2.875rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 650; margin: 1.25rem 0 0.75rem; text-wrap: balance; }
article .linha-fina { font-size: 1.25rem; line-height: 1.45; color: #2E343C; margin: 0 0 1rem; }
article .autoria { font-family: var(--sem); font-size: 0.875rem; color: var(--suave); margin: 0 0 2rem; padding-bottom: 1.25rem; border-bottom: 3px solid var(--ouro); width: fit-content; }
article > p { margin: 0 0 1.15em; }
article h2 { font-size: 1.375rem; line-height: 1.25; margin: 2.25rem 0 0.5rem; }
.correcao { font-family: var(--sem); font-size: 0.9375rem; border-left: 3px solid var(--alerta); padding-left: 0.875rem; }
.fontes { margin: 2.5rem 0 3rem; font-family: var(--sem); font-size: 0.9375rem; }
.fontes h2 { font-family: var(--serifa); }
.fontes ul { padding-left: 1.1rem; margin: 0.5rem 0 0; }
.fontes li { margin: 0.35rem 0; }
.fontes a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* barra de leitura dourada (a mesma dos reels), sem script; some onde o navegador não suporta */
.progresso { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(0); z-index: 10; }
@supports (animation-timeline: scroll()) {
  .progresso { animation: ler linear both; animation-timeline: scroll(root); }
  @keyframes ler { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .progresso { display: none; } }

/* parceria na matéria (20/10): no fim do texto ou faixa pequena no rodapé que se fecha; nunca cobre a notícia */
.parceria-materia { margin: 2rem 0 0; padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--suave) 45%, transparent);
  border-radius: 10px; font-family: var(--sem); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.parceria-materia a, .parceria-faixa a { font-weight: 600; text-underline-offset: 3px; }
.parceria-faixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem max(1rem, env(safe-area-inset-right)) calc(0.625rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: var(--tinta); color: #F2F0EB; font-family: var(--sem); font-size: 0.875rem; }
.parceria-faixa .parceria-marca { color: #A8ADB4; }
.parceria-faixa a { flex: 1; min-width: 0; }
.parceria-faixa button { font: inherit; color: #F2F0EB; background: none; border: 1px solid #5B6470; border-radius: 8px; min-height: 44px; padding: 0 0.875rem; cursor: pointer; }
.parceria-faixa[hidden] { display: none; }
body.leitura:has(.parceria-faixa:not([hidden])) .rodape { margin-bottom: 6rem; }

.rodape { max-width: 44rem; margin: 3rem auto 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-family: var(--sem); font-size: 0.875rem; color: var(--suave); }
.rodape a { color: var(--suave); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }


/* --- 21/10 tema "forbes" (Doutor: o perfil como o da Forbes) ------------------------------------------------------
   Bio: a grade das mesmas capas do feed (capa C), 3 colunas como a página da bio da Forbes. Matéria: papel claro para
   ler, abrindo com a foto da capa. A marca "Vinicius Lemos" é imagem (marca.png, Bodoni Moda como na capa): o site
   segue com 2 famílias de fonte (régua da casa). */
[data-tema="forbes"] body.bio { --fundo: #0E0F12; --texto: #F5F4EF; --suave: #A3A6AD; padding-left: 0; padding-right: 0; }
[data-tema="forbes"] .marca-topo { text-align: center; margin: 2.25rem auto 1.25rem; padding: 0 1.25rem; max-width: 40rem; }
[data-tema="forbes"] .marca { margin: 0; line-height: 0; }
[data-tema="forbes"] .marca img { width: min(18rem, 72vw); height: auto; margin: 0 auto; }
[data-tema="forbes"] .marca-topo p { font-family: var(--sem); font-size: 0.9375rem; color: var(--suave); margin: 0.75rem 0 0.5rem; line-height: 1.4; }
[data-tema="forbes"] .marca-topo .ig { font-family: var(--sem); font-size: 0.875rem; color: var(--suave); text-underline-offset: 3px; }
[data-tema="forbes"] .parceria-botao { display: block; max-width: 40rem; margin: 0 1.25rem 1.25rem; padding: 0.9rem 1rem; border-radius: 10px;
  background: #F5F4EF; color: #0E0F12; font-family: var(--sem); font-weight: 600; text-decoration: none; text-align: center; }
@media (min-width: 42.5rem) { [data-tema="forbes"] .parceria-botao { margin: 0 auto 1.25rem; } }
[data-tema="forbes"] .parceria-botao span { display: block; font-size: 0.75rem; font-weight: 500; color: #5B6470; margin-bottom: 0.15rem; }
[data-tema="forbes"] .grade { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 3px; }
[data-tema="forbes"] .grade a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1A1C20; }
[data-tema="forbes"] .grade img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
[data-tema="forbes"] .grade a:hover img { opacity: 0.88; }
[data-tema="forbes"] .grade a:focus-visible { outline: 3px solid var(--ouro); outline-offset: -3px; }
[data-tema="forbes"] body.bio .rodape { border-top-color: #26292E; }
[data-tema="forbes"] .foto-abre { margin: 0 0 1.75rem; }
[data-tema="forbes"] .foto-abre img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }

/* cartão de parceria (só na matéria): preso no rodapé, no máximo ~30% da tela no celular, sem escurecer o texto */
.parceria-cartao { position: fixed; z-index: 10; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom));
  max-height: 32vh; overflow: auto; background: #F5F4EF; color: #121316; border-radius: 14px; padding: 1rem 2.75rem 0.9rem 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); font-family: var(--sem); font-size: 0.9375rem; line-height: 1.4;
  animation: pc-sobe 0.28s ease-out; }
@media (min-width: 42.5rem) { .parceria-cartao { left: auto; right: 1.25rem; width: 22.5rem; } }
@media (prefers-reduced-motion: reduce) { .parceria-cartao { animation: none; } }
@keyframes pc-sobe { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.pc-fechar { position: absolute; top: 0.25rem; right: 0.25rem; width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 1.75rem; line-height: 1; color: #5B6470; cursor: pointer; border-radius: 8px; }
.pc-fechar:focus-visible { outline: 3px solid var(--ouro); }
.pc-rotulo { display: block; font-size: 0.75rem; font-weight: 600; color: #5B6470; margin-bottom: 0.4rem; }
.pc-imagem { width: 100%; height: auto; border-radius: 8px; margin-bottom: 0.6rem; }
.pc-texto { margin: 0 0 0.6rem; font-weight: 600; }
.pc-link { display: inline-block; background: #121316; color: #F5F4EF; text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 8px; font-weight: 600; }
.pc-aviso { display: block; margin-top: 0.5rem; color: #5B6470; font-size: 0.75rem; }
[data-tema="forbes"] body.bio .rodape { padding: 0 1.25rem; }
[data-tema="forbes"] .parceria-extra { background: transparent; color: #F5F4EF; border: 1px solid #3A3D44; margin-top: -0.5rem; }
[data-tema="forbes"] .parceria-extra span { color: #A3A6AD; }

/* 22/10 pop-up de imagem da parceria (_parceria.html) */
.pp { position: fixed; z-index: 20; }
.pp-centro { inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(8, 9, 11, 0.62); }
.pp-rodape { left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
@media (min-width: 42.5rem) { .pp-rodape { left: auto; right: 1.25rem; width: 15rem; } }
.pp[hidden] { display: none; }
.pp-caixa { position: relative; width: min(21rem, 100%); animation: pp-entra 0.25s ease-out; }
.pp-rodape .pp-caixa { width: min(11rem, 46vw); margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .pp-caixa { animation: none; } }
@keyframes pp-entra { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-link img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.pp-fechar { position: absolute; top: -0.9rem; right: -0.9rem; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #F5F4EF; color: #121316; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.pp-fechar:focus-visible { outline: 3px solid var(--ouro); }
.pp-aviso { margin: 0.45rem 0 0; font-family: var(--sem); font-size: 0.6875rem; color: #C9C7C1; text-align: right; }
.pp-rodape .pp-aviso { color: #5B6470; }