/* Site do Thácio Siqueira.
   Um site de leitura: o texto manda, o resto se afasta.
   Feito primeiro para o celular — é de onde vem quase todo mundo. */

:root {
  --papel: #fbf8f3;
  --tinta: #23201c;
  --tinta-fraca: #6b635a;
  --linha: #e3dcd1;
  --ouro: #a9863f;
  --ouro-escuro: #8a6c2f;
  --escuro: #1a1714;
  --leitura: 1.7;

  /* Superfície: o cartão precisa de um chão um tico diferente do papel, senão
     a borda faz sozinha um trabalho que a luz devia fazer. */
  --superficie: #ffffff;
  --superficie-2: #f4eee4;
  --sombra: 0 1px 2px rgba(35,32,28,.04), 0 8px 24px -12px rgba(35,32,28,.18);
  --sombra-alta: 0 2px 4px rgba(35,32,28,.05), 0 18px 40px -18px rgba(35,32,28,.30);
  --curva: 14px;

  /* TRÊS famílias, cada uma com um ofício — é isto que faz o site parar de
     parecer um documento e virar uma página composta:

       --display  Cormorant Garamond, para títulos e para a marca. Serifa de
                  contraste alto, desenhada para tamanho grande; em corpo de
                  texto ela é fina demais e cansa. É a MESMA das artes dos
                  anúncios dele, e é isso que costura o site à propaganda.
       --serifa   Lora, para ler. Robusta, com itálico de verdade, feita para
                  parágrafo longo — e são 112 textos aqui dentro.
       --sans     Nunito, para tudo o que não é texto: menu, botão, preço,
                  etiqueta, data. Também já vinha das artes.

     Cada uma tem a sua reserva local logo atrás: se a fonte não chegar, a
     página continua composta em vez de cair tudo para o mesmo Times. */
  --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --serifa: Lora, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Nunito, ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #16130f;
    --tinta: #ece5da;
    --tinta-fraca: #a49a8c;
    --linha: #2e2820;
    --ouro: #d0aa5c;
    --ouro-escuro: #e0bd76;
    --escuro: #0f0d0a;
    --superficie: #1e1a15;
    --superficie-2: #241f18;
    --sombra: 0 1px 2px rgba(0,0,0,.30), 0 10px 28px -14px rgba(0,0,0,.60);
    --sombra-alta: 0 2px 6px rgba(0,0,0,.35), 0 22px 48px -20px rgba(0,0,0,.75);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serifa);
  font-size: 1.0625rem;
  line-height: var(--leitura);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 50rem) { body { font-size: 1.125rem; } }

/* No monitor de PC o site continuava com letra de celular: 18px de texto no
   meio de 1920px de tela, numa coluna de 992px. Dava a impressão de zoom
   diminuído. Em vez de mexer em cinquenta tamanhos um por um, cresce o PASSO
   — quase tudo aqui está em rem, então letra, coluna, espaço e botão crescem
   na mesma proporção e nada se desmonta. A conta destas faixas usa sempre
   16px (media query ignora o font-size do html), então não há laço. */
@media (min-width: 80rem)  { html { font-size: 106.25%; } }  /* ≥1280px → 17px */
@media (min-width: 100rem) { html { font-size: 112.5%;  } }  /* ≥1600px → 18px */
@media (min-width: 120rem) { html { font-size: 118.75%; } }  /* ≥1920px → 19px */

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro-escuro); }

.pular {
  position: absolute; left: -9999px;
}
.pular:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--escuro); color: #fff; padding: .6rem 1rem; border-radius: 6px;
}

/* ── topo ── */

