/* =========================================================
   EPAE 26.2 — Diário de bordo do território
   Shell com barra lateral + hero em carrossel + diário em blog
   ========================================================= */

/* --- Tokens ---------------------------------------------------------- */
:root {
  --tinta:      #0E2E2B;
  --tinta-alt:  #143F3A;
  --coral:      #DD5236;
  --amarelo:    #E9B43C;
  --papel:      #F4F1E9;
  --papel-2:    #ECE7DB;
  --papel-3:    #E2DCCC;
  --cinza:      #6B6A61;

  --linha:       rgba(14, 46, 43, 0.16);
  --linha-forte: rgba(14, 46, 43, 0.32);
  --linha-clara: rgba(244, 241, 233, 0.20);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --lateral: 252px;     /* largura da barra lateral */
  --gutter: 40px;       /* respiro interno da área de conteúdo */
  --leitura: 1100px;    /* largura máxima de leitura */
}

/* --- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.travado { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--amarelo); color: var(--tinta); }

.ic { flex: none; }
.dim { color: var(--cinza); }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--papel); padding: 12px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.pular:focus { left: 0; }

/* =========================================================
   BARRA LATERAL
   ========================================================= */
.lateral {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lateral);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--tinta);
  color: var(--papel);
  border-right: 1px solid rgba(0, 0, 0, .2);
}

.lateral__topo { padding: 26px 24px 22px; border-bottom: 1px solid var(--linha-clara); }
.marca { display: block; }
.marca__sigla {
  display: block;
  font-family: var(--mono); font-size: 14px; letter-spacing: .2em; font-weight: 600;
}
.marca__desc {
  display: block; margin-top: 10px;
  font-family: var(--serif); font-size: 17px; line-height: 1.2;
  color: rgba(244, 241, 233, .66);
}

.lateral__nav { flex: 1; overflow-y: auto; padding: 22px 14px; }
.lateral__grupo + .lateral__grupo { margin-top: 26px; }
.lateral__rotulo {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; color: rgba(244, 241, 233, .42);
  padding: 0 10px 10px;
}
.lateral__nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  font-size: 14.5px;
  color: rgba(244, 241, 233, .82);
  position: relative;
  transition: background .18s ease, color .18s ease;
}
.lateral__nav a .ic { opacity: .62; transition: opacity .18s ease, color .18s ease; }
.lateral__nav a:hover { background: rgba(244, 241, 233, .07); color: var(--papel); }
.lateral__nav a:hover .ic { opacity: 1; }
.lateral__nome { flex: 1; }
.lateral__contador {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: rgba(244, 241, 233, .45);
}
.lateral__nav a[aria-current="page"] { background: rgba(244, 241, 233, .1); color: var(--papel); }
.lateral__nav a[aria-current="page"] .ic { opacity: 1; color: var(--amarelo); }
.lateral__nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 2px; background: var(--coral);
}

.lateral__pe { padding: 18px 24px 24px; border-top: 1px solid var(--linha-clara); }
.lateral__painel {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--linha-clara);
  padding: 11px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lateral__painel:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.lateral__estado {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 241, 233, .62);
}
.ponto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none;
  box-shadow: 0 0 0 0 rgba(221, 82, 54, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .ponto { animation: pulso 2.6s ease-out infinite; }
  @keyframes pulso {
    0%   { box-shadow: 0 0 0 0 rgba(221, 82, 54, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(221, 82, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(221, 82, 54, 0); }
  }
}

.barra-movel { display: none; }
.lateral__veu { display: none; }

/* =========================================================
   PALCO (área de conteúdo)
   ========================================================= */
.palco { margin-left: var(--lateral); min-height: 100vh; }

.bloco {
  max-width: var(--leitura);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
}
.bloco--estreito { padding-top: 0; }

.bloco__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 24px;
  padding-bottom: 22px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--tinta);
}
.bloco__titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 50px); line-height: 1;
  letter-spacing: -0.025em;
}
.bloco__nota {
  grid-column: 1; font-size: 14px; color: var(--cinza);
}
.bloco__link {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--linha-forte); padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.bloco__link:hover { color: var(--coral); border-color: var(--coral); }

/* =========================================================
   HERO — CARROSSEL
   ========================================================= */
.hero {
  position: relative;
  height: clamp(460px, 82vh, 780px);
  overflow: hidden;
  background: var(--tinta);
  color: var(--papel);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* espaço para o menu de ícones, que sobe por cima da borda inferior */
  padding-bottom: 58px;
}
.hero__palco { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide--ativo { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .slide--ativo img { animation: deriva 9s ease-out both; }
  @keyframes deriva {
    from { transform: scale(1.02); }
    to   { transform: scale(1.11); }
  }
}

/* Escurecimento para o texto ficar legível sobre qualquer foto */
.hero__veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8, 28, 26, .94) 0%, rgba(8, 28, 26, .55) 42%, rgba(8, 28, 26, .12) 78%),
    linear-gradient(to right, rgba(8, 28, 26, .55), rgba(8, 28, 26, 0) 60%);
}

