/* ==========================================================================
   Cláudia Weiss — site.css
   Único arquivo de estilos. Sem framework, sem build.
   Breakpoints: ≥1200px (referência) · 768–1199px · <768px
   ========================================================================== */

/* ---------- Fontes (auto-hospedadas) ---------- */
@font-face {
  font-family: "Libre Caslon Display";
  src: url("/fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variáveis ---------- */
:root {
  /* Paleta (LEIA-ME) */
  --papel: #F5F1E8;
  --papel-claro: #FBF9F3;
  --bege: #D8D0BF;
  --foto: #E3DCCD;
  --tinta: #1D2330;
  --texto-2: #4B4F5A;
  --texto-claro: #D7D2C6;
  --linha-escura: #3A4050;
  --caneta: #B8321F;
  --caneta-escura: #F08A74;
  --pauta: #B9C6DA; /* linhas do caderno "sob medida" (usada na referência visual) */
  --branco: #FFFFFF;

  /* Famílias */
  --f-display: "Libre Caslon Display", Georgia, serif;
  --f-texto: "Libre Caslon Text", Georgia, serif;
  --f-sans: "Libre Franklin", system-ui, sans-serif;
  --f-mao: "Caveat", cursive;

  /* Grade */
  --margem: 88px;
  --coluna-gap: 24px;
  --conteudo-max: 1264px; /* 1440 − 2 × 88 */

  /* Tamanhos — desktop (≥1200px), idênticos à referência */
  --fs-marca: 30px;
  --fs-nav: 15px;
  --fs-botao: 16px;
  --fs-rodape: 13px;

  --fs-hero-rotulo: 34px;
  --fs-h1: 116px;
  --fs-hero-p: 21px;
  --fs-legenda: 15px;

  --fs-rotulo: 30px;
  --fs-sobre-h2: 60px;
  --fs-sobre-resumo: 16px;
  --fs-bio: 20px;
  --fs-assinatura: 34px;
  --fs-citacao: 24px;

  --fs-palestras-h2: 64px;
  --fs-palestra-h3: 60px;
  --fs-palestra-sub: 22px;
  --fs-palestra-p: 17px;
  --fs-destaque: 28px;
  --fs-palestra-frase: 24px;
  --fs-link-mao: 30px;

  --fs-sob-medida: 40px;
  --fs-contato-h2: 96px;
  --fs-contato: 20px;

  --fs-p-voltar: 15px;
  --fs-p-rotulo: 34px;
  --fs-p-h1: 96px;
  --fs-p-sub: 24px;
  --fs-p-h2: 36px;
  --fs-p-texto: 18px;
  --fs-p-lista: 20px;
  --fs-p-numero: 28px;
  --fs-pilar-h3: 26px;
  --fs-pilar-p: 16px;
  --fs-provocacao: 30px;
  --fs-aside-frase: 22px;
  --fs-aside-rotulo: 26px;
  --fs-aside-h2: 14px;
  --fs-aside-p: 17px;
  --fs-aside-nota: 14px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

main {
  flex-grow: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ol,
ul {
  margin: 0;
}

a {
  color: var(--tinta);
}

a:hover {
  color: var(--caneta);
}

a:focus-visible {
  outline: 2px solid var(--caneta);
  outline-offset: 3px;
}

strong {
  font-weight: 600;
}

/* Caixa centralizada: 88px de margem até 1440px, depois centraliza */
.caixa {
  width: min(calc(100% - 2 * var(--margem)), var(--conteudo-max));
  margin-inline: auto;
}

.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--coluna-gap);
}

/* Rótulo manuscrito */
.mao {
  font-family: var(--f-mao);
  font-weight: 500;
  color: var(--caneta);
}

.mao--inclinado {
  transform: rotate(-2deg);
  transform-origin: left;
}

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 18px 30px;
  font-weight: 600;
  font-size: var(--fs-botao);
  line-height: 1.2;
  text-decoration: none;
}

.botao--escuro {
  background: var(--tinta);
  color: var(--papel);
}

.botao--escuro:hover {
  background: var(--caneta);
  color: var(--branco);
}

.botao--vermelho {
  background: var(--caneta);
  color: var(--branco);
}

.botao--vermelho:hover {
  background: var(--tinta);
  color: var(--papel);
}

/* Link sublinhado de caneta */
.link-caneta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--fs-botao);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--caneta);
}

