@charset "UTF-8";
/* ============================================================================
   BASE — reset, tipografia raiz, shell utilitário, reveal.
   Consome os tokens de css/tokens.css (linkado à parte).
   ========================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--rc-bg);
  color: var(--rc-text);
  font-family: var(--rc-font);
  font-size: var(--rc-text-base);
  line-height: var(--rc-lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--rc-green);
  outline-offset: 3px;
  border-radius: var(--rc-radius-sm);
}

.shell {
  max-width: var(--rc-maxw);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
}

/* Reveal scroll-linked (progressive enhancement) */
.js .rv {
  opacity: 0;
  transform: translateY(var(--rc-space-3));
  filter: blur(6px);
  transition: opacity var(--rc-dur-4) var(--rc-ease), transform var(--rc-dur-4) var(--rc-ease), filter var(--rc-dur-4) var(--rc-ease);
}
.js .rv.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Reveal scroll-linked REVERSÍVEL (monta/desmonta) — usado onde o movimento deve
   seguir o scroll 1:1 e reverter ao subir. O JS (main.js) escreve --reveal (0→1)
   a cada frame conforme o centro do elemento sobe até ~meio da tela; sem transição
   (o próprio scroll é a linha do tempo). Direção pelo modificador. Sem JS a área
   nem entra no seletor .js → fica visível. */
.js .rvx {
  --reveal:0;
  opacity: clamp(0, var(--reveal) * 1.35, 1);
  will-change: transform, opacity;
}

.js .rvx--left {
  transform: translateX(calc((1 - var(--reveal)) * -44px));
}

.js .rvx--right {
  transform: translateX(calc((1 - var(--reveal)) * 44px));
}

/* ============================================================================
   HEADER — atmosfera do topo, faixa animada, header preso, navegação e menu mobile.
   ========================================================================= */
/* ── ATMOSFERA DO TOPO ─────────────────────────────────────────────────────
   Vídeo em loop por baixo, véu roxo por cima, ambos com o mesmo fade. */
.backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: var(--rc-backdrop-h);
  z-index: var(--rc-z-backdrop);
  pointer-events: none;
  overflow: hidden;
  background: var(--rc-bg);
}
.backdrop__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--rc-video-opacity);
  -webkit-mask-image: var(--rc-veil-mask);
  mask-image: var(--rc-veil-mask);
}
.backdrop__veil {
  position: absolute;
  inset: 0;
  background: var(--rc-veil);
}

/* ── FAIXA DE MARCA — 4 cores em fluxo horizontal contínuo ──────────────────
   Os 4 spans são a base estática (fallback de reduced-motion). Por cima, um
   gradiente das 4 cores em loop sem emenda (começa e termina em flag-1). */
.flag {
  display: flex;
  height: var(--rc-flag-h);
  position: relative;
  z-index: var(--rc-z-header);
  overflow: hidden;
}
.flag span {
  flex: 1;
}
.flag span:nth-child(1) {
  background: var(--rc-flag-1);
}
.flag span:nth-child(2) {
  background: var(--rc-flag-2);
}
.flag span:nth-child(3) {
  background: var(--rc-flag-3);
}
.flag span:nth-child(4) {
  background: var(--rc-flag-4);
}
.flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--rc-flag-1), var(--rc-flag-2), var(--rc-flag-3), var(--rc-flag-4), var(--rc-flag-1));
  background-size: 200% 100%;
  animation: flagFlow 14s linear infinite;
}

@keyframes flagFlow {
  to {
    background-position: -200% 0;
  }
}
/* ── HEADER — sem fundo próprio; ganha fundo ao rolar; condensa ao travar ───*/
.sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--rc-z-header);
  background: transparent;
  transition: background var(--rc-dur-3) var(--rc-ease), box-shadow var(--rc-dur-3) var(--rc-ease), backdrop-filter var(--rc-dur-3) var(--rc-ease);
}
.header.is-stuck {
  background: var(--rc-header-stuck);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  box-shadow: var(--rc-shadow-2);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
  height: var(--rc-header-h);
  transition: height var(--rc-dur-3) var(--rc-ease);
}
.header {
  /* Ao travar, o header condensa. min() evita "crescer" onde a base já é < 80. */
}
.header.is-stuck .header__inner {
  height: min(80px, var(--rc-header-h));
}

.brand {
  display: block;
  flex: none;
  transition: transform var(--rc-dur-3) var(--rc-ease);
}
.brand:hover {
  transform: translateY(-1px) scale(1.02);
}
.brand img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 var(--rc-space-0h) 12px rgba(0, 0, 0, 0.28));
}

/* ── MENU DESKTOP — pílula de vidro segmentada ─────────────────────────────*/
.nav {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 1px;
  background: var(--rc-glass);
  border: 1px solid var(--rc-glass-line);
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-inner-light);
}
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--rc-space-3);
  font-size: var(--rc-text-base);
  line-height: var(--rc-lh-base);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-paper);
  white-space: nowrap;
  transition: color var(--rc-dur-2) var(--rc-ease), background var(--rc-dur-2) var(--rc-ease);
  /* Só as pontas arredondam — o miolo é reto, acompanhando o corte do item ativo. */
  border-radius: 0;
}
.nav__link:first-child {
  border-radius: var(--rc-radius-pill) 0 0 var(--rc-radius-pill);
}
.nav__link:last-child {
  border-radius: 0 var(--rc-radius-pill) var(--rc-radius-pill) 0;
}
.nav__link:hover {
  background: var(--rc-glass-hover);
}
.nav__link--active {
  background: var(--rc-purple-light);
  color: var(--rc-paper);
}
.nav__link--active:hover {
  background: var(--rc-purple-light);
}
.nav__sep {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--rc-purple-light);
}

.contact {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 48px;
  background: var(--rc-glass);
  border: 1px solid var(--rc-glass-line);
  border-radius: var(--rc-radius-pill);
  box-shadow: var(--rc-inner-light);
  transition: background var(--rc-dur-2) var(--rc-ease), transform var(--rc-dur-2) var(--rc-ease);
}
.contact:hover {
  background: var(--rc-glass-hover);
  transform: translateY(-1px);
}
.contact img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ── HAMBÚRGUER + MENU MOBILE ──────────────────────────────────────────────
   O toggle mora acima do overlay (sobe o header quando aberto); o painel é
   uma folha fixa que desce sobre a página. Só existe ≤1059px. */
.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 56px;
  height: 48px;
  padding: 0 16px;
  /* background:var(--rc-glass);border:1px solid var(--rc-glass-line);
     border-radius:var(--rc-radius-pill);box-shadow:var(--rc-inner-light); */
  position: relative;
  z-index: calc(var(--rc-z-modal) + 1);
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--rc-paper);
  border-radius: 2px;
  filter: drop-shadow(0 1px 2px rgb(var(--rc-purple-deepest)/0.6));
  transition: transform var(--rc-dur-2) var(--rc-ease), opacity var(--rc-dur-1) var(--rc-ease);
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .header {
  z-index: calc(var(--rc-z-modal) + 2);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--rc-z-modal);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: var(--rc-space-1);
  overflow-y: auto;
  padding: calc(var(--rc-header-h) + var(--rc-space-2)) var(--rc-gutter) var(--rc-space-8);
  background: linear-gradient(180deg, rgba(44, 8, 76, 0.98), rgb(var(--rc-purple-deepest)/0.99));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--rc-dur-2) var(--rc-ease), transform var(--rc-dur-3) var(--rc-ease), visibility var(--rc-dur-2) var(--rc-ease);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-nav__link {
  font-size: var(--rc-text-2xl);
  line-height: 1.5;
  font-weight: var(--rc-fw-medium);
  color: var(--rc-paper);
  padding: var(--rc-space-2) 0;
  border-bottom: 1px solid var(--rc-glass-line);
  transition: color var(--rc-dur-2) var(--rc-ease), padding-left var(--rc-dur-2) var(--rc-ease);
}
.mobile-nav__link:hover {
  color: var(--rc-green);
  padding-left: var(--rc-space-2);
}
.mobile-nav__link--active {
  color: var(--rc-green);
}
.mobile-nav__link--contact {
  border-bottom: none;
}

/* ============================================================================
   HERO — coverflow 5 capas, luz cônica girando, pill de categoria, dots.
   ========================================================================= */
/* overflow-x contido aqui: as capas ±2 sangram até a borda sem alargar o documento */
.hero {
  position: relative;
  z-index: var(--rc-z-content);
  overflow: hidden;
  padding-block: var(--rc-space-2) var(--rc-space-6);
}
.hero__stage {
  position: relative;
  height: clamp(280px, 34vw, 400px);
  perspective: 2000px;
}
.hero__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rc-hero-w);
  aspect-ratio: var(--rc-hero-ratio);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  border-radius: var(--rc-radius-sm);
  cursor: pointer;
  box-shadow: var(--rc-shadow-3);
  will-change: transform, opacity;
  transition: transform var(--rc-dur-4) var(--rc-ease), opacity var(--rc-dur-4) var(--rc-ease), filter var(--rc-dur-4) var(--rc-ease);
}
.hero {
  /* O recorte mora aqui, para o halo poder vazar para fora da capa */
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.hero__img {
  transform-origin: center;
}
.hero__cap {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  padding: var(--rc-space-5);
  max-width: 100%;
  color: var(--rc-paper);
  opacity: 0;
  transform: translateY(var(--rc-space-1));
  pointer-events: none;
  transition: opacity var(--rc-dur-3) var(--rc-ease) 120ms, transform var(--rc-dur-3) var(--rc-ease) 120ms;
}
.hero__link {
  color: inherit;
}
.hero__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.hero__title {
  font-size: clamp(var(--rc-text-lg), 2.6vw, var(--rc-text-2xl));
  line-height: 1.1;
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  text-wrap: balance;
}
.hero {
  /* Navegação do hero — visual exato do Figma */
}
.hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-hero-dot-gap);
  margin-top: var(--rc-space-2);
}
.hero__dot {
  position: relative;
  width: var(--rc-hero-dot);
  height: var(--rc-hero-dot);
  border-radius: 50%;
  background: var(--rc-flag-1);
  padding: 0;
  transition: width var(--rc-dur-3) var(--rc-ease), border-radius var(--rc-dur-3) var(--rc-ease);
}
.hero__dot.is-on {
  width: var(--rc-hero-dot-active);
  border-radius: 12px;
}
.hero__dot {
  /* Área de toque de 44px sem alterar o visual do ponto */
}
.hero__dot::after {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -6px;
  right: -6px;
}

/* Luz colorida girando na beira da capa central, nas 4 cores da faixa do topo.
   Gira o ÂNGULO do cônico (via @property), não o elemento — a moldura não deforma. */
@property --rc-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--rc-radius-sm);
  background: conic-gradient(from var(--rc-glow-angle), var(--rc-flag-1), var(--rc-flag-2), var(--rc-flag-3), var(--rc-flag-4), var(--rc-flag-1));
  filter: blur(calc(var(--rc-glow-width) * 0.5));
  opacity: 0;
  transition: opacity var(--rc-dur-4) var(--rc-ease), filter var(--rc-dur-3) var(--rc-ease);
}

/* Glow só no hover da capa central (decisão do dono): em repouso a moldura fica
   limpa; o cônico nas 4 cores da faixa acende e gira ao passar o mouse. */
.hero__card.is-center:hover::before {
  opacity: var(--rc-glow-opacity);
  animation: rcGlowSpin var(--rc-glow-speed) linear infinite;
  filter: blur(calc((var(--rc-glow-width) + var(--rc-glow-hover)) * 0.5));
}

@keyframes rcGlowSpin {
  to {
    --rc-glow-angle:360deg;
  }
}
.hero__card.is-center .hero__img {
  animation: heroZoom var(--rc-dur-zoom) var(--rc-ease-soft) forwards;
}

@keyframes heroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
.hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 34%, rgb(var(--rc-purple-deepest)/0.92) 100%);
}

.hero__card.is-center .hero__cap {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Só a capa central navega: o link estende a área clicável para o cartão inteiro. */
.hero__card.is-center .hero__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Pill de categoria — SÓ no hero e nos destaques, e SÓ para GE / Série Ouro. */
.cat-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--rc-space-2);
  padding: 6px 12px;
  border-radius: var(--rc-radius-pill);
  font-size: var(--rc-text-xs);
  line-height: 1;
  font-weight: var(--rc-fw-medium);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  color: var(--rc-paper);
  background: var(--rc-pink);
}