.hero__conteudo {
  position: relative;
  padding: 0 var(--gutter) 34px;
  max-width: 980px;
}
.hero__gt { margin-bottom: 20px; }
.hero__gt span {
  display: inline-block;
  background: var(--coral);
  padding: 6px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
}

.hero__titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 6.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hero__titulo .linha { display: block; overflow: hidden; }
.hero__titulo .linha__in { display: block; }
.hero__titulo em {
  font-style: italic;
  font-size: .5em;
  color: var(--amarelo);
  margin-left: .35em;
  letter-spacing: -0.01em;
}
.hero__titulo .linha--mais .linha__in {
  font-size: .42em; color: var(--coral); line-height: 1.4;
}

.hero__sub {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5;
  color: rgba(244, 241, 233, .82);
  max-width: 46ch;
  margin-top: 22px;
}

/* Animação de entrada do título, linha a linha */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__gt span,
  .js .hero__sub { animation: sobe .9s cubic-bezier(.2,.75,.25,1) both; }
  .js .hero__gt span { animation-delay: .1s; }
  .js .hero__sub { animation-delay: .95s; }

  .js .hero__titulo .linha__in {
    animation: sobe 1s cubic-bezier(.2,.75,.25,1) both;
    animation-delay: calc(.28s + var(--i) * .18s);
  }
  @keyframes sobe {
    from { transform: translateY(105%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

.hero__rodape {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter) 20px;
  border-top: 1px solid var(--linha-clara);
}
.hero__legenda { position: relative; min-height: 14px; flex: 1; }
.hero__cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244, 241, 233, .7);
  position: absolute; left: 0; top: 0;
  opacity: 0; transition: opacity .6s ease;
}
.hero__cap--ativa { opacity: 1; }

.hero__barras { display: flex; gap: 8px; flex: none; }
.hero__barra {
  width: 38px; height: 2px; background: rgba(244, 241, 233, .3);
  padding: 0; transition: background .3s ease, width .3s ease;
}
.hero__barra:hover { background: rgba(244, 241, 233, .6); }
.hero__barra--ativa { background: var(--amarelo); width: 56px; }

/* =========================================================
   MENU CENTRAL COM ÍCONES
   ========================================================= */
.atalhos {
  position: relative;
  z-index: 5;
  margin: -34px auto 0;
  max-width: var(--leitura);
  width: calc(100% - var(--gutter) * 2);
  background: var(--papel);
  border: 1px solid var(--linha);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  box-shadow: 0 18px 40px -30px rgba(14, 46, 43, .45);
}
.atalho {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 10px 20px;
  border-right: 1px solid var(--linha);
  text-align: center;
  transition: background .22s ease, color .22s ease;
}
.atalho:last-child { border-right: 0; }
.atalho__ic { color: var(--tinta); transition: transform .3s cubic-bezier(.2,.7,.3,1), color .22s ease; }
.atalho__nome {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cinza); transition: color .22s ease;
}
.atalho:hover { background: var(--tinta); }
.atalho:hover .atalho__ic { color: var(--amarelo); transform: translateY(-3px); }
.atalho:hover .atalho__nome { color: var(--papel); }
.atalho--aqui { background: var(--papel-2); }
.atalho--aqui .atalho__nome { color: var(--tinta); }

/* =========================================================
   DIÁRIO — POST EM DESTAQUE
   ========================================================= */
.post { display: block; margin-bottom: 56px; }
.post__capa {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--papel-3);
}
.post__capa img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.post:hover .post__capa img { transform: scale(1.035); }
.post__semfoto {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cinza);
}
.post__selo {
  position: absolute; left: 0; bottom: 0;
  background: var(--coral); color: var(--papel);
  padding: 10px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}

.post__texto { padding-top: 24px; max-width: 74ch; }
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cinza);
}
.post__n { color: var(--coral); }
.post__etapa {
  border: 1px solid var(--linha); padding: 3px 8px;
}
.post__titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08;
  letter-spacing: -0.022em;
  margin-top: 14px;
  transition: color .2s ease;
}
.post:hover .post__titulo { color: var(--coral); }
.post__resumo { font-size: 16px; line-height: 1.65; color: var(--cinza); margin-top: 14px; max-width: 62ch; }
.post__ler {
  display: inline-block; margin-top: 22px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--linha-forte); padding-bottom: 4px;
}
.post:hover .post__ler { color: var(--coral); border-color: var(--coral); }

/* Etiquetas de relação — o vínculo entre os dados */
.rel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.rel span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; background: var(--papel-2); border: 1px solid var(--linha);
}