/* ---------- Cabeçalho ---------- */
.topo {
  flex-shrink: 0;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--tinta);
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: var(--fs-marca);
  line-height: 1.1;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

.topo__nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-nav);
}

.topo__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

.topo__nav .topo__contato {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--caneta);
  text-decoration-thickness: 2px;
}

/* ---------- Início: topo ---------- */
.hero {
  padding: 80px 0 104px;
}

.hero__texto {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__rotulo {
  font-size: var(--fs-hero-rotulo);
  line-height: 1.25;
}

.hero h1 {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.hero__apresentacao {
  max-width: 640px;
  font-size: var(--fs-hero-p);
  line-height: 1.55;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--tinta);
}

.hero__acoes .botao {
  flex-shrink: 0;
}

.hero__foto {
  grid-column: 10 / span 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__foto img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  background: var(--foto);
}

.hero__foto figcaption {
  font-family: var(--f-texto);
  font-style: italic;
  font-size: var(--fs-legenda);
  line-height: 1.5;
  color: var(--texto-2);
}

/* ---------- Início: sobre ---------- */
.sobre {
  padding: 88px 0 104px;
  border-top: 4px double var(--tinta);
}

.sobre__lado {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sobre__lado .mao {
  font-size: var(--fs-rotulo);
  line-height: 1.25;
}

.sobre h2 {
  font-family: var(--f-display);
  font-size: var(--fs-sobre-h2);
  line-height: 1;
  font-weight: 400;
}

.sobre__resumo {
  font-size: var(--fs-sobre-resumo);
  line-height: 1.6;
  color: var(--texto-2);
}

.sobre__retrato {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-top: 20px;
  background: var(--foto);
}

.sobre__bio {
  grid-column: 6 / span 7;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sobre__bio p {
  font-family: var(--f-texto);
  font-size: var(--fs-bio);
  line-height: 1.7;
}

.sobre__bio .sobre__assinatura {
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: var(--fs-assinatura);
  line-height: 1.2;
}

.sobre__bio .sobre__citacao {
  font-style: italic;
  font-size: var(--fs-citacao);
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: var(--caneta);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* ---------- Início: palestras (faixa escura) ---------- */
.faixa {
  background: var(--tinta);
  color: var(--papel);
  padding: 96px 0;
}

.faixa a {
  color: var(--papel);
}

.faixa a:hover {
  color: var(--papel);
}

.faixa a:focus-visible {
  outline-color: var(--caneta-escura);
}

.faixa__titulo {
  padding-bottom: 40px;
  font-family: var(--f-display);
  font-size: var(--fs-palestras-h2);
  line-height: 1.2;
  font-weight: 400;
}

.resumo {
  padding: 64px 0;
  border-top: 1px solid var(--papel);
}

.resumo:last-child {
  padding-bottom: 0;
}

.resumo__rotulo {
  grid-column: span 2;
  font-family: var(--f-mao);
  font-weight: 500;
  font-size: var(--fs-rotulo);
  line-height: 1.1;
  color: var(--caneta-escura);
}

.resumo__corpo {
  grid-column: 3 / span 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.resumo h3 {
  font-family: var(--f-display);
  font-size: var(--fs-palestra-h3);
  line-height: 1.04;
  font-weight: 400;
}

.resumo__sub {
  font-family: var(--f-texto);
  font-style: italic;
  font-size: var(--fs-palestra-sub);
  line-height: 1.45;
  color: var(--texto-claro);
}

.resumo__texto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  max-width: 900px;
}

.resumo__texto p {
  font-size: var(--fs-palestra-p);
  line-height: 1.7;
  color: var(--texto-claro);
}

.resumo__texto .destaque {
  margin: 6px 0;
  font-family: var(--f-display);
  font-size: var(--fs-destaque);
  line-height: 1.2;
  color: var(--papel);
}

.resumo__frase {
  align-self: stretch;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--linha-escura);
  font-family: var(--f-texto);
  font-style: italic;
  font-size: var(--fs-palestra-frase);
  line-height: 1.45;
  color: var(--papel);
}

.faixa .resumo__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-mao);
  font-weight: 500;
  font-size: var(--fs-link-mao);
  line-height: 1.1;
  color: var(--caneta-escura);
  text-decoration: none;
  border-bottom: 2px solid var(--caneta-escura);
}

.faixa .resumo__link:hover {
  color: var(--papel);
  border-bottom-color: var(--papel);
}

/* ---------- Início: sob medida ---------- */
.sob-medida {
  padding: 104px 0;
}

.sob-medida__texto {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 24px;
}

.sob-medida__texto h2 {
  font-size: var(--fs-rotulo);
  line-height: 1.25;
}

.sob-medida__texto p {
  font-family: var(--f-display);
  font-size: var(--fs-sob-medida);
  line-height: 1.2;
}

.caderno {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 40px 40px;
  background: var(--papel-claro);
  border: 1px solid var(--bege);
}

/* 4 linhas pautadas de 56px */
.caderno__pauta {
  align-self: stretch;
  height: 224px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 55px,
    var(--pauta) 55px 56px
  );
}

