@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fontes/playfair-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fontes/playfair-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fontes/playfair-italic-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fontes/playfair-italic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Carta de carreira, estilo único do site.
   Mexeu aqui, mudou no índice e em todas as edições.

   Mesma casa dos painéis da takai (social media, calculadora, financeiro,
   OKRs): fundo claro com duas manchas fixas da marca, molduras de vidro com
   as células brancas soltas dentro, pílulas de vidro na navegação, cantos
   bem arredondados e sombra baixa.

   O que não vem dos painéis é a identidade da carta: a base #f7f4f2, o rosa
   #d9a7a1 como cor de ação e a Helvetica no título e no corpo, com a Playfair
   itálica nas citações. Os painéis usam terracota e Cormorant; aqui o
   tratamento é o mesmo, a tipografia e a cor são as da carta.

   O rosa aparece como ele é, com texto escuro em cima (8,2:1). Como ele quase
   não contrasta com branco (2,1:1), o botão ganha uma borda mais fechada para
   ter silhueta. Texto rosa sobre fundo claro é o único caso que exige tom
   escurecido. */

:root {
  --surface: #f7f4f2;
  --papel: #ffffff;
  --ink: #1f1a19;
  --ink-secondary: #5c4a47;
  --ink-muted: #6a5450;
  --borda: rgba(31, 26, 25, 0.07);
  --linha: rgba(31, 26, 25, 0.12);
  --accent: #d9a7a1;        /* a cor da marca, usada como ela é */
  --accent-borda: #c98179;  /* dá silhueta ao botão sobre fundo claro */
  --accent-forte: #7d4e49;  /* só onde texto rosa precisa de contraste */
  --accent-tint: #f7e5e3;
  --oliva: #5f6752;         /* a segunda cor do logo, em detalhe */
  --destaque: #d9a7a1;
  --btn-ink: #1f1a19;
  --btn-bg: #d9a7a1;

  /* vidro */
  --vidro: rgba(252, 251, 247, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.75);
  --vidro-moldura:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36)),
    radial-gradient(520px 260px at 15% -10%, rgba(217, 167, 161, 0.2), transparent 70%),
    radial-gradient(520px 260px at 92% 110%, rgba(95, 103, 82, 0.1), transparent 70%);
  --vidro-luz: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --desfoque: blur(22px) saturate(1.5);

  /* as duas manchas da marca, paradas no fundo da página */
  --fundo-fluido:
    radial-gradient(1100px 700px at 12% -8%, rgba(217, 167, 161, 0.38), transparent 62%),
    radial-gradient(900px 620px at 100% 2%, rgba(95, 103, 82, 0.12), transparent 58%),
    radial-gradient(800px 560px at 88% 104%, rgba(217, 167, 161, 0.22), transparent 60%);

  --sombra: 0 1px 2px rgba(31, 26, 25, 0.03), 0 10px 30px -18px rgba(31, 26, 25, 0.22);
  --sombra-alta: 0 2px 6px rgba(31, 26, 25, 0.05), 0 20px 50px -24px rgba(31, 26, 25, 0.3);
  --sombra-celula: 0 1px 2px rgba(31, 26, 25, 0.03);

  --r-vidro: 30px;
  --r-g: 24px;
  --r-m: 18px;
  --largura: 40rem;

  --card-1: #f6e3e0;
  --card-2: #e7ece2;
  --card-3: #f7e7db;

  /* Helvetica em tudo, título e corpo. Ela não precisa de arquivo hospedado
     nem de licença de web: em Apple já vem instalada, e fora dela a Arial tem
     as mesmas métricas, então substitui sem alterar o layout. O contraste da
     página vem da Playfair nas citações, não de uma segunda fonte de texto. */
  --helvetica: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --titulo: var(--helvetica);
  --corpo: var(--helvetica);
  --citacao: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: var(--corpo);
  color-scheme: light;
}