/* Nos destaques o pill é menor (~metade) */
.tile .cat-pill {
  margin-bottom: var(--rc-space-1);
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--rc-pink);
}

/* ============================================================================
   INTRO — montagem "peça a peça" do hero na primeira chegada da sessão.
   A classe .rc-intro entra no <html> por script inline (head.php) só quando é a
   home, sem reduced-motion e sem a flag de sessão. Aqui ela só ESCONDE as peças
   antes do primeiro paint (anti-FOUC); quem monta é js/hero-intro.js (Web
   Animations API), que grava a flag e remove a classe ao terminar. A classe é a
   única porta: sem ela (já visto, ou sem JS) tudo renderiza normal, sem atraso.
   ========================================================================= */
.rc-intro .hero__media {
  opacity: 0;
}
.rc-intro .hero__cap > * {
  opacity: 0;
}
.rc-intro .hero__dot {
  opacity: 0;
}

/* ============================================================================
   VARIANTE hero--peek-pill (Figma 39:11) — SÓ DESKTOP.
   Os peeks deixam de ser a capa larga reduzida/inclinada e viram pílulas
   verticais estreitas. A capa central fica idêntica ao padrão. O JS escreve o
   translateX (px) e o z-index; aqui mora só a FORMA. Reversível: sem a classe
   .hero--peek-pill nada disto aplica. Mobile (≤900px) segue só a central.
   ========================================================================= */
@media (min-width: 901px) {
  .hero--peek-pill {
    /* A stage precisa comportar a central de 430px de altura: o .hero tem
       overflow:hidden e o card é centralizado por translateY(-50%), então uma
       stage mais baixa recortaria topo e base. Só nesta variante — o coverflow
       segue com sua altura própria (max 400). */
  }
  .hero--peek-pill .hero__stage {
    height: clamp(280px, 34vw, 430px);
  }
  .hero--peek-pill {
    /* MORFOSE: cada estágio se transforma no seguinte. Width/height/border-radius
       animam junto com transform/opacity/filter, então um pill CRESCE virando a
       central (e vice-versa) em vez de saltar de tamanho. O card que dá a volta
       (5→1) tem z-index baixo e cruza por trás. */
  }
  .hero--peek-pill .hero__card {
    transition: transform var(--rc-dur-4) var(--rc-ease), opacity var(--rc-dur-4) var(--rc-ease), filter var(--rc-dur-4) var(--rc-ease), width var(--rc-dur-4) var(--rc-ease), height var(--rc-dur-4) var(--rc-ease), border-radius var(--rc-dur-4) var(--rc-ease);
  }
  .hero--peek-pill {
    /* tamanho (width/height) das pílulas vem do JS — near e far são diferentes,
       proporcionais à central (Figma). Aqui só forma, dim e sombra. */
  }
  .hero--peek-pill .hero__card.is-peek {
    aspect-ratio: auto;
    border-radius: var(--rc-radius-pill);
    opacity: 1;
    box-shadow: var(--rc-shadow-2);
  }
  .hero--peek-pill {
    /* o véu escuro e o (invisível) halo herdam o raio de pílula */
  }
  .hero--peek-pill .hero__card.is-peek::after,
  .hero--peek-pill .hero__card.is-peek::before {
    border-radius: inherit;
  }
  .hero--peek-pill {
    /* Legenda sem reflow: o texto reflui em coluna quando a capa encolhe para 54px
       (o max-width acompanha o card). Solução: a LARGURA da legenda é fixada pelo
       JS na largura da capa central (independe do card, então nunca reflui), e o
       aparecer/sumir é um scale 0→1 + opacity a partir do canto inferior-esquerdo
       (transform, não reflui). Cresce do 0 na entrada e encolhe ao 0 na saída. */
  }
  .hero--peek-pill .hero__cap {
    box-sizing: border-box;
    transform-origin: 0 100%;
    transform: scale(0);
    opacity: 0;
    transition: transform var(--rc-dur-3) var(--rc-ease), opacity var(--rc-dur-3) var(--rc-ease);
  }
  .hero--peek-pill .hero__card.is-center .hero__cap {
    transform: scale(1);
    opacity: 1;
  }
  .hero--peek-pill {
    /* véu de baixo mais suave na pílula: o dado ali é a foto, não texto */
  }
  .hero--peek-pill .hero__card.is-peek::after {
    background: linear-gradient(180deg, transparent 55%, rgb(var(--rc-purple-deepest)/0.55) 100%);
  }
}
/* ============================================================================
   SEÇÕES — grid base, destaques, Grupo Especial, fotos, painéis (SO/Rio),
   Instagram, rodapé.
   ========================================================================= */
.section {
  position: relative;
  z-index: var(--rc-z-content);
  padding-block: var(--rc-section-y);
}
.section--alt {
  background: var(--rc-bg-alt);
}
.section {
  /* Colada ao hero: manchete e destaques leem como um bloco único. */
}
.section--joined {
  padding-block: 0;
}
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rc-space-3);
  margin-bottom: var(--rc-space-6);
}
.section__title {
  font-size: clamp(var(--rc-text-xl), 3vw, var(--rc-text-2xl));
  line-height: var(--rc-lh-2xl);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
}
.section__title b {
  color: var(--rc-purple);
  font-weight: var(--rc-fw-bold);
}
.section__more {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text-2);
  white-space: nowrap;
  transition: color var(--rc-dur-2) var(--rc-ease), gap var(--rc-dur-2) var(--rc-ease);
}
.section__more:hover {
  color: var(--rc-purple);
  gap: var(--rc-space-2);
}

.rule {
  height: 1px;
  background: var(--rc-line);
  border: none;
}

/* ── DESTAQUES — 4 colunas, texto SOBRE a foto ─────────────────────────────*/
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rc-space-4);
}

/* Mais notícias — 2 colunas de itens horizontais (some no mobile, ver responsivo) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rc-space-5) var(--rc-space-6);
}

.tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  box-shadow: var(--rc-shadow-1);
  transition: transform var(--rc-dur-3) var(--rc-ease), box-shadow var(--rc-dur-3) var(--rc-ease);
}
.tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 -12px 20px 2px rgba(247, 148, 29, 0.3), 12px 0 20px 2px rgba(221, 23, 165, 0.3), 0 12px 20px 2px rgba(245, 197, 24, 0.3), -12px 0 20px 2px rgba(141, 198, 63, 0.3), var(--rc-shadow-2);
}
.tile img {
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.tile:hover img {
  transform: scale(1.06);
}
.tile {
  /* Glow removido */
}
.tile__glow {
  display: none;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent 30%, rgb(var(--rc-purple-deepest)/0.55) 62%, rgb(var(--rc-purple-deepest)/0.94) 100%);
  pointer-events: none;
}
.tile__body {
  position: absolute;
  z-index: 4;
  inset: auto 0 0 0;
  padding: var(--rc-space-3);
  color: var(--rc-paper);
}
.tile__title {
  font-size: var(--rc-text-base);
  line-height: var(--rc-lh-base);
  font-weight: var(--rc-fw-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── GRUPO ESPECIAL — feature grande + stack de itens ──────────────────────*/
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rc-space-6);
}

.feature__media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  box-shadow: var(--rc-shadow-2);
  margin-bottom: var(--rc-space-3);
}
.feature__media img {
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.feature:hover .feature__media img {
  transform: scale(1.04);
}
.feature__title {
  font-size: var(--rc-text-xl);
  line-height: var(--rc-lh-xl);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
}
.feature:hover .feature__title {
  color: var(--rc-purple);
}
.feature__text {
  margin-top: var(--rc-space-2);
  color: var(--rc-text-2);
  max-width: 56ch;
}

/* Data badge nas featured images (topo direita) */
.date-badge {
  position: absolute;
  top: var(--rc-space-3);
  right: var(--rc-space-3);
  z-index: 10;
  padding: 8px 14px;
  border-radius: var(--rc-radius-pill);
  background: rgba(0, 0, 0, 0.5);
  font-size: var(--rc-text-sm);
  line-height: 1;
  font-weight: var(--rc-fw-medium);
  color: var(--rc-paper);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-4);
}

.item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--rc-space-3);
  align-items: center;
}
.item__media {
  aspect-ratio: 4/3;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  box-shadow: var(--rc-shadow-1);
}
.item__media img {
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.item:hover .item__media img {
  transform: scale(1.06);
}
.item__title {
  font-size: var(--rc-text-lg);
  line-height: var(--rc-lh-lg);
  font-weight: var(--rc-fw-medium);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--rc-dur-2) var(--rc-ease);
}
.item:hover .item__title {
  color: var(--rc-purple);
}
.item__meta {
  margin-top: var(--rc-space-1);
  font-size: var(--rc-text-xs);
  line-height: var(--rc-lh-xs);
  color: var(--rc-text-3);
}

/* ── ÚLTIMAS FOTOS — roxo mais escuro do site, fontes claras ───────────────*/
.fotos-section {
  background: linear-gradient(180deg, var(--rc-purple) 0%, rgb(var(--rc-purple-deepest)) 100%);
  color: var(--rc-paper);
  position: relative;
  overflow: hidden;
}
.fotos-section > .shell {
  position: relative;
  z-index: 2;
}
.fotos-section .section__head {
  color: var(--rc-paper);
}
.fotos-section .section__title b {
  color: var(--rc-green);
}
.fotos-section .section__more {
  color: rgba(244, 246, 250, 0.72);
}
.fotos-section .section__more:hover {
  color: var(--rc-green);
}
.fotos-section {
  /* Sobrescreve o álbum genérico dentro da seção escura */
}
.fotos-section .album__title {
  font-size: var(--rc-text-lg);
  line-height: var(--rc-lh-lg);
  font-weight: var(--rc-fw-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--rc-paper);
}
.fotos-section .album__count {
  margin-top: var(--rc-space-0h);
  font-size: var(--rc-text-xs);
  line-height: var(--rc-lh-xs);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.72);
}

/* Vídeo atmosférico sob o gradiente — só desktop/tablet; no mobile some (leveza) */
.fotos-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.album__media {
  aspect-ratio: 3/2;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  box-shadow: var(--rc-shadow-1);
  margin-bottom: var(--rc-space-2);
  transition: transform var(--rc-dur-3) var(--rc-ease), box-shadow var(--rc-dur-3) var(--rc-ease);
}
.album__media img {
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.album:hover .album__media {
  transform: translateY(-6px);
  box-shadow: var(--rc-shadow-2);
}
.album:hover .album__media img {
  transform: scale(1.06);
}
.album {
  /* Base (fora da seção escura) */
}
.album__title {
  font-size: var(--rc-text-lg);
  line-height: var(--rc-lh-lg);
  font-weight: var(--rc-fw-medium);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.album__count {
  margin-top: var(--rc-space-0h);
  font-size: var(--rc-text-xs);
  line-height: var(--rc-lh-xs);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  color: var(--rc-text-3);
}

/* ── PAINEL DUPLO — Série Ouro / Rio Carnaval ──────────────────────────────*/
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin-bottom: var(--rc-space-4);
}
.panel__title {
  font-size: var(--rc-text-xl);
  line-height: var(--rc-lh-xl);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  white-space: nowrap;
}
.panel__title b {
  color: var(--rc-purple);
}
.panel__line {
  flex: 1;
  height: 2px;
  background: var(--rc-line);
}
.panel__items {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-3);
  margin-top: var(--rc-space-4);
}
.panel__items .item {
  grid-template-columns: 160px 1fr;
}

/* ── INSTAGRAM ─────────────────────────────────────────────────────────────*/
.ig {
  text-align: center;
}
.ig__title {
  font-size: clamp(var(--rc-text-2xl), 4vw, var(--rc-text-3xl));
  line-height: var(--rc-lh-3xl);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
}
.ig__title b {
  color: var(--rc-purple);
}
.ig__handle {
  margin-top: var(--rc-space-1);
  color: var(--rc-text-2);
  font-size: var(--rc-text-sm);
}
.ig__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-6);
}
.ig__cell {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  box-shadow: var(--rc-shadow-1);
}
.ig__cell img {
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.ig__cell:hover img {
  transform: scale(1.08);
}
.ig__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(44, 8, 76, 0);
  transition: background var(--rc-dur-2) var(--rc-ease);
}
.ig__cell:hover::after {
  background: rgba(44, 8, 76, 0.32);
}
.ig {
  /* Reel/vídeo: play centralizado, semi-transparente, com sombra p/ ler em qualquer foto */
}
.ig__cell--video::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.82;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-6);
  padding: var(--rc-space-1) var(--rc-space-1) var(--rc-space-1) var(--rc-space-3);
  background: var(--rc-purple);
  color: var(--rc-paper);
  border-radius: var(--rc-radius-pill);
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  transition: transform var(--rc-dur-2) var(--rc-ease), box-shadow var(--rc-dur-2) var(--rc-ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--rc-shadow-2);
}
.btn:active {
  transform: scale(0.98);
}
.btn__ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rc-green);
  color: var(--rc-ink);
  transition: transform var(--rc-dur-2) var(--rc-ease);
}
.btn:hover .btn__ico {
  transform: translate(3px, -1px) scale(1.05);
}