/* No celular a marca fica em cima e o menu embaixo, rolando na horizontal —
   é o único jeito honesto de caber oito itens sem quebrar em três linhas.
   No desktop os dois dividem a mesma linha, dentro da largura do conteúdo:
   antes a marca ficava colada na quina esquerda da tela e o miolo no meio,
   e nada parecia pertencer a nada. */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--escuro) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(169,134,63,.22);
  padding: .85rem 1.25rem .75rem;
}
.topo > * { max-width: 68rem; margin-inline: auto; }
.marca {
  display: block;
  color: #f3ece0;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: .01em;
}
.menu {
  margin-top: .5rem;
  display: flex;
  gap: .25rem 1.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .15rem;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  position: relative;
  flex: 0 0 auto;
  color: #b9ae9c;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .01em;
  padding-bottom: .25rem;
  transition: color .15s;
}
.menu a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--ouro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.menu a:hover, .menu a[aria-current="page"] { color: #f0e4cc; }
.menu a[aria-current="page"]::after, .menu a:hover::after { transform: scaleX(1); }

@media (min-width: 52rem) {
  .topo {
    display: flex;
    align-items: baseline;
    gap: 2.5rem;
    padding: 1rem 2rem .95rem;
  }
  .topo > * { margin-inline: 0; }
  .topo::before {
    content: ""; position: absolute; inset: 0;
    max-width: none; pointer-events: none;
  }
  .marca { flex: 0 0 auto; }
  .menu { margin-top: 0; flex: 1 1 auto; justify-content: flex-end; overflow: visible; }
}

/* ── largura de leitura ── */

main { padding: 0 1.25rem; }
.capa, .bloco, .texto, .blog, .estante, .vizinhos, .mais {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── herói da home ──
   Uma foto boa no lugar do vídeo de fundo: dá o mesmo clima e abre na hora,
   inclusive no celular com internet ruim. */

.heroi {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  margin: 0 -1.25rem;
}
.heroi-fundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.heroi::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,.55), rgba(10,8,6,.78));
  z-index: 1;
}
.heroi-texto { position: relative; z-index: 2; padding: 3rem 1.5rem; color: #f6efe3; }
.heroi-texto .sobrancelha { color: #d8c9ad; }
.heroi-texto h1 {
  font-size: clamp(2.4rem, 11vw, 4.5rem);
  margin: 0 0 .6rem;
  font-weight: 400;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.heroi-texto .subtitulo { color: #ece1cd; font-size: 1.15rem; margin: 0 0 .2rem; }
.heroi-texto .subtitulo-2 { color: #c3b69f; font-size: 1rem; margin: 0 0 1.6rem; }
.heroi-texto .cta { justify-content: center; margin-top: 1.8rem; }

/* ── apresentação com retrato ── */

.apresentacao {
  max-width: 52rem;
  margin: 2.5rem auto;
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 46rem) {
  .apresentacao { grid-template-columns: 18rem 1fr; gap: 2.5rem; }
}
.retrato {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}
.apresentacao-texto h2 { margin-top: 0; }

/* ── prateleira rolante de capas ── */

.bloco-largo { max-width: 62rem; margin: 2.5rem auto; }
.prateleira-rolante {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  padding: .5rem .25rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.capa-livro { flex: 0 0 auto; scroll-snap-align: start; }
.capa-livro img {
  width: 9.5rem; height: 13.5rem;
  /* contain, não cover: recortar capa de livro come o título e a assinatura.
     As capas dele não têm todas a mesma proporção. */
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  background: var(--linha);
}
.capa-livro:hover img { transform: translateY(-3px); transition: transform .15s; }

/* ── capa da home (versão antiga, ainda usada em páginas simples) ── */

.capa { padding: 3rem 0 2.5rem; text-align: center; }
.sobrancelha {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--tinta-fraca);
  margin: 0 0 .8rem;
}
.capa h1 { font-size: clamp(2.1rem, 8vw, 3rem); margin: 0 0 .4rem; font-weight: 400; }
.subtitulo { color: var(--tinta-fraca); margin: 0 0 1.6rem; font-size: 1.05rem; }
/* Herda de blockquote, que tem barra dourada à esquerda — aqui ela briga com
   os dois filetes de cima e de baixo. Fica só o par de filetes, centrado. */
.lema-grande {
  margin: 0 0 1.8rem;
  padding: 1.4rem 0;
  border-left: 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
  color: var(--tinta);
}

/* ── blocos ── */

.bloco { padding: 2.2rem 0; }

/* Títulos na Cormorant: peso 600, tamanho generoso e entrelinha curta. É uma
   fonte de contraste alto — cresce bem e some quando é pequena, por isso ela
   NUNCA aparece em corpo de texto. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.005em;
}
h1 { font-weight: 600; }
h2 { font-size: clamp(1.75rem, 4vw, 2.2rem); margin: 0 0 .9rem; }
h3 { font-size: 1.3rem; margin: 0 0 .35rem; }

.marca { font-family: var(--display); font-weight: 600; font-size: 1.35rem; }

/* Peças de interface — menu, data, etiqueta, aviso, preço — na sem-serifa. O
   contraste entre as famílias é o que faz o texto parecer texto e o resto
   parecer navegação, sem precisar de linha nem de caixa em volta. */
.sobrancelha, .cartao-meta, .selo, .aviso, .rodape-links, .linha-fina,
.subtitulo-2, .ano h2, .prateleira h2, .livro-nome, .vizinhos span {
  font-family: var(--sans);
}

/* A sobrancelha é a peça mais pequena da página: sem peso e sem espaçamento
   ela desaparece, e é ela que diz do que a página trata antes do título. */
.sobrancelha { font-weight: 600; font-size: .7rem; letter-spacing: .2em; }

/* Estes dois são títulos de secção disfarçados de rótulo — ficam na
   sem-serifa, pequenos e espaçados, para não competirem com os h2 de
   verdade que estão logo acima. */
.ano h2, .prateleira h2 { font-weight: 600; font-size: .8rem; letter-spacing: .18em; }

/* Citação: itálico da Cormorant, um corpo acima do texto. A citação é a voz de
   outra pessoa, e tem de soar diferente da voz de quem escreve. */
blockquote { font-family: var(--display); font-size: 1.3rem; font-style: italic; }
blockquote cite { font-family: var(--sans); font-style: normal; }

/* ── botões ── */

.cta { margin: 2rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.capa .cta, .texto .cta { justify-content: center; }
.botao {
  display: inline-block;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ouro) 88%, #fff), var(--ouro));
  color: #1a1510;
  text-decoration: none;
  padding: .82rem 1.7rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.botao:hover {
  background: linear-gradient(180deg, var(--ouro), var(--ouro-escuro));
  color: #14100b;
  transform: translateY(-1px);
  box-shadow: var(--sombra-alta);
}
.botao:active { transform: translateY(0); }
.botao.vazado {
  background: transparent;
  color: var(--ouro-escuro);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ouro) 55%, transparent);
}
.botao.vazado:hover {
  background: color-mix(in srgb, var(--ouro) 12%, transparent);
  color: var(--ouro-escuro);
  box-shadow: inset 0 0 0 1px var(--ouro);
}
@media (prefers-reduced-motion: reduce) {
  .botao, .botao:hover { transform: none; transition: none; }
}

/* ── caminhos ── */

.cartoes { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
@media (min-width: 34rem) { .cartoes { grid-template-columns: 1fr 1fr; } }

/* Eram retângulos chapados de borda fina, todos iguais. Agora têm chão
   próprio, sombra e um filete dourado que só acende ao passar — e o título
   ganha uma seta que anda, para dizer que o cartão inteiro é um caminho e
   não uma caixa de texto. */
.cartao-caminho {
  position: relative;
  display: block;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--curva);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
/* o filete de cima: some por padrão, acende da esquerda para a direita */
.cartao-caminho::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ouro), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.cartao-caminho:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  border-color: color-mix(in srgb, var(--ouro) 45%, var(--linha));
}
.cartao-caminho:hover::before { transform: scaleX(1); }
.cartao-caminho h3 { transition: color .16s; }
.cartao-caminho:hover h3 { color: var(--ouro-escuro); }
.cartao-caminho h3::after {
  content: " →";
  color: var(--ouro);
  display: inline-block;
  transition: transform .18s ease;
}
.cartao-caminho:hover h3::after { transform: translateX(4px); }
.cartao-caminho p { margin: 0; color: var(--tinta-fraca); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .cartao-caminho, .cartao-caminho:hover,
  .cartao-caminho h3::after, .cartao-caminho:hover h3::after { transform: none; transition: none; }
}

/* ── lista de textos ── */

.lista-textos { display: grid; gap: .2rem; }
.cartao-texto {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .9rem;
  align-items: center;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
}
.cartao-capa img, .sem-capa {
  width: 5.5rem; height: 4rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--linha);
  display: block;
}
.cartao-titulo { display: block; line-height: 1.35; }
.cartao-texto:hover .cartao-titulo { color: var(--ouro-escuro); }
.cartao-meta { display: block; color: var(--tinta-fraca); font-size: .82rem; margin-top: .25rem; }
.mais { margin: 1.6rem 0 3rem; }
.mais a { text-decoration: none; }

.ano { margin: 2.2rem 0; }
.ano h2 {
  font-size: 1rem;
  letter-spacing: .16em;
  color: var(--tinta-fraca);
  border-bottom: 1px solid var(--linha);
  padding-bottom: .4rem;
}

/* ── texto ── */

.texto { padding: 3rem 0 1rem; }
.texto h1 { font-size: clamp(2rem, 6vw, 2.9rem); margin: 0 0 1rem; }
.linha-fina { color: var(--tinta-fraca); font-size: .95rem; margin: 0 0 1.4rem; }
.capa-do-texto { border-radius: 10px; margin: 1.4rem 0 1.8rem; }
.corpo-do-texto > :first-child { margin-top: 0; }
.corpo-do-texto p { margin: 0 0 1.35rem; }
.corpo-do-texto h2 { font-size: 1.4rem; margin: 2.2rem 0 .8rem; }
.corpo-do-texto h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
.corpo-do-texto img { border-radius: 8px; margin: 1.5rem auto; }
.corpo-do-texto ul, .corpo-do-texto ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.corpo-do-texto li { margin-bottom: .5rem; }
blockquote {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--ouro);
  font-style: italic;
  color: var(--tinta-fraca);
}
blockquote cite { display: block; margin-top: .5rem; font-size: .85rem; font-style: normal; }

/* ── vizinhos ── */

.vizinhos { display: grid; gap: .6rem; margin: 2.5rem 0 0; }
@media (min-width: 34rem) { .vizinhos { grid-template-columns: 1fr 1fr; } }
.vizinhos a {
  display: block;
  padding: .9rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font-size: .95rem;
  line-height: 1.35;
}
.vizinhos a:hover { border-color: var(--ouro); }
.vizinhos span {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: .3rem;
}
.vizinhos .proximo { text-align: right; }

/* ── estante ── */

.prateleira { margin: 2.2rem 0; }
.prateleira h2 {
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom: 1px solid var(--linha);
  padding-bottom: .4rem;
}
.livros {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 1.4rem 1rem;
}
.livro { display: flex; flex-direction: column; gap: .5rem; }
.livro-capa img, .capa-vazia {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(0,0,0,.24);
  background: var(--linha);
}
.livro-nome { font-size: .92rem; line-height: 1.3; }
.selo {
  display: inline-block;
  margin-top: .3rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro-escuro);
}