/* No escuro o vidro inverte: a folha fica escura e translúcida, a luz de cima
   quase desaparece e as manchas da marca ficam mais presentes para o fundo
   não virar um cinza chapado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #161313;
    --papel: #211d1c;
    --ink: #f4f1f1;
    --ink-secondary: #cbc3c2;
    --ink-muted: #bcb0af;
    --borda: rgba(244, 241, 241, 0.09);
    --linha: rgba(244, 241, 241, 0.14);
    --accent: #d9a7a1;
    --accent-borda: #d9a7a1;
    --accent-forte: #e3bcb7;
    --accent-tint: rgba(217, 167, 161, 0.18);
    --oliva: #9aa78b;
    --destaque: #d9a7a1;
    --btn-ink: #161313;
    --btn-bg: #d9a7a1;
    --vidro: rgba(33, 29, 28, 0.66);
    --vidro-borda: rgba(255, 255, 255, 0.1);
    --vidro-moldura:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
      radial-gradient(520px 260px at 15% -10%, rgba(217, 167, 161, 0.06), transparent 70%),
      radial-gradient(520px 260px at 92% 110%, rgba(154, 167, 139, 0.04), transparent 70%);
    --vidro-luz: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --fundo-fluido:
      radial-gradient(1100px 700px at 12% -8%, rgba(217, 167, 161, 0.18), transparent 62%),
      radial-gradient(900px 620px at 100% 2%, rgba(154, 167, 139, 0.11), transparent 58%),
      radial-gradient(800px 560px at 88% 104%, rgba(217, 167, 161, 0.12), transparent 60%);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -18px rgba(0, 0, 0, 0.6);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 50px -24px rgba(0, 0, 0, 0.7);
    --sombra-celula: 0 1px 2px rgba(0, 0, 0, 0.25);
    --card-1: #2b2220;
    --card-2: #232722;
    --card-3: #2c2420;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface: #161313;
  --papel: #211d1c;
  --ink: #f4f1f1;
  --ink-secondary: #cbc3c2;
  --ink-muted: #bcb0af;
  --borda: rgba(244, 241, 241, 0.09);
  --linha: rgba(244, 241, 241, 0.14);
  --accent: #d9a7a1;
  --accent-borda: #d9a7a1;
  --accent-forte: #e3bcb7;
  --accent-tint: rgba(217, 167, 161, 0.18);
  --oliva: #9aa78b;
  --destaque: #d9a7a1;
  --btn-ink: #161313;
  --btn-bg: #d9a7a1;
  --vidro: rgba(33, 29, 28, 0.66);
  --vidro-borda: rgba(255, 255, 255, 0.1);
  --vidro-moldura:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
    radial-gradient(520px 260px at 15% -10%, rgba(217, 167, 161, 0.06), transparent 70%),
    radial-gradient(520px 260px at 92% 110%, rgba(154, 167, 139, 0.04), transparent 70%);
  --vidro-luz: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --fundo-fluido:
    radial-gradient(1100px 700px at 12% -8%, rgba(217, 167, 161, 0.18), transparent 62%),
    radial-gradient(900px 620px at 100% 2%, rgba(154, 167, 139, 0.11), transparent 58%),
    radial-gradient(800px 560px at 88% 104%, rgba(217, 167, 161, 0.12), transparent 60%);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -18px rgba(0, 0, 0, 0.6);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 50px -24px rgba(0, 0, 0, 0.7);
  --sombra-celula: 0 1px 2px rgba(0, 0, 0, 0.25);
  --card-1: #2b2220;
  --card-2: #232722;
  --card-3: #2c2420;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0 1.25rem;
  background: var(--fundo-fluido), var(--surface);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--corpo);
  font-size: 1.08rem;
  line-height: 1.78;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}

/* A moldura de vidro, repetida nos blocos que são "peça" e não texto corrido.
   Dentro dela as células são opacas, como nos painéis. */
.hero,
.grupo,
.sobre,
.cta,
.relacionadas {
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-vidro);
  background: var(--vidro-moldura);
  -webkit-backdrop-filter: var(--desfoque);
  backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra-alta), var(--vidro-luz);
}

/* O rótulo miúdo e tracado dos painéis, usado em tudo que é etiqueta de
   seção e não título. */
.grupo__titulo,
.relacionadas__titulo,
.card__etiqueta,
.meta {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- topo e rodapé ---------- */

/* A pílula de vidro grudada no topo: a peça mais evidente do sistema. */
.topo {
  position: sticky; top: 12px; z-index: 30;
  max-width: var(--largura); margin: 14px auto 1.6rem;
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 7px 7px 7px 1rem;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--sombra-alta);
}
.topo__marca {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--ink);
}
.topo__marca img { height: 24px; width: auto; }
.topo__marca span {
  font-family: var(--titulo); font-weight: 800;
  letter-spacing: -0.015em; font-size: 0.95rem; line-height: 1;
  white-space: nowrap;
}
.topo__marca:hover { color: var(--accent-forte); }