/* ── RODAPÉ ────────────────────────────────────────────────────────────────*/
.footer {
  position: relative;
  z-index: var(--rc-z-content);
  background: var(--rc-purple);
  color: var(--rc-paper);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
  padding-block: var(--rc-space-2);
}
.footer img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.footer__note {
  font-size: var(--rc-text-sm);
  color: rgba(244, 246, 250, 0.72);
}

/* ============================================================================
   PÁGINAS-TEMPLATE — Grupo Especial · Série Ouro · Mais notícias.
   Masthead roxo com foto sorteada (no lugar do vídeo) + container branco na
   largura do conteúdo, cortado do roxo por uma linha colorida que some para os
   lados. No mobile o branco ocupa a tela toda e a linha fica cheia.
   ========================================================================= */
/* Foto de fundo (páginas-template) — mesmo tratamento de fade do vídeo da home */
.backdrop__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--rc-video-opacity);
  -webkit-mask-image: var(--rc-veil-mask);
  mask-image: var(--rc-veil-mask);
}

/* Masthead mais curto que a home: o roxo dissolve mais cedo nas laterais */
.tpl-page {
  --rc-backdrop-h:clamp(420px, 48vw, 640px);
}

/* Container branco: mesma largura do conteúdo (logo → contato), cantos retos,
   emerge do masthead roxo e funde com o branco conforme o gradiente acaba. */
.tpl {
  /* Largura idêntica ao miolo do .shell (min(viewport,maxw) menos os gutters) */
  --tpl-w: calc(min(100%, var(--rc-maxw)) - 2 * var(--rc-gutter));
  position: relative;
  z-index: var(--rc-z-content);
  width: var(--tpl-w);
  margin: 0 auto;
  background: var(--rc-bg);
  /* Altura mínima = tela − (faixa + header) − footer.
     --rc-header-h e --rc-footer-h mudam por breakpoint (header desktop→mobile: 124→64;
     footer desktop→mobile: 136→184, pois vira coluna).
     dvh corrige a barra do navegador no mobile (vh fica de fallback). */
  min-height: calc(100vh - var(--rc-flag-h) - var(--rc-header-h) - var(--rc-footer-h));
  min-height: calc(100dvh - var(--rc-flag-h) - var(--rc-header-h) - var(--rc-footer-h));
  padding: var(--rc-space-6) var(--rc-space-6) var(--rc-space-16);
  /* Corte colorido no topo do branco (efeito da faixa do site): cheio na largura
     do branco; some para os lados até zerar no meio do caminho até a borda. */
}
.tpl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 18px);
  height: 2px;
  background: linear-gradient(90deg, var(--rc-flag-1), var(--rc-flag-2), var(--rc-flag-3), var(--rc-flag-4), var(--rc-flag-1));
  background-size: 200% 100%;
  animation: flagFlow 14s linear infinite;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc((100% - var(--tpl-w)) / 4), #000 calc((100% - var(--tpl-w)) / 2), #000 calc((100% + var(--tpl-w)) / 2), transparent calc(100% - (100% - var(--tpl-w)) / 4), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, transparent calc((100% - var(--tpl-w)) / 4), #000 calc((100% - var(--tpl-w)) / 2), #000 calc((100% + var(--tpl-w)) / 2), transparent calc(100% - (100% - var(--tpl-w)) / 4), transparent 100%);
}
.tpl {
  /* Masthead da seção: título à esquerda, contagem do acervo à direita —
     leem juntos como cabeçalho de índice de revista. */
}
.tpl__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rc-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--rc-space-6);
}
.tpl__count {
  flex: none;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  color: var(--rc-text-3);
}
.tpl__title {
  display: flex;
  align-items: center;
  gap: var(--rc-space-3);
  font-size: clamp(var(--rc-text-2xl), 4.5vw, var(--rc-text-3xl));
  line-height: 1.05;
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
}
.tpl {
  /* Título de duas palavras: cada uma em um tom de roxo */
}
.tpl__w1 {
  color: var(--rc-purple);
}
.tpl__w2 {
  color: var(--rc-purple-light);
}
.tpl {
  /* Ícone de linha (Heroicons) ao lado do título — tamanho nativo 24×24 (crispa),
     tom mais claro que o texto (roxo-claro da marca). */
}
.tpl__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--rc-purple-light);
}
.tpl__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Mobile: o branco toma a tela toda; o corte fica 100% (sem fade lateral) */
@media (max-width: 700px) {
  .tpl {
    --tpl-w:100%;
    width: 100%;
    padding-inline: var(--rc-gutter);
    padding-block: var(--rc-space-4) var(--rc-space-12); /* topo enxuto no mobile */
    margin: 0 auto 0;
    /* Altura sem respiro do topo (margin já é 0, footer em coluna é 184px) */
    min-height: calc(100vh - var(--rc-flag-h) - var(--rc-header-h) - var(--rc-footer-h));
    min-height: calc(100dvh - var(--rc-flag-h) - var(--rc-header-h) - var(--rc-footer-h));
  }
}
/* ── MATÉRIAS COM PAGINAÇÃO ────────────────────────────────────────────────
   Editorial, anti-card: a foto assenta limpa (sem sombra em repouso). O único
   acento é o hover — leve alta + glow multicolor discreto + zoom da imagem. */
.materia__link {
  display: block;
  color: inherit;
}
.materia__link:focus-visible {
  outline: 2px solid var(--rc-green);
  outline-offset: 4px;
  border-radius: var(--rc-radius-sm);
}
.materia__foto {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  margin-bottom: var(--rc-space-3);
  transition: transform var(--rc-dur-3) var(--rc-ease), box-shadow var(--rc-dur-3) var(--rc-ease);
}
.materia__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.materia__link:hover .materia__foto {
  transform: translateY(-4px);
  box-shadow: 0 -8px 16px 2px rgba(247, 148, 29, 0.12), 8px 0 16px 2px rgba(221, 23, 165, 0.12), 0 8px 16px 2px rgba(245, 197, 24, 0.12), -8px 0 16px 2px rgba(141, 198, 63, 0.12), var(--rc-shadow-2);
}
.materia__link:hover .materia__foto img {
  transform: scale(1.06);
}
.materia {
  /* Meta-linha: data + autor com ícones, tom quieto (é metadado, não manchete) */
}
.materia__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-1) var(--rc-space-3);
  margin-bottom: var(--rc-space-2);
  font-size: var(--rc-text-xs);
  line-height: 1;
  color: var(--rc-text-3);
}
.materia__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.materia__meta-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--rc-purple-light);
  /* 16×16 nativo (1:1 com o viewBox) — não redimensionar, senão serrilha */
}
.materia__meta-ico svg {
  width: 16px;
  height: 16px;
  display: block;
}
.materia__titulo {
  font-size: var(--rc-text-lg);
  line-height: var(--rc-lh-lg);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
  transition: color var(--rc-dur-2) var(--rc-ease);
}
.materia {
  /* Afeto do hover no título só nas matérias do grid (a destaque é branca sobre foto) */
}
.materia:not(.materia--destaque) .materia__link:hover .materia__titulo {
  color: var(--rc-purple);
}
.materia__resumo {
  margin-top: var(--rc-space-2);
  font-size: var(--rc-text-sm);
  line-height: var(--rc-lh-sm);
  color: var(--rc-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.materia--destaque {
  margin-bottom: var(--rc-space-8);
}
.materia--destaque .materia__foto {
  aspect-ratio: 16/9;
  margin-bottom: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.materia--destaque {
  /* Bloco de texto sobre a foto: meta acima, título abaixo, ambos no mesmo scrim */
}
.materia--destaque .materia__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--rc-space-8) var(--rc-space-4) var(--rc-space-4);
  background: linear-gradient(180deg, transparent 0%, rgb(var(--rc-purple-deepest)/0.55) 42%, rgb(var(--rc-purple-deepest)/0.92) 100%);
}
.materia--destaque .materia__meta {
  margin-bottom: var(--rc-space-2);
  color: rgba(244, 246, 250, 0.82);
}
.materia--destaque .materia__meta-ico {
  color: var(--rc-paper);
}
.materia--destaque .materia__titulo {
  font-size: clamp(var(--rc-text-xl), 3vw, var(--rc-text-2xl));
  line-height: 1.15;
  font-weight: var(--rc-fw-bold);
  color: var(--rc-paper);
}

.materias-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rc-space-10) var(--rc-space-5); /* linha 80 · coluna 40 — respiro vertical de revista */
  margin-bottom: var(--rc-space-8);
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-space-5);
  padding-top: var(--rc-space-5);
  border-top: 1px solid var(--rc-line);
}

.paginacao__btn {
  padding: 10px 18px;
  border-radius: var(--rc-radius-pill);
  border: 1px solid var(--rc-line);
  color: var(--rc-purple);
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  transition: border-color var(--rc-dur-2) var(--rc-ease), background var(--rc-dur-2) var(--rc-ease), color var(--rc-dur-2) var(--rc-ease);
}
.paginacao__btn:hover {
  border-color: var(--rc-purple);
  background: var(--rc-purple);
  color: var(--rc-paper);
}

.paginacao__info {
  font-size: var(--rc-text-xs);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  color: var(--rc-text-3);
}

/* ── PÁGINA DE MATÉRIA (single) ────────────────────────────────────────────*/
.artigo {
  /* Largura cheia do .tpl (igual à página de categoria) — o texto não centraliza.
     Só as mídias se limitam a esta coluna, centralizadas. */
  --artigo-media:760px;
}
.artigo__cat {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--rc-radius-pill);
  background: var(--rc-purple-light);
  color: var(--rc-paper);
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-medium);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  transition: background var(--rc-dur-2) var(--rc-ease);
}
.artigo__cat:hover {
  background: var(--rc-purple);
}
.artigo {
  /* Mesmo tamanho do título da seção (.tpl__title) — um só nível de h1 no site */
}
.artigo__titulo {
  margin-top: var(--rc-space-4);
  font-size: clamp(var(--rc-text-2xl), 4.5vw, var(--rc-text-3xl));
  line-height: 1.1;
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-text);
}
.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rc-space-1) var(--rc-space-4);
  margin-top: var(--rc-space-3);
  font-size: var(--rc-text-sm);
  color: var(--rc-text-3);
}
.artigo__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.artigo__meta-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--rc-purple-light);
}
.artigo__meta-ico svg {
  width: 16px;
  height: 16px;
  display: block;
}
.artigo__meta-ico { /* 16 nativo — não redimensionar */ }
.artigo__hero {
  margin: var(--rc-space-5) auto 0;
  max-width: var(--artigo-media);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  aspect-ratio: 16/11;
}
.artigo__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.artigo__vazio {
  padding-block: var(--rc-space-10);
  text-align: center;
  color: var(--rc-text-2);
}

/* Conteúdo rico do WP — normaliza o que vier (p, h2/h3, img, figure, iframe/YouTube,
   listas, citações, tabelas). Escopado: nada disso vaza para o resto do site. */