.caderno .botao {
  margin-top: 32px;
}

/* ---------- Início: contato ---------- */
.contato {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 88px 0;
  border-top: 4px double var(--tinta);
}

.contato h2 {
  font-family: var(--f-display);
  font-size: var(--fs-contato-h2);
  line-height: 1;
  font-weight: 400;
}

.contato__lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-contato);
}

.contato__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.contato__lista span {
  color: var(--texto-2);
}

/* ---------- Rodapé ---------- */
.rodape {
  flex-shrink: 0;
  min-height: 112px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid var(--tinta);
  font-size: var(--fs-rodape);
  color: var(--texto-2);
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rodape__marca img {
  width: auto;
  height: 32px;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-2);
}

.rodape a:hover {
  color: var(--caneta);
}

/* ---------- Página de palestra ---------- */
.p-topo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 72px 0 80px;
}

.p-topo__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -11px; /* compensa a área de toque e mantém o ritmo da referência */
  font-size: var(--fs-p-voltar);
  color: var(--texto-2);
  text-decoration: none;
}

.p-topo .mao {
  font-size: var(--fs-p-rotulo);
  line-height: 1.25;
}

.p-topo h1 {
  max-width: 1180px;
  font-family: var(--f-display);
  font-size: var(--fs-p-h1);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.p-topo__sub {
  font-family: var(--f-texto);
  font-style: italic;
  font-size: var(--fs-p-sub);
  line-height: 1.45;
  color: var(--texto-2);
}

.p-corpo {
  align-content: start;
  padding-bottom: 104px;
}

.p-principal {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.bloco {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--tinta);
}

.bloco h2 {
  font-family: var(--f-display);
  font-size: var(--fs-p-h2);
  line-height: 1.2;
  font-weight: 400;
}

.bloco__texto {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bloco p {
  font-size: var(--fs-p-texto);
  line-height: 1.7;
}

.bloco .bloco__ementa {
  line-height: 1.75;
}

.bloco .destaque {
  margin: 6px 0;
  font-family: var(--f-display);
  font-size: var(--fs-destaque);
  line-height: 1.2;
}

/* Lista numerada com números manuscritos */
.lista-numerada {
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.lista-numerada li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bege);
  font-family: var(--f-texto);
  font-size: var(--fs-p-lista);
  line-height: 1.5;
}

.lista-numerada li::before {
  content: counter(item);
  font-family: var(--f-mao);
  font-weight: 500;
  font-size: var(--fs-p-numero);
  line-height: 1;
  color: var(--caneta);
}

/* Pilares (palestra 3) */
.pilares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pilar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--papel-claro);
  border: 1px solid var(--bege);
}

.pilar h3 {
  font-family: var(--f-display);
  font-size: var(--fs-pilar-h3);
  line-height: 1.2;
  font-weight: 400;
}

.bloco .pilar p {
  font-size: var(--fs-pilar-p);
  line-height: 1.6;
  color: var(--texto-2);
}

/* Provocação central (palestra 3) */
.bloco .provocacao {
  font-family: var(--f-display);
  font-size: var(--fs-provocacao);
  line-height: 1.25;
}

.bloco .provocacao-e {
  font-family: var(--f-mao);
  font-weight: 500;
  font-size: var(--fs-provocacao);
  line-height: 1.5;
  color: var(--caneta);
}