/* ── rodapé ── */

.rodape {
  margin-top: 3.5rem;
  padding: 2rem 1.25rem 2.5rem;
  background: var(--escuro);
  color: #a49a8c;
  text-align: center;
  font-size: .92rem;
}
.lema { font-style: italic; margin: 0 0 1.2rem; }
.rodape-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; }
.rodape-links a { color: #d5c8b2; text-decoration: none; }
.rodape-links a:hover { color: var(--ouro); }
.aviso { margin: 1.6rem auto 0; max-width: 34rem; font-size: .8rem; color: #7d7365; }

/* ── cursos de WhatsApp ── */

.cursos {
  display: grid;
  gap: 1.1rem;
  max-width: 68rem;
  margin: 2.5rem auto .5rem;
  padding: 0;
}
/* auto-fit, e não "1fr 1fr": com um curso só, duas colunas fixas deixavam o
   cartão ocupando metade da linha e o resto vazio.
   O mínimo é 16rem porque com QUATRO cursos e um mínimo maior sobrava um
   cartão sozinho na segunda fila, com metade da largura da página vazia ao
   lado. Assim os quatro cabem numa fila e os três da terapia também. */
.cursos { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cartao-curso {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--curva);
  box-shadow: var(--sombra);
  padding: 1.6rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.cartao-curso:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  border-color: color-mix(in srgb, var(--ouro) 45%, var(--linha));
}
.cartao-curso[hidden] { display: none; }

/* Cartão com capa: a imagem encosta nas três bordas de cima, e o texto ganha
   o recuo de volta. Por isso o padding sai do cartão e vai para os filhos —
   com padding no cartão, a capa nasceria com uma moldura de fundo em volta. */
.cartao-curso.com-capa { padding: 0 0 1.3rem; overflow: hidden; }
.cartao-curso.com-capa > *:not(.capa-curso) { margin-left: 1.5rem; margin-right: 1.5rem; }
.cartao-curso.com-capa > h2 { margin-top: 1.3rem; }
.capa-curso {
  width: 100%;
  aspect-ratio: 900 / 560;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--linha);
  transition: transform .4s ease;
}
.cartao-curso.com-capa:hover .capa-curso { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .capa-curso, .cartao-curso.com-capa:hover .capa-curso { transform: none; transition: none; }
}
.cartao-curso h2 { margin: 0 0 .55rem; font-size: 1.3rem; letter-spacing: -.01em; }
/* Cresce para ocupar a sobra: assim o preço e o botão ficam na mesma altura em
   todos os cartões, mesmo quando um título quebra em duas linhas e outro não.
   Sem isto, a fileira fica com os preços em degrau e parece desalinhada. */
.curso-resumo { margin: 0 0 1.2rem; color: var(--tinta-fraca); font-size: .98rem; flex: 1 1 auto; }
.curso-quando { margin: 0 0 1.2rem; font-family: var(--sans); font-size: .875rem; }

/* O preço é a informação que a pessoa procura primeiro no cartão — e vinha
   escondido dentro do botão, escrito com a mesma letra do resto. */
.curso-preco {
  margin: 0 0 1.2rem;
  font-family: var(--sans);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--tinta);
  line-height: 1.15;
}
/* O valor por sessão, miúdo, embaixo do preço cheio: é o que faz o pacote de
   R$ 1.500 parecer o que ele é — o encontro mais barato dos três. */