.materia-conteudo {
  margin-top: var(--rc-space-6);
  font-size: var(--rc-text-lg);
  line-height: 1.75;
  color: var(--rc-text);
  overflow-wrap: break-word; /* URLs longas não estouram a coluna */
}
.materia-conteudo > * + * {
  margin-top: var(--rc-space-4);
}
.materia-conteudo { /* ritmo vertical uniforme */ }
.materia-conteudo > * + h2 {
  margin-top: var(--rc-space-7);
}
.materia-conteudo > * + h3 {
  margin-top: var(--rc-space-6);
}
.materia-conteudo {
  /* Texto ocupa a largura cheia (mesma da página de categoria) */
}
.materia-conteudo a {
  color: var(--rc-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.materia-conteudo a:hover {
  color: var(--rc-purple-light);
}
.materia-conteudo strong, .materia-conteudo b {
  font-weight: var(--rc-fw-bold);
}
.materia-conteudo h2, .materia-conteudo h3 {
  color: var(--rc-purple);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  line-height: 1.2;
}
.materia-conteudo h2 {
  font-size: var(--rc-text-2xl);
}
.materia-conteudo h3 {
  font-size: var(--rc-text-xl);
}
.materia-conteudo ul, .materia-conteudo ol {
  padding-left: 1.4em;
}
.materia-conteudo li {
  margin-top: var(--rc-space-1);
}
.materia-conteudo ul li {
  list-style: disc;
}
.materia-conteudo ol li {
  list-style: decimal;
}
.materia-conteudo {
  /* Citação: regras em cima/baixo, nunca side-stripe */
}
.materia-conteudo blockquote {
  margin-inline: 0;
  padding: var(--rc-space-4) 0;
  border-top: 1px solid var(--rc-line);
  border-bottom: 1px solid var(--rc-line);
  font-size: var(--rc-text-xl);
  line-height: 1.4;
  font-style: italic;
  color: var(--rc-text-2);
}
.materia-conteudo {
  /* Mídias: centralizadas e limitadas à coluna (o texto é full-width) */
}
.materia-conteudo img, .materia-conteudo video {
  max-width: var(--artigo-media, 760px);
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--rc-radius-sm);
}
.materia-conteudo figure {
  margin-inline: auto;
  max-width: var(--artigo-media, 760px);
}
.materia-conteudo figure img, .materia-conteudo figure video {
  width: 100%;
  max-width: 100%;
}
.materia-conteudo figcaption {
  margin-top: var(--rc-space-2);
  font-size: var(--rc-text-sm);
  color: var(--rc-text-3);
  text-align: center;
}
.materia-conteudo {
  /* YouTube e qualquer iframe: 16:9 responsivo, centralizado na coluna, sem overflow */
}
.materia-conteudo iframe {
  width: 100%;
  max-width: var(--artigo-media, 760px);
  aspect-ratio: 16/9;
  height: auto;
  margin-inline: auto;
  border: 0;
  border-radius: var(--rc-radius-sm);
  display: block;
}
.materia-conteudo .wp-block-embed, .materia-conteudo .wp-block-image {
  margin-inline: auto;
  max-width: var(--artigo-media, 760px);
}
.materia-conteudo .wp-block-embed__wrapper {
  position: relative;
}
.materia-conteudo table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rc-text-sm);
  display: block;
  overflow-x: auto;
}
.materia-conteudo th, .materia-conteudo td {
  padding: var(--rc-space-2);
  border-bottom: 1px solid var(--rc-line);
  text-align: left;
}
.materia-conteudo th {
  font-weight: var(--rc-fw-bold);
}
.materia-conteudo pre {
  overflow-x: auto;
  padding: var(--rc-space-3);
  background: var(--rc-bg-alt);
  border-radius: var(--rc-radius-sm);
  font-size: var(--rc-text-sm);
}
.materia-conteudo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 700px) {
  .materias-grid {
    grid-template-columns: 1fr;
    gap: var(--rc-space-8);
  }
  .paginacao {
    flex-direction: column;
    gap: var(--rc-space-2);
  }
  /* Matéria no mobile: pill e título menores, ritmo comprimido, texto sobe pra dobra */
  .artigo__cat {
    padding: 4px 11px;
    font-size: 11px;
  }
  .artigo__titulo {
    font-size: clamp(var(--rc-text-xl), 6.5vw, var(--rc-text-2xl));
    margin-top: var(--rc-space-3);
  }
  .artigo__meta {
    margin-top: var(--rc-space-2);
  }
  .artigo__hero {
    margin-top: var(--rc-space-4);
  }
  .materia-conteudo {
    margin-top: var(--rc-space-4);
    font-size: var(--rc-text-base);
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tpl::before {
    animation: none;
  }
}
/* ============================================================================
   FOTOS — lista de álbuns, grade do álbum e lightbox.
   ========================================================================= */
/* ── LISTA DE ÁLBUNS (fotos.php) — 4 col desktop / 1 col mobile ─────────────*/
.albuns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rc-space-6) var(--rc-space-5);
  margin-bottom: var(--rc-space-8);
}

.album-card {
  display: block;
  color: inherit;
}
.album-card__foto {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  margin-bottom: var(--rc-space-3);
  transition: transform var(--rc-dur-3) var(--rc-ease), box-shadow var(--rc-dur-3) var(--rc-ease);
}
.album-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.album-card:hover .album-card__foto {
  transform: translateY(-4px);
  box-shadow: 0 -8px 16px 2px rgba(247, 148, 29, 0.12), 8px 0 16px 2px rgba(221, 23, 165, 0.12), 0 8px 16px 2px rgba(245, 197, 24, 0.12), -8px 0 16px 2px rgba(141, 198, 63, 0.12), var(--rc-shadow-2);
}
.album-card:hover .album-card__foto img {
  transform: scale(1.06);
}
.album-card__count {
  position: absolute;
  top: var(--rc-space-2);
  right: var(--rc-space-2);
  padding: 5px 10px;
  border-radius: var(--rc-radius-pill);
  background: rgba(0, 0, 0, 0.5);
  font-size: var(--rc-text-xs);
  line-height: 1;
  font-weight: var(--rc-fw-medium);
  color: var(--rc-paper);
}
.album-card__titulo {
  font-size: var(--rc-text-base);
  line-height: var(--rc-lh-base);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text);
  transition: color var(--rc-dur-2) var(--rc-ease);
}
.album-card:hover .album-card__titulo {
  color: var(--rc-purple);
}
.album-card:focus-visible {
  outline: 2px solid var(--rc-green);
  outline-offset: 4px;
  border-radius: var(--rc-radius-sm);
}

/* ── CABEÇALHO DO ÁLBUM (album.php) ────────────────────────────────────────*/
.album-head {
  margin-bottom: var(--rc-space-6);
}

.album-voltar {
  display: inline-flex;
  align-items: center;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text-2);
  transition: color var(--rc-dur-2) var(--rc-ease);
}
.album-voltar:hover {
  color: var(--rc-purple);
}

.album-head__titulo {
  margin-top: var(--rc-space-3);
  font-size: clamp(var(--rc-text-2xl), 4.5vw, var(--rc-text-3xl));
  line-height: 1.1;
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-text);
}

.album-head__count {
  margin-top: var(--rc-space-1);
  font-size: var(--rc-text-xs);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  color: var(--rc-text-3);
}

/* ── GRADE DE FOTOS DO ÁLBUM — 6 por linha no desktop ──────────────────────*/
.album-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--rc-space-2);
  margin-bottom: var(--rc-space-8);
}

.album-foto {
  display: block;
  aspect-ratio: 1/1;
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--rc-bg-alt);
}
.album-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--rc-dur-3) var(--rc-ease);
}
.album-foto:hover img {
  transform: scale(1.08);
}
.album-foto:focus-visible {
  outline: 2px solid var(--rc-green);
  outline-offset: 2px;
}

/* ── LIGHTBOX — 900px no desktop, setas; no mobile, gesto ───────────────────*/
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--rc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-5);
  background: rgb(var(--rc-purple-deepest)/0.93);
  opacity: 0;
  transition: opacity var(--rc-dur-3) var(--rc-ease);
}
.lightbox.is-open {
  opacity: 1;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__stage {
  margin: 0;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: min(900px, 100%);
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--rc-radius-sm);
  display: block;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.lightbox__close {
  position: absolute;
  top: var(--rc-space-4);
  right: var(--rc-space-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  color: var(--rc-paper);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--rc-dur-2) var(--rc-ease);
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  color: var(--rc-paper);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--rc-dur-2) var(--rc-ease);
}
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox__nav--prev {
  left: var(--rc-space-4);
}
.lightbox__nav--next {
  right: var(--rc-space-4);
}
.lightbox__counter {
  position: absolute;
  bottom: var(--rc-space-4);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--rc-text-sm);
  letter-spacing: var(--rc-tracking-wide);
  color: rgba(244, 246, 250, 0.8);
}

@media (max-width: 1024px) {
  .albuns-grid {
    grid-template-columns: 1fr 1fr;
  }
  .album-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 700px) {
  .albuns-grid {
    grid-template-columns: 1fr;
  }
  .album-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lightbox {
    padding: var(--rc-space-2);
  }
  .lightbox__nav {
    display: none;
  } /* mobile navega por gesto (swipe) */
  .lightbox__img {
    max-width: 100%;
    max-height: 80vh;
  }
}
/* ============================================================================
   O CARNAVAL — página-hub do Grupo Especial 2027.
   Régua editorial da Revista: filete, numeral e respiro separam o conteúdo.
   Caixa só onde a elevação é funcional — o diagrama da avenida, o fato da
   campeã e a ficha em modal. Um acento (verde) e ele é ação, nunca enfeite.
   ========================================================================= */
/* O reveal (.rv) é o do _base.scss — guardado por .js e já tratado no
   prefers-reduced-motion. Aqui só a atmosfera do topo, que respira mais:
   esta é a capa do hub, não uma página de listagem. */
.tpl-carnaval {
  --rc-backdrop-h: clamp(520px, 58vw, 780px);
}

/* ── ABERTURA ────────────────────────────────────────────────────────────────
   Um lead e um índice numerado. Sem pílula de gradiente: o avanço é o índice. */
.carn-abre {
  /* Sem filete de fechamento: o bloco de números já entra com o dele no topo.
     Duas réguas paralelas separadas por respiro de seção leem como erro. */
  padding-block: var(--rc-space-4) 0;
  margin-bottom: var(--rc-space-8);
  /* z-index:0 cria o contexto de empilhamento que segura o fundo (z-index:-1)
     atrás do texto sem ele afundar no branco do cartão. O texto fica intacto. */
  position: relative;
  z-index: 0;
  /* Fundo decorativo: arte de Carnaval (fita quente já fundida no branco no
     próprio JPG) sorteada no PHP, sangrando pro topo-direito. Some no mobile. */
}
.carn-abre__fundo {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--rc-space-6) + 2px); /* cola no topo do cartão, menos 2px: preserva a faixa colorida */
  right: calc(-1 * var(--rc-space-6)); /* cancela o padding lateral do .tpl → cola na borda direita */
  width: min(54%, 620px);
  height: clamp(440px, 46vw, 620px);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  pointer-events: none;
}
@media (max-width: 900px) {
  .carn-abre__fundo {
    display: none;
  }
}
.carn-abre__data {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-purple-light);
  margin-bottom: var(--rc-space-3);
}
.carn-abre__titulo {
  font-size: clamp(var(--rc-text-3xl), 8vw, 92px);
  font-weight: var(--rc-fw-bold);
  line-height: 0.95;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-purple);
  margin: 0 0 var(--rc-space-4);
  /* O ano é o segundo tempo do título: mesma altura, peso menor, tom claro */
}
.carn-abre__titulo em {
  display: block;
  font-style: normal;
  font-weight: var(--rc-fw-regular);
  color: var(--rc-purple-light);
}
.carn-abre__lead {
  font-size: var(--rc-text-lg);
  line-height: 1.6;
  color: var(--rc-text-2);
  max-width: 62ch;
  margin: 0;
}