/* Menu de assuntos em pílulas. Rola na horizontal em vez de quebrar linha,
   para a barra ficar sempre de uma altura só. */
.menu {
  display: flex; gap: 4px;
  margin-left: auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
  font-family: var(--sans);
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: none;
  padding: 0.6rem 0.85rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-secondary);
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.menu a:hover { background: var(--accent-tint); color: var(--ink); }
.menu a[aria-current="page"] {
  background: var(--ink); color: var(--surface);
  box-shadow: 0 10px 22px -12px rgba(31, 26, 25, 0.65);
}

@media (max-width: 620px) {
  .topo {
    position: static; flex-wrap: wrap; gap: 0.35rem;
    border-radius: var(--r-g); padding: 0.9rem 0.75rem 0.75rem;
  }
  .topo__marca { padding-left: 0.25rem; }
  .topo__marca span { font-size: 0.88rem; }
  .menu { width: 100%; margin-left: 0; }
}

.rodape {
  max-width: var(--largura); margin: 0 auto; padding: 2rem 0 3rem;
  border-top: 1px solid var(--linha);
  font-family: var(--sans);
  font-size: 0.85rem; color: var(--ink-muted);
}
.rodape p { margin: 0 0 0.75rem; }
.rodape__bio { color: var(--ink-secondary); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.rodape a { color: var(--ink-secondary); text-decoration: none; }
.rodape a:hover { color: var(--accent-forte); text-decoration: underline; }

main { max-width: var(--largura); margin: 0 auto; padding: 0 0 4rem; }

/* ---------- barra de progresso ---------- */

.progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent); z-index: 40; transition: width 80ms linear;
}

/* ---------- cabeçalho da edição ---------- */

/* O artigo não vira moldura: o texto corre direto sobre o fundo, que é onde
   as manchas da marca aparecem. O vidro fica nas peças ao redor. */
.cabecalho { padding: 1.5rem 0 1.5rem; border-bottom: 1px solid var(--linha); margin-bottom: 2rem; }
.etiqueta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--btn-ink); background: var(--accent);
  padding: 0.45rem 0.85rem; border-radius: 999px; margin-bottom: 1.1rem;
}
h1 {
  font-family: var(--titulo);
  font-size: clamp(2.1rem, 6.5vw, 3rem); line-height: 1.08;
  letter-spacing: -0.03em; margin: 0 0 0.75rem; font-weight: 800;
}
.subtitulo {
  font-family: var(--citacao); font-style: italic;
  font-size: 1.28rem; line-height: 1.45; color: var(--ink-secondary);
  margin: 0 0 1.25rem;
}
.meta { margin: 0; }

/* ---------- corpo do texto ---------- */

article h2 {
  font-family: var(--titulo);
  font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.02em;
  margin: 2.75rem 0 0.85rem; font-weight: 800;
}
article h3 {
  font-family: var(--titulo);
  font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 0.6rem; font-weight: 700;
}
article p { margin: 0 0 1.25rem; }
article ul, article ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
article li { margin-bottom: 0.55rem; }
article a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
article a:hover { color: var(--accent-forte); }
article strong { font-weight: 700; }
article del { color: var(--ink-muted); text-decoration-thickness: 1px; }
article img { max-width: 100%; height: auto; border-radius: var(--r-m); margin: 1.5rem 0; }
article hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }
article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--papel);
  border: 1px solid var(--borda); border-radius: 6px; padding: 0.1em 0.35em;
}
article blockquote {
  margin: 1.9rem 0; padding: 0.25rem 0 0.25rem 1.35rem;
  border-left: 3px solid var(--accent); color: var(--ink-secondary);
  font-family: var(--citacao); font-style: italic;
  font-size: 1.22rem; line-height: 1.5;
}
article blockquote p { margin: 0 0 0.85rem; }
article blockquote p:last-child { margin-bottom: 0; }

/* Célula opaca com uma barra de cor por dentro, como as notas dos painéis. */
.callout {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-celula), inset 3px 0 0 var(--destaque);
  padding: 1.15rem 1.35rem; margin: 1.75rem 0;
  font-size: 1rem;
}
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }
.callout--exercicio { box-shadow: var(--sombra-celula), inset 3px 0 0 var(--oliva); }