/* =========================================================
   DIÁRIO — LISTA
   ========================================================= */
.lista { border-top: 1px solid var(--tinta); }
.item {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--linha);
  transition: background .22s ease, padding-inline .22s ease;
}
.item:hover { background: var(--papel-2); padding-inline: 16px; }

.item__capa {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--papel-3); border: 1px solid var(--linha);
}
.item__capa img { width: 100%; height: 100%; object-fit: cover; }
.item__data {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--cinza);
}
.item__data b {
  font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -0.03em;
  color: var(--tinta); line-height: 1;
}
.item__titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.14; letter-spacing: -0.018em;
  margin-top: 12px;
  transition: color .2s ease;
}
.item:hover .item__titulo { color: var(--coral); }
.item__resumo { font-size: 14.5px; line-height: 1.6; color: var(--cinza); margin-top: 10px; max-width: 58ch; }

.item__dia {
  text-align: right; align-self: start;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--cinza);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.item__dia b {
  font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.03em;
  color: var(--tinta); line-height: 1;
}

/* =========================================================
   PRÓXIMA ATIVIDADE
   ========================================================= */
.proximo { background: var(--coral); color: var(--papel); }
.proximo__rot {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(244, 241, 233, .35);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.proximo__corpo {
  display: grid; grid-template-columns: 190px 1fr; gap: 36px;
  padding: 30px 28px 34px;
}
.proximo__data { border-right: 1px solid rgba(244, 241, 233, .35); }
.proximo__dia {
  font-family: var(--serif); font-size: 76px; line-height: .82; letter-spacing: -0.04em;
  display: inline-block;
}
.proximo__mes { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; margin-left: 8px; }
.proximo__quando {
  display: block; margin-top: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.7; color: rgba(244, 241, 233, .85);
}
.proximo__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.018em; }
.proximo__obj { font-size: 15px; line-height: 1.6; margin-top: 12px; color: rgba(244, 241, 233, .92); max-width: 54ch; }
.proximo__meta {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(244, 241, 233, .35);
  display: grid; gap: 8px; max-width: 560px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.proximo__meta div { display: flex; justify-content: space-between; gap: 12px; }
.proximo__meta span { color: rgba(244, 241, 233, .7); }

/* =========================================================
   ESCUTA
   ========================================================= */
.escuta { background: var(--tinta); color: var(--papel); }
.escuta__grid {
  max-width: var(--leitura); margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  display: grid; grid-template-columns: 1fr minmax(280px, 40%); gap: 56px; align-items: start;
}
.escuta h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.028em;
  max-width: 16ch;
}
.escuta h2 em { font-style: italic; color: var(--amarelo); }
.escuta p { font-size: 15px; line-height: 1.7; color: rgba(244, 241, 233, .75); margin-top: 22px; max-width: 46ch; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px;
  background: var(--amarelo); color: var(--tinta);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--amarelo);
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: transparent; color: var(--amarelo); }

.perguntas { border-top: 1px solid var(--linha-clara); }
.perguntas li {
  padding: 13px 0; border-bottom: 1px solid var(--linha-clara);
  font-size: 14.5px; display: flex; gap: 14px;
}
.perguntas li b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--amarelo); padding-top: 4px;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  max-width: var(--leitura); margin-inline: auto;
  padding: 56px var(--gutter) 36px;
}
.rodape__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.rodape__marca { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; font-weight: 600; }
.rodape__marca span {
  display: block; margin-top: 8px;
  font-family: var(--serif); font-size: 26px; letter-spacing: -0.02em; line-height: 1.1;
}
.rodape__nota { font-size: 13.5px; line-height: 1.6; color: var(--cinza); margin-top: 14px; max-width: 38ch; }
.rodape h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cinza); margin-bottom: 14px; font-weight: 500;
}
.rodape li { padding: 4px 0; font-size: 14px; }
.rodape li a:hover { color: var(--coral); }
.rodape__base {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--linha);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cinza);
}

