/* ==========================================================================
   AUR — Home
   Layout fluido baseado em float (sem flex/grid). Referência: frame 1728px.
   ========================================================================== */

/* Knockout é uma fonte licenciada: coloque o arquivo em assets/fonts/ para
   ativá-la. Sem o arquivo, o título especial usa Bebas Neue como substituta. */
@font-face {
  font-family: "Knockout";
  src: local("Knockout HTF67-FullBantamwt"),
       local("Knockout 67 Full Bantamwt"),
       url("../assets/fonts/Knockout-HTF67-FullBantamwt.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --preto: #000;
  --branco: #fff;
  --laranja: #f57c3a;
  --cinza-azulado: #8192b3;
  --cinza-claro: #f6f6f6;
  --grafite: #151515;
  --bege: #f7f1df;
  --linha: #dcdcdc;
  --linha-escura: #797466;
  --header-h: 68px;
  --font-base: "Space Grotesk", Arial, sans-serif;
  --font-texto: "Inter", Arial, sans-serif;
  --font-especial: "Knockout", "Bebas Neue", "Arial Narrow", sans-serif;
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--branco);
  color: var(--preto);
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Clearfix para os containers de floats */
.cf::after { content: ""; display: table; clear: both; }

/* Container: 216px de margem em 1728px */
.wrap { margin: 0 12.5%; }

/* Tipografia --------------------------------------------------------------- */
.h1 { font-size: 36px; line-height: 40px; font-weight: 700; text-transform: uppercase; }
.h2 { font-size: 24px; line-height: 28px; font-weight: 700; text-transform: uppercase; }
.h3 { font-size: 22px; line-height: 26px; font-weight: 700; text-transform: uppercase; }
.h4 { font-size: 20px; line-height: 28px; font-weight: 400; }
.text { font-family: var(--font-texto); font-size: 18px; line-height: 24px; }
.text-small { font-family: var(--font-texto); font-size: 16px; line-height: 22px; }
.tag { font-size: 15px; line-height: 19px; letter-spacing: 1.5px; text-transform: uppercase; }
.tag-small { font-size: 13px; line-height: 17px; text-transform: uppercase; }
.date { font-size: 13px; line-height: 17px; color: var(--cinza-azulado); white-space: nowrap; }
.orange { color: var(--laranja); }

.special {
  font-family: var(--font-especial);
  font-weight: 400;
  font-size: 172px;
  font-size: clamp(72px, 9.954vw, 172px);
  line-height: .744;
  text-align: center;
  text-transform: uppercase;
}
.special--orange { color: var(--laranja); }

.meta { font-size: 13px; line-height: 17px; margin-top: 16px; }
.meta__tag { display: inline-block; margin-right: 32px; text-transform: uppercase; }
.meta__tag--wide { font-size: 15px; line-height: 19px; letter-spacing: 1.5px; }
.dot { color: var(--laranja); font-style: normal; margin: 0 .45em; }

.h1 a:hover, .h3 a:hover, .h4 a:hover { color: var(--laranja); }

/* Botão com seta */
.btn {
  display: inline-block;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn::before {
  content: "";
  display: inline-block;
  width: 23px;
  height: 15px;
  margin-right: 16px;
  vertical-align: 1px;
  background: url("../assets/icons/arrow.svg") no-repeat center / 100% 100%;
  transition: margin .2s ease;
}
.btn:hover::before { margin-left: 6px; margin-right: 10px; }
.btn--light { color: var(--branco); }

/* Imagens com proporção fixa e recorte */
.hero__media img, .card__media img, .feature__media img, .case__media img,
.destaques__media img, .thumb__media img, .post__media img, .case-row__media img,
.episode__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Header (fixo) ------------------------------------------------------------ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background: var(--branco);
  z-index: 100;
}
.header__inner { padding: 0 3.704%; }
.header__logo { float: left; width: 64px; margin: 25px 64px 0 0; }
.header__toggle, .header__search { display: none; }

.nav {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 24px;
}
.nav--revista { float: left; }
.nav--estudio { float: right; }
.nav a, .nav__label { float: left; margin-right: 32px; }
.nav a { font-weight: 500; }
.nav a:hover { color: var(--laranja); }
.nav__label { font-weight: 300; }
.nav--estudio a:last-child { margin-right: 0; }
.nav .nav__search { width: 18px; margin: 1px 0 0 8px; }

/* Hero ---------------------------------------------------------------------- */
.hero__media {
  float: left;
  width: 65.162%;
  aspect-ratio: 1126 / 1040;
  overflow: hidden;
}
.hero__side {
  float: right;
  width: 34.838%;
  padding: 6.134vw 3.704vw 0;
}
.hero__logo { width: 100%; }
.hero__tagline {
  margin-top: 16px;
  font-size: 18px;
  font-size: clamp(11px, 1.042vw, 18px);
  line-height: 20px;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}
.hero__post { margin-top: 18.75vw; }
.hero__post .h1 {
  margin: 32px 0;
  font-size: clamp(24px, 2.083vw, 36px);
  line-height: 1.111;
}
.hero__post .date { display: block; margin-top: 32px; }

/* Tá na rua ----------------------------------------------------------------- */
.rua { padding-top: 108px; }
.rua .special { margin-bottom: 40px; }
.rua__cols {
  border-top: 1px solid var(--linha);
  /* linhas verticais entre as colunas, na altura total do bloco */
  background:
    linear-gradient(var(--linha), var(--linha)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(var(--linha), var(--linha)) 66.667% 0 / 1px 100% no-repeat;
}
/* no HTML os destaques vêm antes da lista (ordem do mobile); no desktop a lista
   volta para a primeira coluna com left positivo/negativo */
.rua__col { position: relative; float: left; width: 33.333%; padding-bottom: 96px; }
.rua__col--card { left: 33.333%; }
.rua__col--list { left: -66.667%; }

.rua__heading { padding: 64px 13.5% 0; margin-bottom: 48px; }
.rua__col--list .item { padding: 0 13.5% 40px; margin-bottom: 40px; border-bottom: 1px solid var(--linha); }
.rua__more { margin-left: 13.5%; }

.rua__col--card { padding: 24px 1.39% 96px 1.45%; }
.rua__col--card > a { display: block; }
.card__media { aspect-ratio: 527 / 703; overflow: hidden; }
.card__body { margin: 24px 9.9% 0 10.4%; }

/* Do estúdio ---------------------------------------------------------------- */
.estudio { background: var(--grafite); padding: 88px 0 100px; }
.estudio .special { margin-bottom: 64px; }

.feature { position: relative; background: var(--cinza-claro); }
.feature__media { float: left; width: 58.687%; aspect-ratio: 1 / 1; overflow: hidden; }
.feature__media img { object-position: 50% 90%; }
.feature__box { position: absolute; top: 0; right: 0; bottom: 0; width: 41.313%; }
.feature__content {
  position: absolute;
  top: 50%;
  left: 13.46%;
  right: 13.46%;
  transform: translateY(-50%);
}
.feature__content .h2 { margin: 32px 0; }
.feature__content .btn { margin-top: 32px; }

.estudio__heading {
  margin-top: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linha-escura);
  color: var(--branco);
}
.cases { margin: 40px 0 48px; color: var(--branco); }
.case { float: left; width: 46.8%; }
.case + .case { float: right; width: 49.35%; padding-right: 2.55%; }
.case__media { float: left; width: 46.2%; aspect-ratio: 280 / 373; overflow: hidden; }
.case__body { float: right; width: 47.2%; padding-top: 40px; }
.case__body .tag-small { margin: 24px 0; }

/* Podcast ------------------------------------------------------------------- */
.podcast { padding-top: 92px; }
.podcast__info { float: left; clear: left; width: 22.085%; }
.podcast__title {
  float: left;
  width: 22.085%;
  font-family: var(--font-especial);
  font-weight: 400;
  font-size: 52px;
  font-size: clamp(36px, 3.009vw, 52px);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 22px;
}
.podcast__info .meta { margin: 24px 0; }
.podcast__links { margin-top: 29px; }
.podcast__links li { float: left; margin-right: 24px; }
.podcast__links img { width: 26px; height: 26px; }
.podcast__links a:hover { opacity: .6; }

.podcast__media { float: right; width: 67.876%; position: relative; }
.podcast__media > img:first-child { width: 100%; }
.podcast__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.08%;
  min-width: 44px;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.podcast__media:hover .podcast__play { transform: translate(-50%, -50%) scale(1.1); }

/* + Destaques --------------------------------------------------------------- */
.destaques { padding: 108px 0 124px; }
.destaques .special { margin-bottom: 72px; }
.destaques__main { float: left; width: 47.954%; }
.destaques__main > a { display: block; }
.destaques__media { aspect-ratio: 621 / 828; overflow: hidden; margin-bottom: 24px; }
.destaques__list { float: right; width: 47.722%; }

.thumb { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--linha); }
.thumb__media { float: left; width: 20.065%; aspect-ratio: 124 / 165; overflow: hidden; }
.thumb__body { float: right; width: 74.757%; padding-right: 8.25%; }
.destaques__list .btn { margin-top: 8px; }