/* Índice numerado — a navegação da página, em régua editorial */
.carn-indice {
  list-style: none;
  margin: var(--rc-space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--rc-space-4);
}
@media (max-width: 900px) {
  .carn-indice {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .carn-indice {
    grid-template-columns: 1fr;
  }
}
.carn-indice li {
  border-top: solid 1px var(--rc-line);
  transition: border-color var(--rc-dur-1) var(--rc-ease);
}
.carn-indice {
  /* bordas suaves (tons 100) — número mantém a cor vibrante */
}
.carn-indice li:nth-child(1) {
  border-top-color: var(--rc-orange-100);
}
.carn-indice li:nth-child(2) {
  border-top-color: var(--rc-magenta-100);
}
.carn-indice li:nth-child(3) {
  border-top-color: var(--rc-yellow-100);
}
.carn-indice li:nth-child(4) {
  border-top-color: var(--rc-green-100);
}
.carn-indice li:nth-child(5) {
  border-top-color: var(--rc-cyan-100);
}
.carn-indice li:nth-child(6) {
  border-top-color: var(--rc-indigo-100);
}
.carn-indice li:nth-child(7) {
  border-top-color: var(--rc-violet-100);
}
.carn-indice li:nth-child(8) {
  border-top-color: var(--rc-orange-100);
}
.carn-indice li:nth-child(9) {
  border-top-color: var(--rc-magenta-100);
}
.carn-indice li:nth-child(10) {
  border-top-color: var(--rc-green-100);
}
.carn-indice a {
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-1);
  padding: var(--rc-space-2) 0;
  text-decoration: none;
  color: var(--rc-text);
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  transition: color var(--rc-dur-1) var(--rc-ease);
}
.carn-indice a:hover {
  color: var(--rc-purple);
}
.carn-indice a:hover .carn-indice__n {
  color: var(--rc-green);
}
.carn-indice__n {
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--rc-dur-1) var(--rc-ease);
  /* 10 cores com contraste WCAG AA mínimo (4.5:1) contra fundo branco */
}
li:nth-child(1) .carn-indice__n {
  color: var(--rc-orange-800);
}
.carn-indice__n { /* 6.58 AA ✓ */ }
li:nth-child(2) .carn-indice__n {
  color: var(--rc-magenta-600);
}
.carn-indice__n { /* 5.42 AA ✓ */ }
li:nth-child(3) .carn-indice__n {
  color: var(--rc-yellow-900);
}
.carn-indice__n { /* 4.27 → 4.8+ AA */ }
li:nth-child(4) .carn-indice__n {
  color: var(--rc-green-800);
}
.carn-indice__n { /* 4.17 → 4.9+ AA */ }
li:nth-child(5) .carn-indice__n {
  color: var(--rc-cyan-800);
}
.carn-indice__n { /* 9.32 AAA ✓ */ }
li:nth-child(6) .carn-indice__n {
  color: var(--rc-indigo-600);
}
.carn-indice__n { /* 8.39 AAA ✓ */ }
li:nth-child(7) .carn-indice__n {
  color: var(--rc-violet-600);
}
.carn-indice__n { /* 6.62 AA ✓ */ }
li:nth-child(8) .carn-indice__n {
  color: var(--rc-orange-800);
}
.carn-indice__n { /* 6.58 AA ✓ */ }
li:nth-child(9) .carn-indice__n {
  color: var(--rc-magenta-700);
}
.carn-indice__n { /* 7.59 AAA ✓ */ }
li:nth-child(10) .carn-indice__n {
  color: var(--rc-green-800);
}
.carn-indice__n { /* 4.17 → 4.9+ AA */ }

/* ── SEÇÃO — cabeçalho comum ─────────────────────────────────────────────── */
.carn-sec {
  margin-bottom: var(--rc-section-y);
}
.carn-sec__cab {
  margin-bottom: var(--rc-space-6);
  max-width: 74ch;
}
.carn-sec__n {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-pink);
  margin-bottom: var(--rc-space-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--rc-dur-1) var(--rc-ease);
  /* 10 cores com contraste WCAG AA mínimo — correspondência com índice */
}
[data-section="1"] .carn-sec__n {
  color: var(--rc-orange-800);
}
[data-section="2"] .carn-sec__n {
  color: var(--rc-magenta-600);
}
[data-section="3"] .carn-sec__n {
  color: var(--rc-yellow-900);
}
[data-section="4"] .carn-sec__n {
  color: var(--rc-green-800);
}
[data-section="5"] .carn-sec__n {
  color: var(--rc-cyan-800);
}
[data-section="6"] .carn-sec__n {
  color: var(--rc-indigo-600);
}
[data-section="7"] .carn-sec__n {
  color: var(--rc-violet-600);
}
[data-section="8"] .carn-sec__n {
  color: var(--rc-orange-800);
}
[data-section="9"] .carn-sec__n {
  color: var(--rc-magenta-700);
}
[data-section="10"] .carn-sec__n {
  color: var(--rc-green-800);
}
.carn-sec__n {
  /* filete curto depois do número — usa currentColor (a cor do número) */
}
.carn-sec__n::after {
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.3;
}
.carn-sec__titulo {
  font-size: clamp(var(--rc-text-2xl), 4.5vw, var(--rc-text-3xl));
  font-weight: var(--rc-fw-bold);
  line-height: 1.1;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-2);
}
.carn-sec__intro {
  font-size: var(--rc-text-base);
  line-height: 1.7;
  color: var(--rc-text-2);
  margin: 0;
}

/* Nota de rodapé de seção — o detalhe que qualifica, em itálico discreto */
.carn-nota {
  font-size: var(--rc-text-sm);
  line-height: 1.6;
  color: var(--rc-text-3);
  font-style: italic;
  margin: var(--rc-space-4) 0 0;
  max-width: 78ch;
}

/* ── NÚMEROS ─────────────────────────────────────────────────────────────────
   Faixa de dados sem caixa: filete em cima e régua vertical entre as colunas. */
.carn-numeros {
  list-style: none;
  margin: 0 0 var(--rc-section-y);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: solid 1px var(--rc-line);
}
@media (max-width: 760px) {
  .carn-numeros {
    grid-template-columns: repeat(2, 1fr);
  }
}
.carn-numeros li {
  padding: var(--rc-space-4) var(--rc-space-3) 0 0;
}
.carn-numeros li + li {
  border-left: solid 1px var(--rc-line);
  padding-left: var(--rc-space-3);
}
@media (max-width: 760px) {
  .carn-numeros li {
    padding-bottom: var(--rc-space-3);
  }
  .carn-numeros li:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }
  .carn-numeros li:nth-child(n+3) {
    border-top: solid 1px var(--rc-line);
  }
}
.carn-numeros strong {
  display: block;
  font-size: clamp(var(--rc-text-2xl), 4.5vw, 52px);
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-purple);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--rc-space-1);
}
.carn-numeros span {
  display: block;
  font-size: var(--rc-text-sm);
  line-height: 1.4;
  color: var(--rc-text-2);
  max-width: 22ch;
}

/* ── AS 12 ESCOLAS ───────────────────────────────────────────────────────────
   Grade regrada: cada escola pendurada num filete. A bandeira carrega a cor. */
.carn-escolas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rc-space-5) var(--rc-space-4);
}
@media (max-width: 1040px) {
  .carn-escolas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .carn-escolas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rc-space-4) var(--rc-space-3);
  }
}
@media (max-width: 420px) {
  .carn-escolas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.carn-escola {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--rc-space-2);
  padding: var(--rc-space-2);
  border: solid 1px var(--rc-line);
  border-radius: var(--rc-radius-sm);
  background: var(--rc-bg-alt);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--rc-dur-2) var(--rc-ease), box-shadow var(--rc-dur-2) var(--rc-ease), border-color var(--rc-dur-2) var(--rc-ease);
}
.carn-escola:hover {
  transform: translateY(-3px);
  border-color: var(--rc-purple-light);
  box-shadow: var(--rc-shadow-1);
}
.carn-escola:focus-visible {
  outline: solid 2px var(--rc-green);
  outline-offset: 2px;
}
.carn-escola__flag {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-bg);
}
.carn-escola__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--rc-dur-3) var(--rc-ease);
}
.carn-escola:hover .carn-escola__flag img {
  transform: scale(1.05);
}
.carn-escola__nome {
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-text);
  transition: color var(--rc-dur-1) var(--rc-ease);
}
.carn-escola:hover .carn-escola__nome {
  color: var(--rc-purple);
}
.carn-escola__meta {
  font-size: var(--rc-text-xs);
  line-height: 1.4;
  color: var(--rc-text-3);
  margin-top: calc(var(--rc-space-1) * -1);
}
.carn-escola__enredo {
  font-size: var(--rc-text-sm);
  line-height: 1.45;
  color: var(--rc-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carn-escola__ver {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-0h);
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-text-3);
  transition: color var(--rc-dur-1) var(--rc-ease);
}
.carn-escola__ver svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--rc-dur-2) var(--rc-ease);
}
.carn-escola:hover .carn-escola__ver {
  color: var(--rc-green);
}
.carn-escola:hover .carn-escola__ver svg {
  transform: translateX(3px);
}

/* Pastilhas das cores oficiais — dado real da escola, não decoração */
.carn-cores {
  display: flex;
  gap: var(--rc-space-0h);
}

.carn-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(19, 26, 39, 0.16);
}

/* ── CHAMADA SÉRIE OURO ───────────────────────────────────────────────────────
   Box claro (mesmo idioma dos cards das 12 escolas: bg-alt + filete + 12px),
   sem inverter pra roxo — chamada discreta, não faixa de destaque. Clicar
   expande as 17 bandeiras dentro do box; grid-template-rows 0fr→1fr anima a
   altura sem número mágico de max-height. */
.carn-ouro {
  margin-bottom: var(--rc-section-y);
  background: var(--rc-bg-alt);
  border: solid 1px var(--rc-line);
  color: var(--rc-text);
  border-radius: var(--rc-radius-sm);
  padding: var(--rc-space-4) var(--rc-space-5);
}
@media (max-width: 600px) {
  .carn-ouro {
    padding: var(--rc-space-3) var(--rc-space-3);
  }
}
.carn-ouro__chamada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-4);
}
@media (max-width: 700px) {
  .carn-ouro__chamada {
    flex-direction: column;
    align-items: flex-start;
  }
}
.carn-ouro__kicker {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-pink);
  margin-bottom: var(--rc-space-1);
}
.carn-ouro__titulo {
  font-size: clamp(var(--rc-text-xl), 3.2vw, var(--rc-text-2xl));
  font-weight: var(--rc-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-1);
}
.carn-ouro__sub {
  font-size: var(--rc-text-sm);
  line-height: 1.5;
  color: var(--rc-text-2);
  margin: 0;
  max-width: 54ch;
}
.carn-ouro__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  padding: var(--rc-space-1) var(--rc-space-3);
  border: solid 1px var(--rc-line);
  border-radius: var(--rc-radius-pill);
  background: var(--rc-bg);
  color: var(--rc-purple);
  font: inherit;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-bold);
  cursor: pointer;
  transition: border-color var(--rc-dur-1) var(--rc-ease), color var(--rc-dur-1) var(--rc-ease);
}
.carn-ouro__btn svg {
  width: 16px;
  height: 16px;
  transition: transform var(--rc-dur-2) var(--rc-ease);
}
.carn-ouro__btn:hover {
  border-color: var(--rc-purple-light);
}
.carn-ouro__btn:focus-visible {
  outline: solid 2px var(--rc-green);
  outline-offset: 2px;
}
.carn-ouro__btn[aria-expanded=true] svg {
  transform: rotate(180deg);
}
.carn-ouro {
  /* expansão: linha de grid 0fr→1fr. O filho com overflow:hidden clipa. */
}
.carn-ouro__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--rc-dur-3) var(--rc-ease);
}
.carn-ouro__reveal.is-open {
  grid-template-rows: 1fr;
}
.carn-ouro__reveal-inner {
  overflow: hidden;
}
.carn-ouro__grade {
  list-style: none;
  margin: 0;
  padding: var(--rc-space-5) 0 var(--rc-space-1);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--rc-space-4) var(--rc-space-3);
}
@media (max-width: 1040px) {
  .carn-ouro__grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .carn-ouro__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .carn-ouro__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rc-space-3) var(--rc-space-2);
  }
}

.carn-ouro-item {
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-1);
  text-align: center;
}
.carn-ouro-item__flag {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-bg);
  border: solid 1px var(--rc-line);
}
.carn-ouro-item__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carn-ouro-item__nome {
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-medium);
  line-height: 1.3;
  color: var(--rc-text-2);
}

@media (prefers-reduced-motion: reduce) {
  .carn-ouro__reveal {
    transition: none;
  }
  .carn-ouro__btn svg {
    transition: none;
  }
}
/* ── ORDEM DOS DESFILES ──────────────────────────────────────────────────────
   Três noites em três colunas separadas por régua. Sem cartão, sem gradiente. */
.carn-noites {
  display: grid;
  /* minmax(0,…): sem isso o `nowrap` do enredo vira min-content e estoura a coluna */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--rc-space-5);
}
@media (max-width: 900px) {
  .carn-noites {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rc-space-6) 0;
  }
}

/* Versão editorial (colunas separadas por régua) — a preferida do dono aqui.
   O filete do topo ganha uma cor da faixa carnavalesca por noite: laranja,
   magenta, amarelo (mesma ordem da faixa do site). Verde fica fora — é ação. */