/* ---------- chamada para o serviço ---------- */

.cta {
  margin: 3.5rem 0 0; padding: 2.2rem 1.75rem;
  text-align: center;
}
.cta__titulo { font-size: 1.4rem; line-height: 1.25; margin: 0 0 0.75rem; font-weight: 700; letter-spacing: -0.02em; }
.cta__texto { font-size: 1.02rem; color: var(--ink-secondary); margin: 0 0 1.5rem; }
.cta__botao {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-ink); background: var(--btn-bg);
  border: 1px solid var(--accent-borda);
  padding: 1rem 1.9rem; border-radius: 999px;
  box-shadow: 0 10px 22px -14px rgba(31, 26, 25, 0.6);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.cta__botao:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(31, 26, 25, 0.65); }
.cta__nota { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-muted); margin: 1rem 0 0; }

/* ---------- outras partes da série ---------- */

.relacionadas { margin-top: 3rem; padding: 1.4rem 1.5rem 1.5rem; }
.relacionadas__titulo { margin: 0 0 0.9rem; }
.rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rel li {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--r-m); box-shadow: var(--sombra-celula);
}
.rel a {
  display: flex; gap: 0.85rem; align-items: baseline;
  padding: 0.9rem 1.1rem; text-decoration: none; color: var(--ink);
}
.rel a:hover .rel__titulo { color: var(--accent-forte); }
.rel__num {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent-forte); min-width: 1.1rem;
}
.rel__titulo { font-size: 1rem; line-height: 1.35; }

/* ---------- voltar ao topo ---------- */

.ao-topo {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  border: 1px solid var(--vidro-borda); border-radius: 999px;
  background: var(--vidro); color: var(--ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  cursor: pointer; box-shadow: var(--sombra-alta);
  /* escondido até a pessoa descer o suficiente para o botão fazer sentido */
  opacity: 0; visibility: hidden; transform: translateY(0.5rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms,
              background 150ms ease, color 150ms ease;
}
.ao-topo.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.ao-topo:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ao-topo:focus-visible { outline: 2px solid var(--accent-borda); outline-offset: 3px; }
.ao-topo svg { width: 1.05rem; height: 1.05rem; display: block; }

@media (max-width: 620px) {
  .ao-topo { right: 0.9rem; bottom: 0.9rem; width: 2.75rem; height: 2.75rem; }
}

/* ---------- convite discreto no topo do artigo ---------- */

/* A pílula de vidro dos painéis, no tamanho de um link. */
.cta-topo {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.55rem 1rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-forte); text-decoration: none;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda); border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 16px -12px rgba(31, 26, 25, 0.4);
  transition: color 150ms ease, border-color 150ms ease;
}
.cta-topo:hover { color: var(--ink); border-color: var(--accent-borda); }
.cta-topo__seta { transition: transform 140ms ease; }
.cta-topo:hover .cta-topo__seta { transform: translateX(2px); }

/* ---------- capa ---------- */

.pagina-larga { --largura: 70rem; }

.hero {
  padding: clamp(2rem, 5vw, 3rem) clamp(1.35rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}
/* O tamanho acompanha a largura para o título caber em uma linha sem
   precisar de nowrap, que estouraria a tela em aparelho estreito. */
.hero h1 {
  font-size: clamp(1.95rem, 8vw, 4rem); line-height: 1.02;
  letter-spacing: -0.035em; margin: 0 0 0.5rem;
}
.hero__tagline {
  font-family: var(--citacao); font-style: italic;
  font-size: clamp(1.05rem, 2.7vw, 1.5rem); line-height: 1.35;
  color: var(--ink); margin: 0 0 1.1rem;
}
.hero__descricao {
  margin: 0; max-width: none;
  font-size: 1rem; line-height: 1.6; color: var(--ink-secondary);
  /* Sem quebra imposta: a linha inteira cabe na largura da capa e só quebra
     quando a tela é estreita demais para ela. */
  text-wrap: pretty;
}

/* ---------- grade de textos ---------- */

/* Cada assunto é uma moldura de vidro com os cartões soltos dentro. */
.grupo { margin-bottom: 1rem; padding: 10px; }
.grupo__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 1rem 1rem;
}
.grupo__titulo { margin: 0; color: var(--ink-secondary); }
.grupo__todos {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-forte); text-decoration: none; white-space: nowrap;
}
.grupo__todos:hover { color: var(--ink); text-decoration: underline; }