/* Coluna lateral */
.p-lateral {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-lateral__frase {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--tinta);
  color: var(--papel);
}

.p-lateral__frase p {
  font-family: var(--f-texto);
  font-style: italic;
  font-size: var(--fs-aside-frase);
  line-height: 1.5;
}

.p-lateral__frase .mao {
  font-size: var(--fs-aside-rotulo);
  line-height: 1.25;
  color: var(--caneta-escura);
}

.p-lateral__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 0;
  border-top: 1px solid var(--tinta);
}

.p-lateral__info h2 {
  font-size: var(--fs-aside-h2);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.p-lateral__info p {
  font-size: var(--fs-aside-p);
  line-height: 1.6;
}

.p-lateral .botao {
  padding: 18px 24px;
  text-align: center;
}

.p-lateral__nota {
  font-size: var(--fs-aside-nota);
  line-height: 1.6;
  color: var(--texto-2);
}

/* ---------- 404 ---------- */
.erro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 104px 0;
}

.erro h1 {
  font-family: var(--f-display);
  font-size: var(--fs-p-h1);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   768–1199px — margens de 40px, tipografia proporcional
   ========================================================================== */
@media (max-width: 1199px) {
  :root {
    --margem: 40px;
    --coluna-gap: 20px;

    --fs-hero-rotulo: clamp(28px, 2.8vw, 32px);
    --fs-h1: clamp(64px, 8.6vw, 104px);
    --fs-hero-p: clamp(18px, 1.7vw, 20px);

    --fs-rotulo: clamp(26px, 2.5vw, 30px);
    --fs-sobre-h2: clamp(44px, 4.8vw, 56px);
    --fs-bio: clamp(18px, 1.6vw, 20px);
    --fs-assinatura: clamp(28px, 2.7vw, 32px);
    --fs-citacao: clamp(20px, 1.9vw, 22px);

    --fs-palestras-h2: clamp(48px, 5vw, 60px);
    --fs-palestra-h3: clamp(40px, 4.6vw, 54px);
    --fs-palestra-sub: clamp(19px, 1.8vw, 21px);
    --fs-destaque: clamp(24px, 2.2vw, 26px);
    --fs-palestra-frase: clamp(20px, 1.9vw, 22px);
    --fs-link-mao: clamp(26px, 2.5vw, 30px);

    --fs-sob-medida: clamp(28px, 3vw, 36px);
    --fs-contato-h2: clamp(64px, 7vw, 84px);

    --fs-p-rotulo: clamp(28px, 2.8vw, 32px);
    --fs-p-h1: clamp(52px, 7vw, 84px);
    --fs-p-sub: clamp(20px, 1.9vw, 22px);
    --fs-p-h2: clamp(30px, 2.8vw, 34px);
    --fs-p-lista: clamp(18px, 1.7vw, 20px);
    --fs-pilar-h3: clamp(22px, 2vw, 24px);
    --fs-provocacao: clamp(24px, 2.3vw, 28px);
    --fs-aside-frase: clamp(20px, 1.9vw, 22px);
  }

  .hero {
    padding: 64px 0 88px;
  }

  .hero__foto {
    grid-column: 9 / span 4;
  }

  .hero__foto img {
    height: clamp(420px, 44vw, 520px);
  }

  .sobre {
    padding: 72px 0 88px;
  }

  .sobre__lado {
    grid-column: span 5;
  }

  .faixa {
    padding: 80px 0;
  }

  .resumo {
    padding: 56px 0;
  }

  .sob-medida {
    padding: 88px 0;
  }

  .sob-medida__texto {
    grid-column: span 6;
  }

  .caderno {
    padding: 32px;
  }

  .contato {
    padding: 72px 0;
  }

  .p-topo {
    padding: 56px 0 64px;
  }

  .p-corpo {
    padding-bottom: 88px;
  }

  .p-principal {
    grid-column: span 7;
  }

  .p-lateral {
    grid-column: 8 / span 5;
  }
}

/* ==========================================================================
   <960px — as grades de 12 colunas viram coluna única
   (ainda com margens de 40px e tipografia do tablet)
   ========================================================================== */
@media (max-width: 959px) {
  .grade {
    display: flex;
    flex-direction: column;
  }

  /* Topo: foto do palco logo abaixo do título */
  .hero__texto {
    display: contents;
  }

  .hero {
    gap: 28px;
  }

  .hero__rotulo,
  .hero h1 {
    order: 1;
  }

  .hero__foto {
    order: 2;
  }

  .hero__apresentacao,
  .hero__acoes {
    order: 3;
  }

  .hero__acoes {
    margin-top: 0;
  }

  .hero__foto img {
    height: 480px;
  }

  .sobre__bio {
    margin-top: 48px;
  }

  .resumo__rotulo {
    margin-bottom: 16px;
  }

  .sob-medida__texto {
    padding-right: 0;
  }

  .caderno {
    margin-top: 40px;
  }

  /* Palestra: coluna lateral entre a Descrição e a Ementa */
  .p-corpo {
    gap: 56px;
  }

  .p-principal {
    display: contents;
  }

  .p-principal > .bloco {
    order: 3;
  }

  .p-principal > .bloco--descricao {
    order: 1;
  }

  .p-lateral {
    order: 2;
  }
}

/* ==========================================================================
   <768px — celular: uma coluna, margens de 20px
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --margem: 20px;

    --fs-marca: 26px;
    --fs-hero-rotulo: 26px;
    --fs-h1: clamp(40px, 12.8vw, 56px); /* 48px em 375px */
    --fs-hero-p: 18px;

    --fs-rotulo: 26px;
    --fs-sobre-h2: 40px;
    --fs-bio: 18px;
    --fs-assinatura: 26px;
    --fs-citacao: 20px;

    --fs-palestras-h2: 44px;
    --fs-palestra-h3: clamp(28px, 9vw, 36px); /* 34px em 375px */
    --fs-palestra-sub: 19px;
    --fs-palestra-p: 16px;
    --fs-destaque: 23px;
    --fs-palestra-frase: 20px;
    --fs-link-mao: 26px;

    --fs-sob-medida: 26px;
    --fs-contato-h2: 56px;
    --fs-contato: 18px;

    --fs-p-rotulo: 26px;
    --fs-p-h1: clamp(28px, 9vw, 38px); /* 34px em 375px */
    --fs-p-sub: 19px;
    --fs-p-h2: 28px;
    --fs-p-texto: 17px;
    --fs-p-lista: 18px;
    --fs-p-numero: 26px;
    --fs-pilar-h3: 22px;
    --fs-provocacao: 24px;
    --fs-aside-frase: 20px;
    --fs-aside-rotulo: 24px;
    --fs-aside-p: 16px;
  }

  /* Menu sem JS: nome em cima, links numa linha rolável */
  .topo {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0 6px;
  }

  .topo__nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topo__nav::-webkit-scrollbar {
    display: none;
  }

  .topo__nav ul {
    gap: 22px;
    width: max-content;
  }

  .hero {
    padding: 40px 0 64px;
    gap: 24px;
  }

  .hero__foto img {
    height: 420px;
  }

  .hero__acoes {
    padding-top: 24px;
  }

  .sobre {
    padding: 56px 0 64px;
  }

  .sobre__retrato {
    max-width: 280px;
  }

  .sobre__bio {
    margin-top: 40px;
    gap: 18px;
  }

  .faixa {
    padding: 64px 0;
  }

  .faixa__titulo {
    padding-bottom: 28px;
  }

  .resumo {
    padding: 44px 0;
  }

  .resumo__corpo {
    gap: 18px;
  }

  .sob-medida {
    padding: 64px 0;
  }

  .caderno {
    margin-top: 32px;
    padding: 24px 20px 28px;
  }

  .caderno .botao {
    align-self: stretch;
    padding-inline: 20px;
  }

  .contato {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 56px 0;
  }

  .rodape {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
  }

  .rodape__marca {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .p-topo {
    padding: 40px 0 48px;
    gap: 18px;
  }

  .p-corpo {
    gap: 44px;
    padding-bottom: 64px;
  }

  .p-principal > .bloco {
    gap: 14px;
    padding-top: 24px;
  }

  .pilares {
    grid-template-columns: minmax(0, 1fr);
  }

  .pilar {
    padding: 20px;
  }

  .p-lateral__frase {
    padding: 24px;
  }

  .erro {
    padding: 64px 0;
  }
}