@media (min-width: 901px) {
  .carn-noite + .carn-noite {
    border-left: solid 1px var(--rc-line);
    padding-left: var(--rc-space-5);
  }
}
.carn-noite__cab {
  border-top: solid 3px var(--rc-flag-1);
  padding-top: var(--rc-space-2);
  margin-bottom: var(--rc-space-2);
}
.carn-noite:nth-child(2) .carn-noite__cab {
  border-top-color: var(--rc-flag-2);
}
.carn-noite:nth-child(3) .carn-noite__cab {
  border-top-color: var(--rc-flag-3);
}
.carn-noite__dia {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-purple-light);
}
.carn-noite__data {
  display: block;
  font-size: var(--rc-text-xl);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-text);
}
.carn-noite__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.carn-noite__lista li + li {
  border-top: solid 1px var(--rc-line);
}

.carn-linha-escola {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  width: 100%;
  padding: var(--rc-space-2) 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.carn-linha-escola:focus-visible {
  outline: solid 2px var(--rc-green);
  outline-offset: 2px;
}
.carn-linha-escola img {
  width: 44px;
  height: 33px;
  flex: none;
  object-fit: cover;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-bg-alt);
}
.carn-linha-escola__info {
  min-width: 0;
  flex: 1;
}
.carn-linha-escola__nome {
  display: block;
  font-size: var(--rc-text-base);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
  line-height: 1.25;
  transition: color var(--rc-dur-1) var(--rc-ease);
}
.carn-linha-escola__enredo {
  display: block;
  font-size: var(--rc-text-sm);
  color: var(--rc-text-3);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carn-linha-escola:hover .carn-linha-escola__nome {
  color: var(--rc-purple);
}
.carn-linha-escola__seta {
  flex: none;
  color: var(--rc-text-3);
  opacity: 0;
  transition: opacity var(--rc-dur-1) var(--rc-ease), transform var(--rc-dur-2) var(--rc-ease);
}
.carn-linha-escola__seta svg {
  width: 16px;
  height: 16px;
  display: block;
}
.carn-linha-escola:hover .carn-linha-escola__seta {
  opacity: 1;
  transform: translateX(3px);
  color: var(--rc-green);
}

/* ── FINAIS DE SAMBA ─────────────────────────────────────────────────────────
   Calendário: a data manda, em numeral editorial. A largada ganha peso, não cor. */
.carn-finais {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--rc-space-5);
}
@media (max-width: 1040px) {
  .carn-finais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .carn-finais {
    grid-template-columns: minmax(0, 1fr);
  }
}

.carn-final {
  display: flex;
  align-items: center;
  gap: var(--rc-space-2);
  width: 100%;
  padding: var(--rc-space-3) 0;
  border: none;
  border-top: solid 1px var(--rc-line);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.carn-final:focus-visible {
  outline: solid 2px var(--rc-green);
  outline-offset: 2px;
}
.carn-final--largada {
  border-top-color: var(--rc-purple);
}
.carn-final__data {
  flex: none;
  width: 52px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.carn-final__data strong {
  display: block;
  font-size: var(--rc-text-2xl);
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-purple);
}
.carn-final__mes {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-text-3);
}
.carn-final img {
  width: 40px;
  height: 30px;
  flex: none;
  object-fit: cover;
  border-radius: var(--rc-radius-sm);
  background: var(--rc-bg-alt);
}
.carn-final__info {
  min-width: 0;
  flex: 1;
}
.carn-final__nome {
  display: block;
  font-size: var(--rc-text-base);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
  line-height: 1.25;
  transition: color var(--rc-dur-1) var(--rc-ease);
}
.carn-final:hover .carn-final__nome {
  color: var(--rc-purple);
}
.carn-final__dow {
  display: block;
  font-size: var(--rc-text-xs);
  color: var(--rc-text-3);
}
.carn-final--largada .carn-final__dow {
  color: var(--rc-purple-light);
  font-weight: var(--rc-fw-bold);
}

/* Link de saída para a matéria — texto com filete, não botão */
.carn-saiba {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  margin-top: var(--rc-space-4);
  padding-bottom: 2px;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-purple);
  text-decoration: none;
  border-bottom: solid 1px var(--rc-line);
  transition: color var(--rc-dur-1) var(--rc-ease), border-color var(--rc-dur-1) var(--rc-ease);
}
.carn-saiba svg {
  width: 16px;
  height: 16px;
  transition: transform var(--rc-dur-2) var(--rc-ease);
}
.carn-saiba:hover {
  color: var(--rc-green);
  border-bottom-color: var(--rc-green);
}
.carn-saiba:hover svg {
  transform: translateX(3px);
}

/* ── ENSAIO — texto longo + foto editorial ───────────────────────────────── */
.carn-ensaio {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--rc-space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .carn-ensaio {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rc-space-5);
  }
}
.carn-ensaio__texto p {
  font-size: var(--rc-text-base);
  line-height: 1.8;
  color: var(--rc-text-2);
  margin: 0 0 var(--rc-space-3);
}
.carn-ensaio__texto p:last-child {
  margin-bottom: 0;
}
.carn-ensaio {
  /* Primeiro parágrafo puxa o olho: corpo maior e cor de texto cheia */
}
.carn-ensaio__texto p:first-of-type {
  font-size: var(--rc-text-lg);
  line-height: 1.65;
  color: var(--rc-text);
}
.carn-ensaio__foto {
  margin: 0;
}
.carn-ensaio__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rc-radius-sm);
}
.carn-ensaio__foto figcaption {
  font-size: var(--rc-text-sm);
  line-height: 1.5;
  color: var(--rc-text-3);
  font-style: italic;
  margin-top: var(--rc-space-2);
  padding-top: var(--rc-space-2);
  border-top: solid 1px var(--rc-line);
}

/* ── LINHA DO TEMPO — trilho horizontal, ano em numeral editorial ────────── */
.carn-linha {
  display: flex;
  gap: var(--rc-space-5);
  overflow-x: auto;
  padding-bottom: var(--rc-space-3);
  scroll-snap-type: x proximity;
  cursor: grab; /* arrasto lateral com mouse — implementado em js/carnaval.js */
  /* Enquanto arrasta: mãozinha fechada, snap desligado (briga com o arrasto
     livre) e seleção de texto suspensa. Classe alternada pelo JS. */
}
.carn-linha.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.carn-linha {
  /* Trilho fino e discreto — o arrasto é a interação principal, o scrollbar
     fica só como indicador de posição. */
}
.carn-linha::-webkit-scrollbar {
  height: 2px;
}
.carn-linha::-webkit-scrollbar-track {
  background: var(--rc-line);
}
.carn-linha::-webkit-scrollbar-thumb {
  background: var(--rc-purple-light);
}
.carn-linha__item {
  flex: 0 0 min(300px, 72vw);
  scroll-snap-align: start;
  border-top: solid 1px var(--rc-line);
  padding-top: var(--rc-space-2);
}
.carn-linha__ano {
  display: block;
  font-size: var(--rc-text-2xl);
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-purple);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--rc-space-2);
}
.carn-linha__txt {
  font-size: var(--rc-text-sm);
  line-height: 1.65;
  color: var(--rc-text-2);
  margin: 0;
}

/* ── CURIOSIDADES — lista numerada, numeral fantasma como marca-d'água ──── */
.carn-curios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rc-space-5) var(--rc-space-8);
}
@media (max-width: 900px) {
  .carn-curios {
    grid-template-columns: 1fr;
    gap: var(--rc-space-4);
  }
}

.carn-curio {
  position: relative;
  background: var(--rc-bg-alt);
  border: solid 1px var(--rc-line);
  border-radius: var(--rc-radius-sm);
  padding: var(--rc-space-3);
  overflow: hidden;
}
.carn-curio__n {
  position: absolute;
  top: var(--rc-space-1);
  right: var(--rc-space-2);
  font-size: 64px;
  font-weight: var(--rc-fw-bold);
  line-height: 1;
  /* numeral d'água em roxo esmaecido — no box cinza o antigo bg-alt sumia */
  color: rgba(44, 8, 76, 0.08);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.carn-curio__titulo {
  position: relative;
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-fw-bold);
  line-height: 1.25;
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-1);
  padding-right: var(--rc-space-6);
}
.carn-curio__txt {
  position: relative;
  font-size: var(--rc-text-sm);
  line-height: 1.7;
  color: var(--rc-text-2);
  margin: 0;
}

/* ── DIAGRAMA DA AVENIDA ─────────────────────────────────────────────────────
   Aqui a caixa é funcional: é figura, precisa de fundo pra existir. */
.carn-avenida {
  margin-top: var(--rc-space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
  border-radius: var(--rc-radius-sm);
  overflow: hidden;
  background: var(--rc-purple);
  color: #fff;
}
@media (max-width: 760px) {
  .carn-avenida {
    grid-template-columns: minmax(0, 1fr);
  }
}
.carn-avenida__lado {
  padding: var(--rc-space-4) var(--rc-space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--rc-space-0h);
}
.carn-avenida__lado--fim {
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 760px) {
  .carn-avenida__lado--fim {
    text-align: left;
    align-items: flex-start;
  }
}
.carn-avenida__ponto {
  font-size: var(--rc-text-base);
  font-weight: var(--rc-fw-bold);
  line-height: 1.2;
}
.carn-avenida__nota {
  font-size: var(--rc-text-xs);
  color: rgba(255, 255, 255, 0.62);
}
.carn-avenida {
  /* A pista: hachura fina no sentido do desfile, sobre o roxo mais fundo */
}
.carn-avenida__pista {
  position: relative;
  background-color: var(--rc-purple-deep);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 40px);
  padding: var(--rc-space-4) var(--rc-space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rc-space-1);
  text-align: center;
}
.carn-avenida__recuo {
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: #fff;
}
.carn-avenida__sentido {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  font-size: var(--rc-text-sm);
  color: rgba(255, 255, 255, 0.82);
}
.carn-avenida__sentido svg {
  width: 16px;
  height: 16px;
  color: var(--rc-green);
}

/* ── DISPUTA ─────────────────────────────────────────────────────────────── */
.carn-disputa {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--rc-space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .carn-disputa {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rc-space-5);
  }
}
.carn-disputa__texto p {
  font-size: var(--rc-text-base);
  line-height: 1.8;
  color: var(--rc-text-2);
  margin: 0 0 var(--rc-space-4);
}

/* Fato único da seção — a caixa aqui comunica hierarquia, então ela existe */
.carn-campea {
  background: var(--rc-purple);
  color: #fff;
  border-radius: var(--rc-radius-sm);
  padding: var(--rc-space-4);
}
.carn-campea__label {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-green);
  margin-bottom: var(--rc-space-1);
}
.carn-campea__nome {
  display: block;
  font-size: var(--rc-text-xl);
  font-weight: var(--rc-fw-bold);
  line-height: 1.1;
  letter-spacing: var(--rc-tracking-tight);
  margin-bottom: var(--rc-space-1);
}
.carn-campea__txt {
  display: block;
  font-size: var(--rc-text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

.carn-quesitos__titulo {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-text-3);
  padding-bottom: var(--rc-space-2);
  border-bottom: solid 1px var(--rc-line);
}
.carn-quesitos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: quesito;
}
.carn-quesitos li {
  counter-increment: quesito;
  display: flex;
  align-items: baseline;
  gap: var(--rc-space-2);
  padding: var(--rc-space-2) 0;
  border-bottom: solid 1px var(--rc-line);
  font-size: var(--rc-text-base);
  color: var(--rc-text);
}
.carn-quesitos li::before {
  content: counter(quesito, decimal-leading-zero);
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ── COMO CHEGAR / O ANO INTEIRO — duas grades regradas de mesmo idioma ──── */
.carn-lista2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rc-space-5) var(--rc-space-8);
}
@media (max-width: 900px) {
  .carn-lista2 {
    grid-template-columns: 1fr;
    gap: var(--rc-space-4);
  }
}
.carn-lista2__item {
  background: var(--rc-bg-alt);
  border: solid 1px var(--rc-line);
  border-radius: var(--rc-radius-sm);
  padding: var(--rc-space-3);
  /* a barra de cor à esquerda é a marcação; some no editorial, aqui é box */
  border-left: solid 3px var(--rc-pink);
}
.carn-lista2__titulo {
  font-size: var(--rc-text-base);
  font-weight: var(--rc-fw-bold);
  line-height: 1.3;
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-1);
}
.carn-lista2__txt {
  font-size: var(--rc-text-sm);
  line-height: 1.7;
  color: var(--rc-text-2);
  margin: 0;
}

