:root { color-scheme: light; --bg: #faf2e9; --fg: #211a17; --text: #48413d; --dim: #6b635e; --label: #b33a29; --accent: #b33a29; --accent-text: #ffffff; --font: 'Inter', system-ui, sans-serif; --radius: 16px; --glow: #d36539; }
/* Páginas do blog. O visual vem do tema da marca, que o Farol escreve antes deste arquivo (--bg, --fg, --text,
   --dim, --label, --accent, --accent-text, --font, --radius, --glow e o color-scheme). */
:root {
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --serif: var(--font);
  --sans: var(--font);
}
* { box-sizing: border-box; }
/* o cabeçalho fixo não cobre o que recebe foco ou é alvo de âncora */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
/* o brilho da marca num canto do fundo, parado enquanto a página rola */
body { margin: 0; color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.7; letter-spacing: .02em;
  background: radial-gradient(60vw 40vw at 100% 0, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%) no-repeat fixed var(--bg); }
a { color: var(--fg); text-underline-offset: .2em; }
strong { color: var(--fg); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--fg); letter-spacing: .02em; }
h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.25; margin: 48px 0 12px; }
h3 { font-size: 22px; line-height: 1.3; margin: 32px 0 8px; }
p, ul { margin: 0 0 18px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
/* rótulos em caixa alta, como a categoria e a data */
.rotulo, .tipo, .meta, .resumo__titulo { font-family: var(--serif); font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; }
.tipo { margin: 0 0 8px; color: var(--label); }
.meta { color: var(--dim); }
@media (min-width: 720px) { body { font-size: 17px; } }

/* barra do topo das duas páginas: a marca, "Blog do ..." e o botão para o site, presa no alto sobre o que rola embaixo */
.topo { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); }
.topo .marca { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; color: var(--fg); text-decoration: none; }
.topo .marca img { height: 30px; width: auto; }
.topo :is(h1, .topo__titulo) { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; color: var(--dim); white-space: nowrap; text-overflow: ellipsis; }
.topo__titulo { text-decoration: none; }
.topo .cta { flex: none; padding: 9px 18px; font-size: 14px; line-height: 1.4; }
.artigo { max-width: 1180px; margin: 24px auto 0; padding: 0 20px; }
/* herói: capa e texto empilhados; a partir de 960 px, capa à esquerda e texto centralizado à direita */
.heroi { display: grid; gap: 28px; margin-bottom: 64px; }
/* borda fina: a capa gerada tem o mesmo fundo da página */
.heroi > img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.heroi__texto { text-align: center; }
.heroi__descricao { max-width: 30em; margin: 0 auto 20px; }
/* corpo numa coluna estreita, alinhada à esquerda e recuada no computador */
.corpo { max-width: 34em; }
figure { margin: 32px 0; }
figure img { border-radius: var(--radius); }
/* sumário e chamada final em caixas no raio da marca, no mesmo fundo dos cartões */
.resumo, .cta-caixa { border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 5%, var(--bg)); }
.resumo { margin: 0 0 40px; padding: 20px 24px; }
.resumo__titulo { margin: 0 0 12px; color: var(--fg); }
.resumo ul { margin: 0; }
.faq { margin-top: 56px; }
.cta-caixa { margin-top: 56px; padding: 28px; color: var(--fg); }
.cta { display: inline-block; padding: 12px 28px; border-radius: var(--radius); background: var(--accent); color: var(--accent-text); font-weight: 700; text-decoration: none; }
/* "Leia também": os cartões da linha do tempo, lado a lado a partir de 720 px */
.leia { margin-top: 96px; }
.leia h2 { margin: 0 0 24px; }
.cards { display: grid; gap: 16px; align-items: start; }
/* minmax(0, 1fr): uma palavra longa no título quebra a linha em vez de alargar a coluna */
@media (min-width: 720px) { .leia .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .heroi { grid-template-columns: 55fr 45fr; align-items: center; gap: 48px; }
  .corpo { margin-left: 80px; }
}
.rodape { max-width: 1180px; margin: 96px auto 0; padding: 0 20px 48px; }
.rodape nav { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
.rodape a { padding: 10px 0; color: var(--fg); text-decoration: none; }
.rodape p { margin: 0; color: var(--dim); }
.topo__titulo:hover, .rodape a:hover { text-decoration: underline; }

/* índice: a linha do tempo, com uma coluna por dia, ocupa a tela abaixo da barra do topo; o rodapé vem depois */
.tempo { display: flex; height: calc(100dvh - 72px); padding: 0 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.vazio { margin: auto; color: var(--dim); }
.coluna { flex: 0 0 306px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); scroll-snap-align: start; }
.coluna:first-child { border-left: 1px solid var(--line); }
/* a data fica no topo: só a pilha de cartões embaixo dela rola */
.coluna__data { flex: none; margin: 0; padding: 14px 10px 12px; font-family: var(--sans); font-size: 15px; line-height: 1.2; letter-spacing: 0; text-align: center; }
.coluna__data span { display: block; color: var(--label); font-weight: 600; }
.coluna__data small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--dim); }
/* o fim da pilha fica acima do seletor flutuante */
.coluna__cartoes { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 9px 96px; overflow-y: auto; scrollbar-width: none; }
.coluna__cartoes::-webkit-scrollbar { display: none; }