.curso-nota {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ouro-escuro);
  margin-top: .35rem;
}

/* Duas fileiras na mesma página: a de baixo tem só dois cartões e ficaria com
   eles esticados até 34rem cada. Trava a largura para que pareçam da mesma
   família dos três de cima. */
.cursos.duas { max-width: 45rem; }
.etiqueta {
  position: absolute; top: -.65rem; left: 1.4rem;
  margin: 0;
  background: var(--ouro);
  color: #1a1510;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .7rem;
  border-radius: 999px;
}
.cartao-curso.destaque {
  border-color: color-mix(in srgb, var(--ouro) 55%, var(--linha));
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
}
.cartao-curso .cta { margin: auto 0 0; justify-content: flex-start; }
.aviso-curso { font-size: .9rem; color: var(--tinta-fraca); }

/* ── Schola ── */

/* A porta fechada dita em voz alta. Quem chega numa página de curso quer saber
   isto antes de tudo: dá para entrar hoje? Escondido num parágrafo, o "as
   matrículas estão fechadas" só é lido depois de a pessoa se animar. */
.tarja {
  margin: 1.8rem 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--ouro);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--ouro) 10%, transparent);
  font-family: var(--sans);
  font-size: .98rem;
}

.estacoes { display: grid; gap: .8rem; margin: 1.6rem 0 2.2rem; }
@media (min-width: 34rem) { .estacoes { grid-template-columns: 1fr 1fr; } }
.estacoes > div {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  grid-template-rows: auto auto;
  column-gap: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--superficie);
}
.estacoes span {
  grid-row: 1 / 3;
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--ouro);
  line-height: 1;
  align-self: center;
}
.estacoes b { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.estacoes i {
  font-family: var(--sans);
  font-style: normal;
  font-size: .85rem;
  color: var(--tinta-fraca);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .cartao-curso, .cartao-curso:hover { transform: none; transition: none; }
}