/* Quatro por linha, porque cada assunto da Carta tem quatro partes. A grade
   vai de 4 para 2 e de 2 para 1, sem passar por 3: em três colunas o quarto
   cartão ficaria sozinho na linha de baixo, que é justamente o que a gente
   não quer ver. As classes cards--1|2|3 cobrem o período em que a série ainda
   não fechou e o grupo tem menos de quatro. */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--1 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 68rem) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--1, .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--borda); box-shadow: var(--sombra-celula);
  transition: box-shadow 180ms ease;
}
.card:hover { box-shadow: var(--sombra); }
.card--1 { background: var(--card-1); }
.card--2 { background: var(--card-2); }
.card--3 { background: var(--card-3); }
.card__link {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.25rem 1.25rem 1.1rem; gap: 0.5rem;
  text-decoration: none; color: var(--ink);
}
.card__etiqueta {
  align-self: flex-start;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: var(--ink-secondary);
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 6px 16px -12px rgba(31, 26, 25, 0.4);
}
.card__titulo {
  font-family: var(--titulo);
  font-size: 1.22rem; line-height: 1.18; letter-spacing: -0.02em;
  font-weight: 800; margin: 0.3rem 0 0;
  text-wrap: balance;
}
.card__resumo {
  font-size: 0.9rem; line-height: 1.55;
  color: var(--ink-secondary); margin: 0 0 0.5rem;
}
.card__rodape {
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid rgba(31, 26, 25, 0.14);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sans); font-size: 0.78rem;
}
:root[data-theme="dark"] .card__rodape,
:root:not([data-theme="light"]) .card__rodape { border-top-color: rgba(244, 241, 241, 0.16); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card__rodape { border-top-color: rgba(31, 26, 25, 0.14); }
}
.card__tempo { color: var(--ink-secondary); }
.card__ler {
  font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.card__seta { transition: transform 160ms ease; }
.card:hover .card__seta { transform: translateX(3px); }

.vazio { color: var(--ink-muted); font-style: italic; padding: 2rem 0; }

/* ---------- sobre a autora ---------- */

.sobre {
  margin-top: 1rem;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  display: grid; gap: 1.5rem;
}
@media (min-width: 44rem) {
  .sobre { grid-template-columns: 12rem 1fr; gap: 2.5rem; align-items: start; }
}
.sobre__foto {
  width: 100%; max-width: 12rem; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-g); display: block;
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra);
}
.sobre__foto--vazia { background: var(--card-1); }
.sobre__nome {
  font-family: var(--titulo);
  font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em;
  font-weight: 800; margin: 0 0 0.2rem;
}
.sobre__papel {
  font-family: var(--sans); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0.4rem 0 1.1rem;
}
.sobre__texto p { margin: 0 0 0.9rem; color: var(--ink-secondary); }
.sobre__redes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.sobre__redes a {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 16px -12px rgba(31, 26, 25, 0.4);
}
.sobre__redes a:hover { color: var(--accent-forte); border-color: var(--accent-borda); }

/* Quebra de linha decidida no texto, respeitada só quando há largura para ela. */
.quebra-larga { display: none; }
@media (min-width: 48rem) { .quebra-larga { display: inline; } }

/* ---------- aviso temporário ---------- */

.aviso {
  margin: 0 0 1rem;
  padding: 0.9rem 1.25rem;
  background: var(--accent); color: var(--btn-ink);
  border: 1px solid var(--accent-borda);
  border-radius: 999px;
  box-shadow: var(--sombra);
  font-family: var(--sans);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
}
.aviso__texto { font-size: 0.9rem; font-weight: 700; }
.aviso__detalhe { font-size: 0.88rem; opacity: 0.82; }
@media (max-width: 620px) { .aviso { border-radius: var(--r-g); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* No papel o vidro não existe: tudo vira folha branca com um fio de borda. */
@media print {
  body { background: #fff; padding: 0; }
  .hero, .grupo, .sobre, .cta, .relacionadas {
    background: #fff; box-shadow: none; border: 1px solid var(--linha);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .topo { position: static; box-shadow: none; background: #fff; }
  .progresso, .ao-topo, .cta-topo { display: none; }
}