/* Footer -------------------------------------------------------------------- */
.footer { background: var(--preto); color: var(--branco); padding: 80px 0 90px; }
.footer__brand { float: left; width: 52.278%; }
.footer__logo { width: 47.71%; min-width: 200px; }
.footer__copy { margin-top: 24px; font-size: 14px; line-height: 20px; font-weight: 500; color: #bababa; }
.footer__social { margin-top: 40px; }
.footer__social li { float: left; margin-right: 24px; }
.footer__social img { width: 24px; height: 24px; }
.footer__social a:hover { opacity: .6; }

.footer__nav { float: left; width: 23.4%; }
.footer__nav--revista { width: 24.322%; }
.footer__label { font-size: 15px; line-height: 20px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; }
.footer__nav ul { margin-top: 32px; }
.footer__nav li { margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; }
.footer__nav a:hover { color: var(--laranja); }

/* Editoria ------------------------------------------------------------------ */
.editoria-hero { background: var(--grafite); padding: 96px 24px; }
.editoria-hero .special { color: var(--bege); }

.filtros {
  padding: 64px 24px 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow-x: auto;
}
.filtros a {
  display: inline-block;
  margin: 0 14px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.filtros a:hover { color: var(--laranja); }
.filtros a.is-active { border-bottom-color: var(--laranja); }

/* Lista de matérias: 2 colunas de 606px com 72px de calha em 1284px */
.posts { margin: 0 12.847%; padding: 76px 0 120px; }
.post { float: left; clear: left; width: 47.196%; margin-bottom: 40px; }
.post:nth-child(even) { float: right; clear: none; }
.post__media { float: left; width: 46.205%; aspect-ratio: 280 / 373; overflow: hidden; }
.post__body { float: right; width: 47.195%; padding-top: 40px; }
.post__body .tag-small { margin: 24px 0; }

/* Cases --------------------------------------------------------------------- */
.cases-page { padding-top: 64px; }
.cases-page .special { margin-bottom: 48px; }
.cases-list { margin: 0 12.847%; border-top: 1px solid var(--preto); }

.case-row { position: relative; padding: 48px 0; border-bottom: 1px solid var(--preto); }
.case-row__media { float: left; width: 47.586%; aspect-ratio: 611 / 814; overflow: hidden; }
.case-row__body {
  position: absolute;
  top: 50%;
  right: 0;
  width: 47.819%;
  transform: translateY(-50%);
}
.case-row__body .h1 { margin: 32px 0; }
.case-row__body .btn { margin-top: 32px; }
.case-row__tag-m { display: none; } /* tag abaixo do título, só no mobile */

/* Botão "ver mais" (load more) */
.load-more { padding: 64px 24px 110px; text-align: center; }
.btn-more {
  display: inline-block;
  padding: 16px 32px;
  border: 1px solid var(--preto);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.btn-more::after {
  content: "";
  display: inline-block;
  width: 19px;
  height: 15px;
  margin-left: 24px;
  vertical-align: -2px;
  background: url("../assets/icons/arrow-down.svg") no-repeat center / 100% 100%;
  transform: rotate(90deg);
}
.btn-more:hover { background: var(--preto); color: var(--branco); }
.btn-more:hover::after { filter: invert(1); }

/* Podcast (página) ----------------------------------------------------------- */
.podcast-page { padding-top: 64px; }
.podcast-page .special { margin-bottom: 48px; }
.episodes { margin: 0 12.847%; border-top: 1px solid var(--preto); }

.episode { position: relative; padding: 48px 0; border-bottom: 1px solid var(--preto); }
.episode__media { float: right; width: 68.458%; aspect-ratio: 879 / 490; overflow: hidden; }
.episode__body {
  position: absolute;
  top: 50%;
  left: 0;
  width: 27.181%;
  transform: translateY(-50%);
}
.episode__body .meta { margin: 24px 0; }
.episode__body .date { color: inherit; }

/* Matéria ------------------------------------------------------------------- */

/* Header da matéria — modelo vertical: foto retrato (50%) + bloco escuro (50%) */
.materia-hero { position: relative; background: var(--grafite); }
.materia-hero--vertical .materia-hero__media { float: left; width: 50%; aspect-ratio: 864 / 1152; overflow: hidden; }
.materia-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.materia-hero--vertical .materia-hero__box { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.materia-hero__content {
  position: absolute;
  top: 50%;
  left: 21.644%;
  right: 21.644%;
  transform: translateY(-50%);
  text-align: center;
  color: var(--branco);
}
.materia-hero__tag { color: var(--laranja); }
.materia-hero__tag .dot { color: var(--bege); }
.materia-hero__content .h1 { margin: 32px 0; color: var(--bege); }
.materia-hero__content .date { display: block; margin-top: 32px; color: var(--branco); }

/* Header da matéria — modelo horizontal: foto em largura total + título centralizado abaixo */
.materia-hero--horizontal { background: none; }
.materia-hero--horizontal .materia-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 1728 / 890;
  overflow: hidden;
}
.materia-hero--horizontal .materia-hero__media img { object-position: 50% 81%; }
.materia-hero__credito {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: var(--branco);
}
.materia-hero--horizontal .materia-hero__content {
  position: static;
  transform: none;
  width: 720px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding-top: 64px;
  color: var(--preto);
}
.materia-hero--horizontal .materia-hero__tag,
.materia-hero--horizontal .materia-hero__tag .dot,
.materia-hero--horizontal .h1 { color: var(--preto); }
.materia-hero--horizontal .date { color: var(--cinza-azulado); }

/* no modelo horizontal o crédito fica centralizado, logo abaixo do título */
.materia--horizontal .materia__body { padding-top: 28px; }
.materia--horizontal .materia__byline { text-align: center; }
.materia--horizontal .materia__byline p + p { margin-top: 0; }

/* Corpo da matéria: coluna de texto de 720px, imagens podem sair da coluna */
.materia__body {
  padding: 72px 0 0;
  font-family: var(--font-texto);
  font-size: 18px;
  line-height: 24px;
}
.materia__body > p,
.materia__body > h2,
.materia__body > h3,
.materia__body > blockquote,
.materia__byline {
  width: 720px;
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
.materia__body > p { margin-bottom: 24px; }
.materia__body strong { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 700; }
.materia__body em { font-family: "IBM Plex Serif", Georgia, serif; font-style: italic; }
.materia__body p a { font-family: "IBM Plex Serif", Georgia, serif; font-weight: 500; text-decoration: underline; }
.materia__body p a:hover { color: var(--laranja); }

.materia__byline {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--preto);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 24px;
}
.materia__byline p + p { margin-top: 8px; }
.materia__autor { text-transform: uppercase; }

.materia__body > h2 { margin-top: 72px; margin-bottom: 40px; font-family: var(--font-base); }
.materia__body > blockquote {
  margin-top: 40px;
  margin-bottom: 40px;
  padding-left: 24px;
  border-left: 3px solid var(--preto);
  font-size: 24px;
  line-height: 30px;
  font-weight: 300;
  font-style: italic;
}

/* Leia também */
.leia { padding: 120px 0 108px; }
.leia__heading { padding-bottom: 24px; border-bottom: 1px solid var(--linha); }
.leia__posts { margin-top: 40px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1400px) {
  .wrap { margin: 0 6%; }
  .nav a, .nav__label { margin-right: 22px; }
  .header__logo { margin-right: 40px; }
}

/* --------------------------------------------------------------------------
   Mobile e tablet (< 1280px) — referência: frame 393px
   Calha lateral de 32px em 393px = 8.14vw
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  :root { --header-h: 77px; --gutter: 8.14vw; }

  .wrap { margin: 0 var(--gutter); }

  /* Tipografia mobile */
  .h1 { font-size: 28px; line-height: 32px; }
  .h2, .h3 { font-size: 20px; line-height: 24px; }
  .h4 { font-size: 17px; line-height: 21px; }
  .text { font-size: 16px; line-height: 22px; }
  .text-small { font-size: 14px; line-height: 20px; }
  .special { font-size: clamp(88px, 22.4vw, 172px); line-height: 1; }

  /* Header: menu à esquerda, logo no centro, busca à direita */
  .header__inner { position: relative; padding: 0 var(--gutter); }
  .header__logo {
    position: absolute;
    top: 28px;
    left: 50%;
    float: none;
    width: 88px;
    margin: 0 0 0 -44px;
  }
  .header__toggle {
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    margin-top: 24px;
    padding: 6px 4px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .header__toggle span { display: block; height: 2px; margin-bottom: 3px; background: var(--preto); transition: transform .2s ease, opacity .2s ease; }
  .header.is-open .header__toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .header.is-open .header__toggle span:nth-child(2) { opacity: 0; }
  .header.is-open .header__toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .header__search { display: block; float: right; width: 20px; margin-top: 29px; }

  .header__menu {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    width: 100%;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 24px var(--gutter) 32px;
    background: var(--branco);
    border-top: 1px solid var(--linha);
  }
  .header.is-open .header__menu { display: block; }
  .nav { padding-top: 0; }
  .nav--revista, .nav--estudio { float: left; width: 50%; }
  .nav a, .nav__label { float: none; display: block; margin: 0 0 16px; }
  .nav .nav__search { display: none; }

  /* Hero: foto em largura total, sem o logo grande */
  .hero__media { float: none; display: block; width: 100%; aspect-ratio: 393 / 363; }
  .hero__side { float: none; width: 100%; padding: 32px var(--gutter) 0; }
  .hero__logo, .hero__tagline { display: none; }
  .hero__post { margin-top: 0; }
  .hero__post .h1 { margin: 24px 0; font-size: 28px; line-height: 32px; }
  .hero__post .date { margin-top: 24px; }

  /* Tá na rua: destaques primeiro, "Últimas" depois */
  .rua { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--linha); }
  .rua .special { margin-bottom: 24px; }
  .rua__cols { border-top: 0; background: none; }
  .rua__col, .rua__col--card, .rua__col--list { float: none; left: 0; width: 100%; }
  .rua__col--card, .rua__col--card + .rua__col--card { padding: 0 0 48px; }
  .card__media { aspect-ratio: 392 / 523; }
  .card__body { margin: 24px var(--gutter) 0; }

  .rua__col--list { padding-bottom: 84px; }
  .rua__heading { padding: 24px var(--gutter) 0; margin-bottom: 32px; }
  .rua__col--list .item { padding: 0 var(--gutter) 32px; margin-bottom: 32px; }
  .rua__col--list .item:last-of-type { padding-bottom: 0; margin-bottom: 40px; border-bottom: 0; }
  .item .date, .thumb .date { display: none; }
  .rua__more { margin-left: var(--gutter); }

  /* Do estúdio */
  .estudio { padding: 24px 0 72px; }
  .estudio .special { margin-bottom: 24px; }
  .feature { margin: 0 calc(-1 * var(--gutter)); background: none; }
  .feature__media { float: none; display: block; width: 100%; }
  .feature__box { position: static; width: auto; }
  .feature__content { position: static; transform: none; padding: 24px var(--gutter) 0; }
  .feature__content .tag { color: var(--laranja); }
  .feature__content .h2 { margin: 16px 0; color: var(--branco); }
  .feature__content .text, .case__body .text-small { font-size: 14px; line-height: 20px; color: #d7d7d7; }
  .feature__content .btn { display: none; }

  .estudio__heading { margin-top: 56px; }
  .cases { margin: 24px 0 48px; }
  .case, .case + .case { float: none; width: 100%; padding-right: 0; }
  .case + .case { margin-top: 40px; }
  .case__media { float: none; display: block; width: 100%; aspect-ratio: 329 / 439; }
  .case__body { float: none; width: 100%; padding-top: 24px; }
  .case__body .tag-small { margin: 12px 0; }

  /* Podcast */
  .podcast { padding: 48px 0 56px; }
  .podcast__title { float: none; width: auto; margin-bottom: 15px; text-align: center; white-space: normal; font-size: 52px; }
  .podcast__media { float: none; display: block; width: auto; margin: 0 calc(-1 * var(--gutter)); }
  .podcast__play { width: 18.07%; }
  .podcast__info { float: none; width: 100%; margin-top: 32px; }
  .podcast__info .meta { margin: 16px 0; }
  .podcast__info .text-small { font-size: 16px; line-height: 22px; }
  .podcast__links { margin-top: 40px; }
  .podcast__links li { margin-right: 32px; }

  /* + Destaques: lista só com texto */
  .destaques { padding: 24px 0 76px; border-top: 1px solid var(--linha); }
  .destaques .special { margin-bottom: 24px; }
  .destaques__main { float: none; width: 100%; }
  .destaques__media { margin: 0 calc(-1 * var(--gutter)) 24px; aspect-ratio: 393 / 524; }
  .meta__tag--wide { font-size: 13px; line-height: 17px; letter-spacing: 0; }
  .destaques__list {
    float: none;
    width: auto;
    margin: 32px calc(-1 * var(--gutter)) 0;
    padding-top: 32px;
    border-top: 1px solid var(--linha);
  }
  .thumb { padding: 0 var(--gutter) 32px; margin-bottom: 32px; }
  .thumb:last-of-type { padding-bottom: 0; margin-bottom: 40px; border-bottom: 0; }
  .thumb__media { display: none; }
  .thumb__body { float: none; width: 100%; padding-right: 0; }
  .destaques__list .btn { margin: 0 0 0 var(--gutter); }

  /* Footer centralizado */
  .footer { padding: 56px 0 80px; text-align: center; }
  .footer__brand { float: none; width: 100%; }
  .footer__logo { width: 90%; min-width: 0; margin: 0 auto; }
  .footer__copy { margin-top: 32px; }
  .footer__social { display: inline-block; margin-top: 32px; vertical-align: top; }
  .footer__social li { margin: 0 12px; }
  .footer__nav, .footer__nav--revista { float: none; width: 100%; margin-top: 56px; }
  .footer__nav ul { margin-top: 24px; }
  .footer__nav li:last-child { margin-bottom: 0; }
}

/* Tablet (700–1279px): mesmo layout mobile, com pares lado a lado e fotos menos altas */
@media (min-width: 700px) and (max-width: 1279px) {
  .hero__media { aspect-ratio: 16 / 9; }

  .rua__col--card { float: left; width: 50%; padding-bottom: 72px; }
  .rua__col--card + .rua__col--card { float: left; width: 50%; padding-bottom: 72px; }
  .rua__col--list { clear: both; }
  .rua__heading { padding-top: 0; }

  .feature__media { aspect-ratio: 3 / 2; }
  .case { float: left; width: 47.5%; }
  .case + .case { float: right; width: 47.5%; margin-top: 0; }

  .destaques__media { aspect-ratio: 3 / 2; }
  .destaques__media img { object-position: 50% 20%; }

  .footer__logo { width: 320px; }
}

/* Editoria — responsivo */
@media (max-width: 1400px) {
  .posts { margin: 0 6%; }
}

/* Mobile e tablet (< 1280px) — referência: frame 393px */
@media (max-width: 1279px) {
  .editoria-hero { padding: 40px var(--gutter); }

  /* Subcategorias: uma linha só, com rolagem lateral para as que não cabem */
  .filtros {
    padding: 48px 0 0 var(--gutter);
    text-align: left;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros a { margin: 0 32px 0 0; }
  .filtros a:last-child { margin-right: var(--gutter); }

  /* Matérias: foto em cima, texto embaixo */
  .posts { margin: 0 var(--gutter); padding: 44px 0 72px; }
  .post, .post:nth-child(even) { float: none; width: 100%; margin-bottom: 48px; }
  .post__media { float: none; display: block; width: 100%; aspect-ratio: 329 / 439; }
  .post__body { float: none; width: 100%; padding-top: 24px; }
  .post__body .h3 { font-size: 22px; line-height: 26px; }
  .post__body .tag-small { margin: 12px 0; }
  .post__body .text-small { font-size: 16px; line-height: 22px; }
}

/* Tablet (700–1279px): matérias em duas colunas */
@media (min-width: 700px) and (max-width: 1279px) {
  .post { float: left; clear: left; width: 47.5%; }
  .post:nth-child(even) { float: right; clear: none; width: 47.5%; }
}

/* Cases — responsivo */
@media (max-width: 1400px) {
  .cases-list { margin: 0 6%; }
}

/* Mobile e tablet (< 1280px) — referência: frame 393px */
@media (max-width: 1279px) {
  .cases-page { padding-top: 24px; }
  .cases-page .special { margin-bottom: 40px; }
  .cases-list { margin: 0 var(--gutter); padding-top: 48px; }

  /* Cases em cards: foto em cima, depois título, tag e resumo */
  .case-row { padding: 0 0 48px; border-bottom: 0; }
  .case-row__media { float: none; display: block; width: 100%; aspect-ratio: 329 / 439; }
  .case-row__body { position: static; width: 100%; transform: none; padding-top: 24px; }
  .case-row__body .tag, .case-row__body .btn { display: none; }
  .case-row__body .case-row__tag-m { display: block; margin: 12px 0; }
  .case-row__body .h1 { margin: 0; font-size: 22px; line-height: 26px; }

  .load-more { padding: 0 var(--gutter) 62px; }
}

/* Tablet (700–1279px): cases em duas colunas */
@media (min-width: 700px) and (max-width: 1279px) {
  .case-row { float: left; clear: left; width: 47.5%; }
  .case-row:nth-child(even) { float: right; clear: none; }
  .load-more { clear: both; padding-top: 16px; }
}

/* Podcast (página) — responsivo */
@media (max-width: 1400px) {
  .episodes { margin: 0 6%; }
  .episode__media { width: 62%; }
  .episode__body { width: 33%; }
}

/* Mobile e tablet (< 1280px) — referência: frame 393px */
@media (max-width: 1279px) {
  .podcast-page { padding-top: 24px; }
  .podcast-page .special { margin-bottom: 40px; }

  /* a linha fica dentro da calha; as imagens vão de borda a borda */
  .episodes { margin: 0; border-top: 0; }
  .episodes::before {
    content: "";
    display: block;
    margin: 0 var(--gutter) 40px;
    border-top: 1px solid var(--preto);
  }

  .episode { padding: 0 0 48px; border-bottom: 0; }
  .episode__media { float: none; display: block; width: 100%; aspect-ratio: 1212 / 676; }
  .episode__body {
    position: static;
    float: none;
    width: auto;
    transform: none;
    padding: 24px var(--gutter) 0;
  }
  .episode__body .meta { margin: 16px 0; }
  .episode__body .date { color: var(--cinza-azulado); }
}

/* Tablet (700–1279px): episódios em duas colunas, dentro da calha */
@media (min-width: 700px) and (max-width: 1279px) {
  .episodes { margin: 0 var(--gutter); }
  .episodes::before { margin: 0 0 40px; }
  .episode { float: left; clear: left; width: 47.5%; }
  .episode:nth-child(even) { float: right; clear: none; }
  .episode__body { padding: 24px 0 0; }
}

/* Matéria — responsivo */
@media (max-width: 1400px) {
  .materia-hero__content { left: 12%; right: 12%; }
}

/* Mobile e tablet (< 1280px) — sem Figma: segue calha, espaçamentos e fontes
   das outras páginas mobile */
@media (max-width: 1279px) {
  /* Header vertical: foto em cima, bloco escuro com o título embaixo */
  .materia-hero--vertical .materia-hero__media { float: none; width: 100%; aspect-ratio: 393 / 524; }
  .materia-hero--vertical .materia-hero__box { position: static; width: auto; }
  .materia-hero--vertical .materia-hero__content {
    position: static;
    transform: none;
    padding: 40px var(--gutter) 48px;
  }
  .materia-hero__content .h1 { margin: 24px 0; }
  .materia-hero__content .date { margin-top: 24px; }

  /* Header horizontal: foto em largura total, título abaixo */
  .materia-hero--horizontal .materia-hero__media { aspect-ratio: 393 / 363; }
  .materia-hero--horizontal .materia-hero__content {
    width: auto;
    max-width: none;
    margin: 0 var(--gutter);
    padding-top: 32px;
  }
  .materia-hero__credito { bottom: 8px; font-size: 13px; line-height: 20px; }
  .materia--horizontal .materia__body { padding-top: 24px; }

  /* Corpo */
  .materia__body { padding-top: 40px; font-size: 16px; line-height: 22px; }
  .materia__body > p,
  .materia__body > h2,
  .materia__body > h3,
  .materia__body > blockquote,
  .materia__byline { max-width: calc(100% - 2 * var(--gutter)); }
  .materia__body > p { margin-bottom: 22px; }

  .materia__byline { padding-bottom: 24px; margin-bottom: 24px; font-size: 14px; line-height: 20px; }
  .materia__byline p + p { margin-top: 4px; }

  .materia__body > h2 { margin-top: 48px; margin-bottom: 24px; }
  .materia__body > blockquote {
    margin-top: 32px;
    margin-bottom: 32px;
    padding-left: 16px;
    font-size: 20px;
    line-height: 26px;
  }

  /* Leia também */
  .leia { padding: 64px 0 72px; }
  .leia__posts { margin-top: 24px; }
  .leia .post:last-child { margin-bottom: 40px; }
}

/* Tablet (700–1279px) */
@media (min-width: 700px) and (max-width: 1279px) {
  .materia-hero--horizontal .materia-hero__media { aspect-ratio: 16 / 9; }
  .materia-hero--vertical .materia-hero__media { aspect-ratio: 4 / 3; }
  .materia-hero--vertical .materia-hero__media img { object-position: 50% 20%; }
  .materia-hero--horizontal .materia-hero__content { width: 720px; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; }
}

/* Tablet largo (900–1279px): o header vertical volta a ficar lado a lado */
@media (min-width: 900px) and (max-width: 1279px) {
  .materia-hero--vertical .materia-hero__media { float: left; width: 50%; aspect-ratio: 864 / 1152; }
  .materia-hero--vertical .materia-hero__box { position: absolute; width: 50%; }
  .materia-hero--vertical .materia-hero__content {
    position: absolute;
    left: 10%;
    right: 10%;
    transform: translateY(-50%);
    padding: 0;
  }
  .materia-hero--vertical .materia-hero__media img { object-position: 50% 50%; }
}

/* ==========================================================================
   WordPress
   Ajustes que só existem no tema: barra de administração, conteúdo vindo do
   editor (blocos), busca e estados vazios.
   ========================================================================== */

/* Header fixo abaixo da barra de administração */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}
@media (max-width: 600px) {
  /* nessa largura a barra do WordPress deixa de ser fixa */
  .admin-bar .header { position: absolute; }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Áreas de imagem sem imagem destacada */
.hero__media, .card__media, .feature__media, .case__media, .destaques__media,
.thumb__media, .post__media, .case-row__media, .episode__media,
.materia-hero--vertical .materia-hero__media { background: var(--cinza-claro); }
.podcast__media > img:first-child { height: auto; }

/* Listagens: botão "ver mais" e mensagens de lista vazia */
.posts + .load-more { margin-top: -40px; padding-top: 0; }
.posts + .load-more--vazio { display: none; }
.load-more--vazio { padding-top: 0; }
.vazio { padding: 24px 0; font-size: 18px; line-height: 24px; }

/* Busca */
.busca-wrap { margin: 0 12.847%; padding-top: 64px; }
.busca { border-bottom: 1px solid var(--preto); }
.busca__campo {
  float: left;
  width: 75%;
  padding: 12px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  line-height: 24px;
  outline: 0;
}
.busca__botao {
  float: right;
  padding: 12px 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.busca__botao:hover { color: var(--laranja); }

/* Páginas comuns (Sobre, Contato…) */
.materia--pagina .materia__body { padding-bottom: 120px; }
.materia--pagina .materia__body > *:first-child { margin-top: 40px; }

/* --------------------------------------------------------------------------
   Conteúdo da matéria vindo do editor
   - parágrafo, H2 (intertítulo), H3 (pergunta), lista e citação ficam na
     coluna de 720px;
   - imagem e vídeo saem da coluna (997px / 970px);
   - alinhamento "largura total" vai de borda a borda;
   - galeria ou colunas com duas imagens viram a dupla de fotos.
   -------------------------------------------------------------------------- */
.materia__body > h4,
.materia__body > h5,
.materia__body > ul,
.materia__body > ol,
.materia__body > pre,
.materia__body > table,
.materia__body > .wp-block-group,
.materia__body > .wp-block-buttons,
.materia__body > .wp-block-table {
  width: 720px;
  max-width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
.materia__body > ul, .materia__body > ol { margin-bottom: 24px; padding-left: 1.2em; }
.materia__body > ul { list-style: disc; }
.materia__body > ol { list-style: decimal; }
.materia__body li { margin-bottom: 8px; }

.materia__body > h2 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.materia__body > h3,
.materia__body > h4 {
  margin-top: 56px;
  margin-bottom: 24px;
  font-family: var(--font-base);
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
}

.materia__body > blockquote p { margin: 0; }
.materia__body > blockquote p + p { margin-top: 16px; }
.materia__body > blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  font-weight: 400;
}

.materia__body > figure,
.materia__body > .wp-block-image,
.materia__body > .wp-block-video,
.materia__body > .wp-block-embed {
  width: 997px;
  max-width: calc(100% - 48px);
  margin: 72px auto;
}
.materia__body > .wp-block-embed { width: 970px; }
.materia__body > .alignfull { width: 100%; max-width: 100%; margin-top: 48px; }
.materia__body img { max-width: 100%; height: auto; }
.materia__body figure img, .materia__body figure video { display: block; width: 100%; }
.materia__body figcaption {
  margin-top: 8px;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}
.materia__body .wp-block-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

.materia__body > .wp-block-gallery,
.materia__body > .wp-block-columns {
  width: auto;
  max-width: none;
  margin: 48px 3.241% 72px;
}

@media (max-width: 1279px) {
  .busca-wrap { margin: 0 var(--gutter); padding-top: 40px; }
  .busca__campo { font-size: 17px; }

  .materia__body > h4,
  .materia__body > h5,
  .materia__body > ul,
  .materia__body > ol,
  .materia__body > pre,
  .materia__body > table,
  .materia__body > .wp-block-group,
  .materia__body > .wp-block-buttons,
  .materia__body > .wp-block-table { max-width: calc(100% - 2 * var(--gutter)); }
  .materia__body > ul, .materia__body > ol { margin-bottom: 22px; }

  .materia__body > h2 { font-size: 20px; line-height: 24px; }
  .materia__body > h3,
  .materia__body > h4 { margin-top: 40px; margin-bottom: 16px; font-size: 17px; line-height: 21px; }

  /* fotos de borda a borda, vídeo dentro da calha */
  .materia__body > figure,
  .materia__body > .wp-block-image,
  .materia__body > .wp-block-video { max-width: 100%; margin: 32px auto 48px; }
  .materia__body > .wp-block-embed { max-width: calc(100% - 2 * var(--gutter)); margin: 32px auto 48px; }
  .materia__body figcaption { padding: 0 var(--gutter); font-size: 13px; line-height: 20px; }
  .materia__body > .wp-block-gallery,
  .materia__body > .wp-block-columns { margin: 32px 0 48px; }

  .materia--pagina .materia__body { padding-bottom: 72px; }
}

@media (min-width: 700px) and (max-width: 1279px) {
  .materia__body > figure,
  .materia__body > .wp-block-image,
  .materia__body > .wp-block-video { max-width: calc(100% - 2 * var(--gutter)); }
  .materia__body > .alignfull { max-width: 100%; }
  .materia__body > .wp-block-gallery,
  .materia__body > .wp-block-columns { margin: 32px var(--gutter) 48px; }
  .materia__body figcaption { padding: 0; }
}

/* Home, "Tá na rua" no desktop: a lista "Últimas" volta para a primeira coluna
   mesmo quando só um destaque (ou nenhum) foi escolhido na página HOME do admin */
@media (min-width: 1280px) {
  .rua__cols--1 .rua__col--list { left: -33.333%; }
  .rua__cols--0 .rua__col--list { left: 0; }
}

/* Botões das plataformas no header do episódio de podcast (abaixo do resumo, antes da data) */
.materia-hero__links { display: inline-block; margin-top: 32px; vertical-align: top; }
.materia-hero__links li { margin: 0 12px; }
.materia-hero__links + .date { margin-top: 24px; }
.materia-hero--vertical .materia-hero__links img { filter: invert(1); } /* ícones pretos sobre o bloco escuro */
@media (max-width: 1279px) {
  .materia-hero__links { margin-top: 24px; }
  .materia-hero__links li { margin: 0 16px; }
}

/* Home: título do case em destaque com link, e botão "Mais episódios" do podcast */
.h2 a:hover { color: var(--laranja); }
.podcast__more { margin-top: 32px; }

/* Etiquetas com link (editoria, formato, Case, Podcast) */
.tag a:hover, .tag-small a:hover, .meta__tag a:hover { text-decoration: underline; }
/* Cards da home em que a foto e o título são links separados (a etiqueta tem links próprios) */
.card__media { display: block; }

/* Botão "ver mais" enquanto busca a próxima página */
.btn-more.is-loading { opacity: .5; pointer-events: none; }
.btn-more.is-loading::after { display: none; }