/* cartões: moldura no raio da marca, imagem num raio menor, e aparição em cascata dentro da coluna. O espaço interno
   cresce com o raio, e o texto do canto não cruza a curva de uma marca bem arredondada */
.cartao { flex: none; padding: max(9px, calc(var(--radius) * .3)); border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  transition: border-color .3s; animation: surge .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.cartao:hover { border-color: color-mix(in srgb, var(--fg) 32%, transparent); }
.cartao > a:not(.cartao__ig) { display: block; color: inherit; text-decoration: none; }
.cartao__moldura { position: relative; display: block; margin-bottom: 10px; overflow: hidden; border-radius: max(calc(var(--radius) - 5px), 2px); }
.cartao__moldura img { width: 100%; transition: transform .3s; }
.cartao:hover .cartao__moldura img { transform: scale(1.03); }
.cartao .tipo { margin: 0 0 6px; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; }
.cartao h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 16px; line-height: 1.35; letter-spacing: 0; }
.cartao > a:is(:hover, :focus-visible) h3 { text-decoration: underline; }
.cartao__texto { display: -webkit-box; margin: 0 0 8px; overflow: hidden; font-size: 14px; line-height: 1.5; letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cartao .meta { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; }
.cartao__ig { font-size: 13px; font-weight: 600; color: var(--label); }
/* o carrossel mostra o primeiro slide; os outros ficam empilhados embaixo dele */
.slider { position: relative; }
.slider .cartao__moldura { display: grid; }
.slider .cartao__moldura img { grid-area: 1 / 1; }
.slider .cartao__moldura img:not(:first-child), .slider__barras, .slider__voltar, .slider__avancar { visibility: hidden; }
/* com o blog.js, os slides se revezam: barras de progresso no alto e as metades da imagem voltam e avançam */
.js .slider .cartao__moldura img { visibility: visible; opacity: 0; transition: opacity .4s, transform .3s; }
.js .slider .cartao__moldura img.ativo { opacity: 1; }
.js :is(.slider__barras, .slider__voltar, .slider__avancar) { visibility: visible; }
/* um degradê escuro no alto do slide: as barras brancas aparecem também sobre slide claro */
.js .slider .cartao__moldura::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 48px; pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / .4), transparent); }
.slider__barras { position: absolute; z-index: 1; top: 10px; right: 10px; left: 10px; display: flex; gap: 4px; }
.slider__barras span { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / .35); }
.slider__barras span::after { content: ""; display: block; width: 0; height: 100%; background: #fff; }
.slider__barras span.visto::after { width: 100%; }
.slider__barras span.ativo::after { animation: barra 4s linear forwards; }
/* pausa com o foco do teclado e fora da tela; com o mouse em cima só onde há mouse, porque o toque deixaria o
   :hover preso e o carrossel parado */
.slider:is(:has(:focus-visible), .pausado) .slider__barras span.ativo::after { animation-play-state: paused; }
@media (hover: hover) { .slider:hover .slider__barras span.ativo::after { animation-play-state: paused; } }
.slider__voltar, .slider__avancar { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; padding: 0; border: 0; background: none; cursor: pointer; }
.slider__voltar { left: 0; }
.slider__avancar { right: 0; }
.slider__voltar:focus-visible, .slider__avancar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@keyframes barra { to { width: 100%; } }
.cartao__play { position: absolute; inset: 0; width: 56px; height: 56px; margin: auto; border-radius: 50%; background: rgb(0 0 0 / .55)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 24px no-repeat; }
@keyframes surge { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

/* setas do blog.js: nas bordas da linha do tempo e no alto e no fim de uma coluna que rola. Aparecem com o mouse
   em cima ou com o foco do teclado; no toque, o dedo rola sozinho */
.tempo.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.coluna { position: relative; }
.seta { position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; color: var(--fg); cursor: pointer;
  opacity: 0; transition: opacity .3s; }
.seta[hidden] { display: none; }
.seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seta--esq, .seta--dir { top: 72px; width: 48px; height: calc(100dvh - 72px); }
.seta--esq { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.seta--dir { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.seta--cima, .seta--baixo { left: 0; right: 0; height: 44px; }
.seta--cima { background: linear-gradient(var(--bg), transparent); }
.seta--baixo { bottom: 0; background: linear-gradient(to top, var(--bg), transparent); }
.seta:is(:hover, :focus-visible), .coluna:hover > .seta { opacity: 1; }
@media (hover: none) { .seta { display: none; } }

/* seletor das visões, flutuando no rodapé da tela; só aparece com o blog.js */
.visoes { position: fixed; z-index: 2; bottom: 24px; left: 50%; display: none; gap: 4px; padding: 6px; transform: translateX(-50%);
  border-radius: calc(var(--radius) + 6px); background: color-mix(in srgb, var(--fg) 10%, var(--bg)); box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.js .visoes { display: flex; }
.visoes button { position: relative; z-index: 1; padding: 8px 14px; border: 0; border-radius: var(--radius); background: none; color: var(--text);
  font: 600 14px/1.2 var(--sans); cursor: pointer; transition: color .35s; }
.visoes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.visoes.desliza button[aria-pressed="true"] { background: none; }
.visoes__fundo { position: absolute; top: 6px; left: 0; height: calc(100% - 12px); border-radius: var(--radius); background: var(--accent);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1); }

/* Anos: todos os cartões numa grade em alvenaria, com o ano parado no alto enquanto a grade rola */
.tempo[data-visao="anos"] { display: block; padding: 0 24px 96px; overflow: hidden auto; scroll-snap-type: none; }
.ano__titulo { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 0 12px; background: var(--bg); color: var(--label);
  font: 600 15px/1.2 var(--sans); letter-spacing: 0; text-align: center; }
.ano__cartoes { columns: 260px; column-gap: 10px; }
.ano__cartoes .cartao { margin-bottom: 10px; break-inside: avoid; }

/* celular: uma coluna quase na largura da tela, e a rolagem lateral para em cada uma */
@media (max-width: 720px) {
  /* no celular, o índice fica com a marca e o botão, e o <h1> continua para o leitor de tela. No artigo, o espaço do
     botão fica para a volta ao blog: a marca já leva ao site */
  .topo { height: 64px; padding: 0 16px; }
  .topo h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .topo .marca { flex: 1; min-width: 0; overflow: hidden; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; }
  .topo:has(.topo__titulo) .marca { flex: none; max-width: 50%; }
  .topo:has(.topo__titulo) .cta { display: none; }
  .topo .cta { padding: 8px 12px; font-size: 13px; }
  .tempo { height: calc(100dvh - 64px); padding: 0; scroll-snap-type: x mandatory; }
  .seta--esq, .seta--dir { top: 64px; height: calc(100dvh - 64px); }
  .coluna { flex-basis: min(86vw, 340px); }
  .visoes { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}