/* ── ANTES DE IR — leve / deixe ──────────────────────────────────────────── */
.carn-mala {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rc-space-6) var(--rc-space-8);
}
@media (max-width: 760px) {
  .carn-mala {
    grid-template-columns: 1fr;
    gap: var(--rc-space-5);
  }
}
.carn-mala__col {
  border-radius: var(--rc-radius-sm);
  border: solid 1px var(--rc-line);
  border-top-width: 3px;
  padding: var(--rc-space-3);
  /* tinta de fundo sutil ligada ao significado: verde = pode, magenta = não */
}
.carn-mala__col--leve {
  background: rgba(155, 209, 80, 0.08);
  border-color: var(--rc-line);
  border-top-color: var(--rc-green);
}
.carn-mala__col--deixe {
  background: rgba(221, 23, 165, 0.06);
  border-color: var(--rc-line);
  border-top-color: var(--rc-pink);
}
.carn-mala__titulo {
  display: flex;
  align-items: center;
  gap: var(--rc-space-1);
  font-size: var(--rc-text-base);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-2);
}
.carn-mala__titulo svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.carn-mala__col--leve .carn-mala__titulo svg {
  color: var(--rc-green);
}
.carn-mala__col--deixe .carn-mala__titulo svg {
  color: var(--rc-pink);
}
.carn-mala ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.carn-mala li {
  font-size: var(--rc-text-sm);
  line-height: 1.6;
  color: var(--rc-text-2);
  padding: var(--rc-space-2) 0;
  border-top: solid 1px var(--rc-line);
}
.carn-mala li:first-child {
  border-top: none;
  padding-top: 0;
}

/* ── SAÍDAS — índice para as outras seções do site ───────────────────────── */
.carn-saidas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: solid 1px var(--rc-line);
}
.carn-saidas a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rc-space-3);
  padding: var(--rc-space-4) 0;
  border-bottom: solid 1px var(--rc-line);
  text-decoration: none;
  color: var(--rc-text);
  transition: color var(--rc-dur-1) var(--rc-ease);
}
@media (max-width: 600px) {
  .carn-saidas a {
    gap: var(--rc-space-2);
  }
}
.carn-saidas a:hover {
  color: var(--rc-purple);
}
.carn-saidas a:hover .carn-saidas__seta {
  opacity: 1;
  transform: translateX(4px);
  color: var(--rc-green);
}
.carn-saidas__ico {
  display: flex;
  color: var(--rc-purple-light);
}
.carn-saidas__ico svg {
  width: 24px;
  height: 24px;
}
.carn-saidas__nome {
  font-size: var(--rc-text-xl);
  font-weight: var(--rc-fw-bold);
  letter-spacing: var(--rc-tracking-tight);
  line-height: 1.2;
}
.carn-saidas__txt {
  display: block;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-regular);
  color: var(--rc-text-3);
  line-height: 1.45;
  margin-top: 2px;
}
.carn-saidas__seta {
  color: var(--rc-text-3);
  opacity: 0;
  transition: opacity var(--rc-dur-1) var(--rc-ease), transform var(--rc-dur-2) var(--rc-ease);
}
.carn-saidas__seta svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (max-width: 600px) {
  .carn-saidas__seta {
    display: none;
  }
}

/* ── FICHA DA ESCOLA (modal) ─────────────────────────────────────────────── */
body.carn-lock {
  overflow: hidden;
}

.carn-ficha {
  position: fixed;
  inset: 0;
  z-index: var(--rc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-space-3);
}
.carn-ficha[hidden] {
  display: none;
}
.carn-ficha__veu {
  position: absolute;
  inset: 0;
  background: rgb(var(--rc-purple-deepest)/0.82);
  opacity: 0;
  transition: opacity var(--rc-dur-2) var(--rc-ease);
}
.carn-ficha.is-open .carn-ficha__veu {
  opacity: 1;
}
.carn-ficha__painel {
  position: relative;
  width: min(100%, 760px);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  background: var(--rc-bg);
  border-radius: var(--rc-radius-sm);
  box-shadow: var(--rc-shadow-3);
  opacity: 0;
  transform: translateY(var(--rc-space-2)) scale(0.985);
  transition: opacity var(--rc-dur-2) var(--rc-ease), transform var(--rc-dur-2) var(--rc-ease);
}
.carn-ficha.is-open .carn-ficha__painel {
  opacity: 1;
  transform: none;
}
.carn-ficha {
  /* Capa: a foto da escola carrega a cor; o roxo só garante leitura do texto */
}
.carn-ficha__capa {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  padding: var(--rc-space-4);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.carn-ficha__capa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--rc-purple-deepest)/0.12) 0%, rgb(var(--rc-purple-deepest)/0.58) 52%, rgb(var(--rc-purple-deepest)/0.9) 100%);
}
.carn-ficha__capa-txt {
  position: relative;
}
.carn-ficha__kicker {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-green);
  margin-bottom: var(--rc-space-1);
}
.carn-ficha__nome {
  font-size: clamp(var(--rc-text-xl), 5vw, var(--rc-text-3xl));
  font-weight: var(--rc-fw-bold);
  line-height: 1.05;
  letter-spacing: var(--rc-tracking-tight);
  margin: 0 0 var(--rc-space-0h);
}
.carn-ficha__full {
  display: block;
  font-size: var(--rc-text-sm);
  color: rgba(255, 255, 255, 0.78);
}
.carn-ficha__bandeira {
  position: absolute;
  top: var(--rc-space-3);
  left: var(--rc-space-4);
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--rc-radius-sm);
  box-shadow: 0 2px 12px rgb(var(--rc-purple-deepest)/0.5);
}
.carn-ficha__fechar {
  position: absolute;
  top: var(--rc-space-3);
  right: var(--rc-space-3);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--rc-glass-line);
  border-radius: 50%;
  background: var(--rc-glass);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background var(--rc-dur-1) var(--rc-ease);
}
.carn-ficha__fechar svg {
  width: 16px;
  height: 16px;
}
.carn-ficha__fechar:hover {
  background: var(--rc-glass-hover);
}
.carn-ficha__fechar:focus-visible {
  outline: solid 2px var(--rc-green);
  outline-offset: 2px;
}
.carn-ficha__corpo {
  padding: var(--rc-space-4);
}
.carn-ficha__blurb {
  font-size: var(--rc-text-lg);
  line-height: 1.6;
  color: var(--rc-text);
  margin: 0 0 var(--rc-space-4);
}
.carn-ficha__fatos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--rc-space-4);
  margin-bottom: var(--rc-space-4);
}
@media (max-width: 520px) {
  .carn-ficha__fatos {
    grid-template-columns: 1fr;
  }
}
.carn-ficha__fato {
  border-top: solid 1px var(--rc-line);
  padding: var(--rc-space-2) 0;
}
.carn-ficha__fato-label {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-text-3);
  margin-bottom: 2px;
}
.carn-ficha__fato-val {
  display: flex;
  align-items: center;
  gap: var(--rc-space-1);
  flex-wrap: wrap;
  font-size: var(--rc-text-sm);
  color: var(--rc-text);
}
.carn-ficha {
  /* Enredo: o dado mais importante da ficha, sobre papel alternativo */
}
.carn-ficha__enredo {
  background: var(--rc-bg-alt);
  border-radius: var(--rc-radius-sm);
  padding: var(--rc-space-3);
}
.carn-ficha__enredo-tag {
  display: block;
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rc-tracking-wide);
  color: var(--rc-purple-light);
  margin-bottom: var(--rc-space-1);
}
.carn-ficha__enredo-titulo {
  display: block;
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-fw-bold);
  line-height: 1.25;
  letter-spacing: var(--rc-tracking-tight);
  color: var(--rc-purple);
  margin-bottom: var(--rc-space-2);
}
.carn-ficha__enredo-desc {
  font-size: var(--rc-text-sm);
  line-height: 1.7;
  color: var(--rc-text-2);
  margin: 0 0 var(--rc-space-2);
}
.carn-ficha__enredo-carn {
  display: block;
  font-size: var(--rc-text-xs);
  color: var(--rc-text-3);
  padding-top: var(--rc-space-2);
  border-top: solid 1px var(--rc-line);
}
.carn-ficha {
  /* Passar de escola sem fechar a ficha — o que faltava na referência */
}
.carn-ficha__rodape {
  display: flex;
  justify-content: space-between;
  gap: var(--rc-space-2);
  margin-top: var(--rc-space-4);
  padding-top: var(--rc-space-3);
  border-top: solid 1px var(--rc-line);
}
.carn-ficha__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--rc-space-1);
  border: none;
  background: none;
  font: inherit;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text-2);
  cursor: pointer;
  padding: var(--rc-space-1) 0;
  transition: color var(--rc-dur-1) var(--rc-ease);
}
.carn-ficha__nav svg {
  width: 16px;
  height: 16px;
}
.carn-ficha__nav:hover {
  color: var(--rc-purple);
}
.carn-ficha__nav:focus-visible {
  outline: solid 2px var(--rc-green);
  outline-offset: 2px;
}
.carn-ficha__nav--ant svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .carn-ficha__veu,
  .carn-ficha__painel {
    transition: none;
  }
}
/* ============================================================================
   PÁGINAS — A Revista e Contato. Seguem o template branco (.tpl), com o conteúdo
   DENTRO do card. Tokens do site + paleta das bandeiras. Reutiliza flagFlow.
   ========================================================================= */
/* Separador: filete de 1px com o mesmo fluxo de cores da faixa do topo. */
.flag-line {
  height: 1px;
  border: 0;
  margin: var(--rc-space-6) 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--rc-flag-1), var(--rc-flag-2), var(--rc-flag-3), var(--rc-flag-4), var(--rc-flag-1));
  background-size: 200% 100%;
  animation: flagFlow 14s linear infinite;
}

/* ── A REVISTA — BANNER/CARROSSEL (contido no card branco) ───────────────────*/
.rev-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-2);
  width: 100%;
  max-width: 100%;
  height: clamp(240px, 30vw, 420px);
  margin-bottom: var(--rc-space-7);
}
.rev-banner__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #1a062c;
}
.rev-banner__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
  transform: scale(1.04);
  animation: revKen 40s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.rev-banner__slide:nth-child(1) {
  animation-delay: 0s;
}
.rev-banner__slide:nth-child(2) {
  animation-delay: -8s;
}
.rev-banner__slide:nth-child(3) {
  animation-delay: -16s;
}
.rev-banner__slide:nth-child(4) {
  animation-delay: -24s;
}
.rev-banner__slide:nth-child(5) {
  animation-delay: -32s;
}
.rev-banner__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 120% at 20% 100%, rgb(var(--rc-purple-deepest)/0.5) 0%, transparent 55%), linear-gradient(180deg, rgb(var(--rc-purple-deepest)/0.18) 0%, transparent 42%, rgb(var(--rc-purple-deepest)/0.82) 100%);
}
.rev-banner__cap {
  position: relative;
  z-index: 1;
  padding: clamp(var(--rc-space-4), 3vw, var(--rc-space-6));
}
.rev-banner__kicker {
  display: inline-block;
  margin-bottom: var(--rc-space-2);
  padding: 5px 12px;
  border-radius: var(--rc-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  color: var(--rc-paper);
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-fw-medium);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
}
.rev-banner__tag {
  color: var(--rc-paper);
  font-weight: var(--rc-fw-bold);
  max-width: 22ch;
  font-size: clamp(var(--rc-text-xl), 3.4vw, var(--rc-text-3xl));
  line-height: 1.05;
  letter-spacing: var(--rc-tracking-tight);
  text-shadow: 0 2px 24px rgb(var(--rc-purple-deepest)/0.6);
}
.rev-banner__tag b {
  background: linear-gradient(92deg, var(--rc-flag-1), var(--rc-flag-2), var(--rc-flag-3), var(--rc-flag-4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: inherit;
}
.rev-banner .flag-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
}

/* Fade-in (0→5%) e fade-out (20→25%) com a MESMA duração (2s) — alinhados para
   coincidir exatamente com o fade-out/fade-in da foto vizinha (stagger de 8s = 20%
   do ciclo de 40s). Isso garante opacidade combinada ~1 durante toda a transição;
   sem isso, a saída/entrada ficam fora de sincronia e o fundo escuro do container
   vaza entre as duas fotos (flash preto na troca). */
@keyframes revKen {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
    transform: scale(1.14);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}
/* ── SOBRE — bloco único, parágrafos empilhados (sem colunas) ────────────────*/
.rev-sobre__grid {
  display: block;
}

.rev-sobre__lead {
  font-size: clamp(var(--rc-text-lg), 2.2vw, var(--rc-text-xl));
  line-height: var(--rc-lh-lg);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text);
  margin-bottom: var(--rc-space-5);
}