/* =========================================================
   ENTRADA EM CENA
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); }
  .js .reveal.vis {
    opacity: 1; transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1080px) {
  :root { --gutter: 28px; }

  /* A lateral vira gaveta */
  .lateral {
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.2,.7,.3,1);
    width: 280px;
  }
  .lateral.aberta { transform: none; }
  /* :not([hidden]) para o atributo hidden continuar valendo */
  .lateral__veu:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(8, 28, 26, .55);
  }
  .palco { margin-left: 0; padding-top: 58px; }

  .barra-movel {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; inset: 0 0 auto 0; z-index: 50; height: 58px;
    padding: 0 var(--gutter);
    background: var(--papel); border-bottom: 1px solid var(--linha);
  }
  .barra-movel .marca__sigla { font-size: 13px; }
  .lateral-toggle {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--linha-forte); padding: 9px 14px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  }
  .lateral-toggle__traco {
    width: 16px; height: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  }

  .hero { height: clamp(420px, 64vh, 620px); }
  /* Menu de ícones: faixa horizontal deslizável em vez de grade alta */
  .atalhos {
    margin-top: -26px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .atalhos::-webkit-scrollbar { display: none; }
  .atalho {
    flex: 0 0 auto;
    scroll-snap-align: start;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    white-space: nowrap;
  }
  .atalho__ic { display: flex; }
  .atalho__ic .ic { width: 20px; height: 20px; }
  /* Sem :hover em tela de toque — o estado ficaria preso depois do toque */
  .atalho:hover { background: none; }
  .atalho:hover .atalho__ic { color: var(--tinta); transform: none; }
  .atalho:hover .atalho__nome { color: var(--cinza); }
  .atalho:active { background: var(--papel-2); }
  .atalho--aqui { background: var(--papel-2); }
  .atalho--aqui .atalho__nome { color: var(--tinta); }
  .escuta__grid { grid-template-columns: 1fr; gap: 40px; }
  .proximo__corpo { grid-template-columns: 1fr; gap: 24px; }
  .proximo__data { border-right: 0; border-bottom: 1px solid rgba(244, 241, 233, .35); padding-bottom: 18px; }
  .rodape__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  :root { --gutter: 18px; }

  .barra-movel { height: 52px; }
  .palco { padding-top: 52px; }
  .lateral-toggle { padding: 8px 12px; }

  /* Hero mais curta e com a legenda em uma linha só */
  .hero { height: clamp(380px, 66vh, 520px); padding-bottom: 44px; }
  .hero__conteudo { padding-bottom: 24px; }
  .hero__gt { margin-bottom: 14px; }
  .hero__gt span { font-size: 9.5px; padding: 5px 10px; }
  .hero__titulo { font-size: clamp(30px, 8.6vw, 44px); }
  .hero__titulo em { font-size: .46em; margin-left: .25em; }
  .hero__sub { margin-top: 16px; font-size: 14px; }

  .hero__rodape { padding: 12px var(--gutter) 14px; gap: 14px; }
  .hero__legenda { min-height: 12px; overflow: hidden; }
  .hero__cap {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%; font-size: 9px; letter-spacing: .1em;
  }
  .hero__barra { width: 24px; }
  .hero__barra--ativa { width: 34px; }

  /* A mesma faixa do tablet, mais compacta */
  .atalhos { margin-top: -22px; }
  .atalho { gap: 8px; padding: 13px 14px; }
  .atalho__ic .ic { width: 18px; height: 18px; }
  .atalho__nome { font-size: 9px; letter-spacing: .1em; }

  .bloco { padding-block: 48px; }
  .bloco__head { grid-template-columns: 1fr; margin-bottom: 28px; }
  .bloco__titulo { font-size: 30px; }
  .bloco__link { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 14px; }

  /* Post em destaque */
  .post { margin-bottom: 40px; }
  .post__capa { aspect-ratio: 3 / 2; }
  .post__selo { padding: 8px 12px; font-size: 10px; }
  .post__texto { padding-top: 18px; }
  .post__titulo { font-size: 25px; margin-top: 10px; }
  .post__resumo { font-size: 15px; }
  .post__meta { gap: 6px 10px; font-size: 9px; }

  /* Lista: a foto vira uma faixa larga acima do texto */
  .item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .item:hover { padding-inline: 0; background: none; }
  .item__capa { aspect-ratio: 16 / 7; }
  /* Sem foto, a caixa vazia só ocuparia espaço — a data já está no topo */
  .item__capa--vazia { display: none; }
  .item__data b { font-size: 30px; }
  .item__titulo { font-size: 21px; margin-top: 8px; }
  /* A data sobe para o topo da entrada, como cabeçalho de diário */
  .item__dia {
    order: -1; justify-self: start; text-align: left;
    flex-direction: row; align-items: baseline; gap: 8px;
  }
  .item__dia b { font-size: 22px; }

  .rel span { font-size: 9px; padding: 3px 7px; }

  /* Próxima atividade */
  .proximo__rot { padding: 12px 18px; font-size: 9px; letter-spacing: .14em; }
  .proximo__corpo { padding: 22px 18px 26px; gap: 18px; }
  .proximo__dia { font-size: 58px; }
  .proximo__meta div { flex-direction: column; gap: 2px; }
  .proximo__meta b { font-weight: 500; }

  /* Escuta */
  .escuta__grid { padding-block: 52px; }
  .escuta h2 { font-size: 30px; }
  .btn { width: 100%; justify-content: center; }
  .perguntas li { font-size: 14px; }

  .rodape { padding-block: 44px 32px; }
  .rodape__grid { grid-template-columns: 1fr; gap: 28px; }
  .rodape__base { gap: 6px; flex-direction: column; margin-top: 32px; }
}