.rev-sobre__texto {
  color: var(--rc-text-2);
  line-height: var(--rc-lh-lg);
}
.rev-sobre__texto p {
  margin: 0 0 var(--rc-space-4);
}
.rev-sobre__texto p:last-child {
  margin-bottom: 0;
}

.rev-sobre__eyebrow {
  color: var(--rc-text-3);
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  letter-spacing: var(--rc-tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--rc-space-2);
}

/* ── CARDS de acesso (GE / SO / Fotos / Mais) ───────────────────────────────*/
.rev-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rc-space-4);
}

.rev-card {
  --c:var(--rc-flag-1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rc-space-3);
  padding: var(--rc-space-5);
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  box-shadow: var(--rc-shadow-1);
  transition: transform var(--rc-dur-2) var(--rc-ease), box-shadow var(--rc-dur-2) var(--rc-ease), border-color var(--rc-dur-2) var(--rc-ease);
}
.rev-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c);
}
.rev-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rc-shadow-3);
  border-color: var(--c);
}
.rev-card__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.rev-card__ico svg {
  width: 24px;
  height: 24px;
}
.rev-card__label {
  font-size: var(--rc-text-lg);
  font-weight: var(--rc-fw-bold);
  color: var(--rc-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-space-2);
}
.rev-card__arrow {
  color: var(--c);
  transition: transform var(--rc-dur-2) var(--rc-ease);
  flex: none;
}
.rev-card:hover .rev-card__arrow {
  transform: translateX(4px);
}
.rev-card__desc {
  font-size: var(--rc-text-sm);
  color: var(--rc-text-3);
  line-height: var(--rc-lh-sm);
}
.rev-card--1 {
  --c:var(--rc-flag-1);
}
.rev-card--2 {
  --c:var(--rc-flag-2);
}
.rev-card--3 {
  --c:var(--rc-flag-3);
}
.rev-card--4 {
  --c:var(--rc-flag-4);
}

/* ── VÍDEOS (3 por linha no desktop) ────────────────────────────────────────*/
.rev-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rc-space-5);
}

.rev-video {
  display: block;
  border-radius: var(--rc-radius-lg);
  overflow: hidden;
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  box-shadow: var(--rc-shadow-1);
  transition: transform var(--rc-dur-2) var(--rc-ease), box-shadow var(--rc-dur-2) var(--rc-ease);
}
.rev-video:hover {
  transform: translateY(-4px);
  box-shadow: var(--rc-shadow-3);
}
.rev-video__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}
.rev-video__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rc-dur-4) var(--rc-ease);
}
.rev-video:hover .rev-video__thumb img {
  transform: scale(1.05);
}
.rev-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  pointer-events: none;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  opacity: 0.92;
}
.rev-video__body {
  padding: var(--rc-space-4);
}
.rev-video__title {
  font-size: var(--rc-text-base);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text);
  line-height: var(--rc-lh-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-video__meta {
  margin-top: var(--rc-space-1);
  font-size: var(--rc-text-xs);
  color: var(--rc-text-3);
}

.rev-videos__vazio {
  padding: var(--rc-space-7);
  text-align: center;
  color: var(--rc-text-3);
  border: 1px dashed var(--rc-line);
  border-radius: var(--rc-radius-lg);
}

/* ── CONTATO — formulário ───────────────────────────────────────────────────*/
.contato-wrap {
  max-width: 620px;
  margin-inline: auto;
}

.contato-form {
  display: grid;
  gap: var(--rc-space-4);
}
.contato-form__row {
  display: grid;
  gap: var(--rc-space-4);
  grid-template-columns: 1fr 1fr;
}
.contato-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contato-form label {
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-fw-medium);
  color: var(--rc-text);
}
.contato-form input, .contato-form textarea {
  font: inherit;
  color: var(--rc-text);
  background: var(--rc-bg);
  border: 1px solid var(--rc-line);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--rc-dur-2) var(--rc-ease), box-shadow var(--rc-dur-2) var(--rc-ease);
}
.contato-form input:focus, .contato-form textarea:focus {
  outline: none;
  border-color: var(--rc-purple);
  box-shadow: 0 0 0 3px rgba(44, 8, 76, 0.15);
}
.contato-form textarea {
  min-height: 150px;
  resize: vertical;
}
.contato-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contato-form .btn {
  justify-self: start;
  margin-top: var(--rc-space-2);
  border: 0;
  cursor: pointer;
  font: inherit;
}

.contato-intro {
  margin-bottom: var(--rc-space-6);
  color: var(--rc-text-2);
  font-size: var(--rc-text-lg);
  line-height: var(--rc-lh-lg);
  text-align: center;
}

.contato-msg {
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: var(--rc-space-5);
  font-size: var(--rc-text-sm);
}
.contato-msg--ok {
  background: color-mix(in srgb, var(--rc-flag-4) 16%, transparent);
  color: #2D4A0F;
  border: 1px solid color-mix(in srgb, var(--rc-flag-4) 45%, transparent);
}
.contato-msg--erro {
  background: color-mix(in srgb, var(--rc-pink) 12%, transparent);
  color: #7A0E4D;
  border: 1px solid color-mix(in srgb, var(--rc-pink) 40%, transparent);
}

@media (max-width: 900px) {
  .rev-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .rev-videos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .rev-cards {
    grid-template-columns: 1fr;
  }
  .rev-videos {
    grid-template-columns: 1fr;
  }
  .contato-form__row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flag-line {
    animation: none;
  }
  .rev-banner__slide {
    animation: none;
    transform: none;
  }
  .rev-banner__slide:nth-child(1) {
    opacity: 1;
  }
}
/* ============================================================================
   RESPONSIVO — ordenado do maior p/ o menor: o menor sempre sobrepõe.
   ========================================================================= */
/* Header: gutter enxuto na faixa 1199–1060 */
@media (max-width: 1199px) and (min-width: 1060px) {
  .header__inner {
    padding-inline: 24px;
  }
}
/* Menu vira mobile ≤1059: some a pílula e o contato (migra p/ dentro do menu),
   aparece o hambúrguer. O header encolhe — 124px é medida de desktop. */
@media (max-width: 1059px) {
  :root {
    --rc-header-h:88px;
  }
  .nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .contact {
    display: none;
  }
  .brand img {
    height: 44px;
  }
}
/* ≤1024: destaques em 2 col · fotos em 6 (2 linhas × 3 col) · Instagram em 9 (3×3) */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .fotos-section .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .fotos-section .album:nth-child(n+7) {
    display: none;
  }
  .ig__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ig__cell:nth-child(n+10) {
    display: none;
  }
}
/* Hero: capas somem — capa única preenchendo a stage, proporção perto de 4:3 */
@media (max-width: 900px) {
  .hero__stage {
    height: clamp(240px, 66vw, 360px);
  }
  .hero__card {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .item, .panel__items .item {
    grid-template-columns: 120px 1fr;
  }
  .hero__cap {
    padding: var(--rc-space-3);
  }
  .backdrop {
    height: clamp(680px, 150vw, 1000px);
  }
  /* Fotos viram trilho horizontal (Netflix) e o vídeo de fundo sai (leveza) */
  .fotos-bg-video {
    display: none;
  }
  .fotos-section .grid-4 {
    display: flex;
    grid-template-columns: none;
    gap: var(--rc-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--rc-gutter) * -1);
    padding-inline: var(--rc-gutter);
    scroll-padding-inline: var(--rc-gutter);
    overflow-y: hidden;
  }
  .fotos-section .grid-4::-webkit-scrollbar {
    display: none;
  }
  .fotos-section .grid-4 > * {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
  .item__title {
    font-size: var(--rc-text-base);
    line-height: var(--rc-lh-base);
  }
}
/* ── MOBILE PLENO ≤700 ──────────────────────────────────────────────────────*/
@media (max-width: 700px) {
  /* Header compacto e ritmo vertical recalibrado para a mão, não para o mouse */
  :root {
    --rc-header-h:64px;
    --rc-footer-h:80px;
  } /* footer vira coluna → mais alto */
  .brand img {
    height: 38px;
  }
  .hero {
    padding-block: var(--rc-space-3) var(--rc-space-3);
  }
  .hero__nav {
    display: none;
  } /* dots desnecessários no mobile — autoplay cuida da troca */
  .section__head {
    margin-bottom: var(--rc-space-3);
  }
  .footer__inner {
    align-items: flex-start;
    gap: var(--rc-space-3);
    padding-block: var(--rc-space-2);
  }
  /* Alvos de toque ≥44px nos links de avanço; datas sobem para 14px (legibilidade) */
  .section__more {
    padding-block: 12px;
  }
  .item__meta {
    font-size: var(--rc-text-sm);
    line-height: var(--rc-lh-sm);
  }
  /* Destaques: trilho Netflix com cards menores/mais baixos que o hero (hierarquia) */
  .section--joined .grid-4 {
    display: flex;
    grid-template-columns: none;
    gap: var(--rc-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--rc-gutter) * -1);
    padding-inline: var(--rc-gutter);
    scroll-padding-inline: var(--rc-gutter);
    overflow-y: hidden;
  }
  .section--joined .grid-4::-webkit-scrollbar {
    display: none;
  }
  .section--joined .grid-4 > * {
    flex: 0 0 64%;
    scroll-snap-align: start;
  }
  .section--joined .tile {
    aspect-ratio: 16/10;
  }
  /* Instagram: 4 últimos posts, 2 por linha */
  .ig__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rc-space-2);
    margin-top: var(--rc-space-5);
  }
  .ig__cell:nth-child(n+5) {
    display: none;
  }
  /* "Mais notícias" some só no mobile (permanece no desktop/tablet) */
  .mais-noticias {
    display: none;
  }
  .hero__card {
    box-shadow: none;
  }
  /* Ajustes de tipografia/ritmo mobile (pedido do dono) */
  .tpl::before {
    width: 100vw;
  } /* full-bleed: no mobile a scrollbar é overlay */
  .tpl__title {
    font-size: var(--rc-text-xl);
  } /* 24px */
  .tpl__masthead {
    gap: var(--rc-space-2);
    margin-bottom: var(--rc-space-4);
  }
  .rev-banner {
    margin-bottom: var(--rc-space-5);
  }
  .rev-banner__tag {
    font-size: var(--rc-text-base);
  } /* 16px */
  .hero__title {
    font-size: var(--rc-text-base);
  } /* 16px */
  .carn-abre {
    padding-block: 0 0;
  }
  /* Remove os filetes coloridos entre seções (mantém o respiro) */
  .flag-line {
    background: none;
    animation: none;
  }
  /* Grupo Especial: sem o reveal reversível (rvx) no mobile — só aparece, como as
     outras seções. O rvx do desktop fica intacto. */
  .js .rvx, .js .rvx--left, .js .rvx--right {
    opacity: 1;
    transform: none;
  }
  /* Listagem: 1ª matéria como as demais (sem destaque com texto sobre a foto) */
  .materia--destaque {
    margin-bottom: var(--rc-space-8);
  }
  .materia--destaque .materia__foto {
    aspect-ratio: auto;
    display: block;
    overflow: visible;
    margin-bottom: 0;
  }
  .materia--destaque .materia__foto img {
    height: auto;
    aspect-ratio: 16/10;
    border-radius: var(--rc-radius-sm);
  }
  .materia--destaque .materia__overlay {
    position: static;
    background: none;
    padding: 0;
    margin-top: var(--rc-space-3);
  }
  .materia--destaque .materia__meta {
    color: var(--rc-text-3);
    margin-bottom: var(--rc-space-2);
  }
  .materia--destaque .materia__meta-ico {
    color: var(--rc-purple-light);
  }
  .materia--destaque .materia__titulo {
    color: var(--rc-text);
    font-size: var(--rc-text-lg);
    line-height: var(--rc-lh-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .hero__card.is-center .hero__img {
    animation: none;
  }
  .hero__card.is-center::before {
    animation: none;
  }
  .flag::after {
    display: none;
  } /* volta aos 4 blocos estáticos */
  * {
    scroll-behavior: auto;
  }
}