/* Corporate em Movimento — folha das telas largas (>= 760px).
   Medidas derivadas da arte de 2000px, fator 0,55 (render 1100px).

   Esta folha e carregada com media="(min-width:760px)" e a m.css com o recorte
   complementar, entao as duas nunca valem ao mesmo tempo. Nao ha cascata entre
   elas nem disputa de especificidade: cada largura le uma folha so.

   Abaixo de 1100px os tamanhos encolhem por clamp() em vez de quebrar. Os
   valores de vw foram escolhidos para bater exatamente no maximo em 1100px, que
   e a largura de calibragem — de 1100 para cima nada muda. */

:root {
/* ESCALA TIPOGRÁFICA — padrão web, uma só para as duas larguras (valores do
   desktop aqui; o m.css usa a mesma escala um passo menor, pela distância de
   leitura no celular):
       Hero (h1) ........ 40 / 26      Corpo de card .... 15 / 13
       Seção (h2) ....... 24 / 20      Legenda / fina ... 13 / 12
       Lede / intro ..... 19 / 17      Micro / rodapé ... 12 / 10-11
       Corpo (--body) ... 17 / 15      Eyebrow c/ filete  18 / 13 (caixa-alta)
       Título de card ... 16 / 14      Os números do "em números" são display
                                       e ficam acima da escala de propósito. */
  --plum: #312b37;
  --ink: #29242b;
  --teal: #1eb1dc;
  --grey: #e7e8ea;
  --mast: #f8f9fb;
  --navy: #0a1f44;       /* chrome: navbar e menu, iguais aos do site no ar */
  --accent: #e7642b;

  --nav-h: 54px;
  --nav-top: 62px;       /* logo abaixo do masthead (45px de altura) */
  --nav-inset: clamp(12px, 4vw, 40px);

  --page: 1100px;        /* largura de render */
  --pad: clamp(34px, 11.5vw, 126px);   /* recuo lateral do texto (230px na arte) */
  --body: 17px;    /* corpo (48px na arte; Open Sans corre mais larga) */
  --body-lh: 27px;
  --h1: clamp(30px, 3.4vw, 40px);      /* headline (87px na arte) */
  --h1-lh: clamp(38px, 4vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--plum);
  color: var(--ink);
  font-family: "Open Sans", -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* A faixa .mast sangra ate as bordas (100vw via margens negativas). O clip
     horizontal aqui absorve o pedaco de vw que inclui a barra de rolagem, entao
     nao aparece scroll lateral. clip (nao hidden) nao cria container de rolagem
     nem containing block, logo o nav position:fixed continua intacto. */
  overflow-x: clip;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  background: var(--plum);
}

/* masthead ------------------------------------------------------------ */
.mast {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--mast);
  /* Faixa sangra ate as bordas da janela mesmo com o .wrap preso a 1100px: as
     margens negativas simetricas puxam as laterais para fora do container
     centralizado (largura final = 100vw), sem tocar no markup. O recuo do
     conteudo cresce com a tela para o logo e a data nao colarem na borda. O
     overflow-x:clip no body absorve o pedaco de vw que inclui a barra de
     rolagem, entao nao aparece scroll horizontal (e clip nao vira container de
     rolagem, entao nao mexe no nav fixo). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 14px clamp(26px, 4.5vw, 64px);
  font-size: 13px;
  letter-spacing: .14em;
  font-weight: 600;
}
.mast img { height: 17px; width: auto; display: block; }
.mast .rule { width: 1px; height: 20px; background: #c9c7cd; }
.mast .em { color: var(--teal); }
.mast .date {
  margin-left: auto;
  letter-spacing: .02em;
  font-weight: 400;
  font-size: 13px;
  color: #4a444f;
}

/* navbar flutuante + menu de temas ------------------------------------
   Injetado por <cem-header>. O masthead e HTML de verdade (45px) e a navbar
   fica logo abaixo dele, entao --nav-top e valor fixo. */
.nav {
  position: fixed;
  top: var(--nav-top);
  left: var(--nav-inset); right: var(--nav-inset);
  margin: 0 auto;
  max-width: 900px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 18px;
  background: rgba(10, 31, 68, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(6, 15, 38, .34);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  z-index: 60;
  transition: transform .34s ease, opacity .34s ease;
}
.nav.hidden { transform: translateY(calc(-100% - var(--nav-top) - 10px)); opacity: 0; }

.nav .brand { display: flex; align-items: center; margin-right: auto; }
.nav .brand img { height: 19px; width: auto; display: block; filter: brightness(0) invert(1); }

.nav .back, .nav .sbtn, .nav .mbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .06);
  padding: 8px 15px;
  border-radius: 999px;
  color: #fff;
  font: 600 13px "Open Sans", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.nav .back { margin-right: 14px; }
.nav .sbtn { margin-right: 10px; }
.nav .back:hover, .nav .sbtn:hover, .nav .mbtn:hover { border-color: var(--accent); background: var(--accent); }
.nav .back svg, .nav .sbtn svg { width: 15px; height: 15px; display: block; }
/* aqui cabe a palavra ao lado da lupa; no celular o m.css deixa so o icone */
.nav .sbtn .sic { display: flex; }

.bars { position: relative; width: 16px; height: 10px; display: block; }
.bars::before, .bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px;
  background: currentColor; transition: transform .25s, top .25s;
}
.bars::before { top: 0; }
.bars::after { top: 8px; }
.mbtn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.mbtn[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  top: calc(var(--nav-top) + var(--nav-h) + 9px);
  left: var(--nav-inset); right: var(--nav-inset);
  margin: 0 auto;
  max-width: 900px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 26px 52px rgba(6, 15, 38, .28);
  transition: max-height .34s ease, opacity .28s ease, transform .34s ease;
  z-index: 55;
}
.nav.hidden + .menu { transform: translateY(calc(-100% - var(--nav-top))); opacity: 0; pointer-events: none; }
.menu.open { max-height: min(74vh, 640px); overflow-y: auto; opacity: 1; }
.menu-in { padding: 14px clamp(16px, 4vw, 24px) 22px; }
.menu .mg {
  margin: 16px 4px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #94a3b8;
}
.menu ul {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px;
}
.menu a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 12px; border-radius: 9px;
  color: var(--navy); text-decoration: none; transition: background .15s;
}
.menu a:hover { background: #f1f5fb; }
.mi-n { font-weight: 800; font-size: 12px; color: var(--accent); min-width: 22px; }
.mi-t { font-size: 14.5px; font-weight: 600; line-height: 1.3; }

/* painel da busca: mesma caixa e mesma posicao do painel de conteudo, para
   os dois abrirem no mesmo lugar. z-index acima do menu porque a busca pode
   ser aberta com o menu ainda fechando. */
.search {
  position: fixed;
  top: calc(var(--nav-top) + var(--nav-h) + 9px);
  left: var(--nav-inset); right: var(--nav-inset);
  margin: 0 auto;
  max-width: 900px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 26px 52px rgba(6, 15, 38, .28);
  transition: max-height .3s ease, opacity .26s ease, transform .34s ease;
  z-index: 56;
}
.nav.hidden ~ .search { transform: translateY(calc(-100% - var(--nav-top))); opacity: 0; pointer-events: none; }
.search.open { max-height: min(84vh, 640px); opacity: 1; }

.search-in { padding: 16px clamp(16px, 4vw, 24px) 20px; }
.search-bar {
  display: flex; align-items: center; gap: 11px;
  border: 1.5px solid rgba(10, 31, 68, .10); border-radius: 12px;
  padding: 0 10px 0 14px; height: 54px; background: #f7f9fc;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.search-bar:focus-within { border-color: #2ea8d6; background: #fff; box-shadow: 0 0 0 3px rgba(46, 168, 214, .16); }
.search-ic { display: flex; flex: none; color: var(--navy); opacity: .5; }
.search-ic svg { width: 20px; height: 20px; display: block; }
#sInput {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 15.5px;
  color: var(--navy); padding: 0;
  -webkit-appearance: none; appearance: none;
}
#sInput::placeholder { color: #94a3b8; }
#sInput::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-x {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: #94a3b8; padding: 2px 6px; border-radius: 8px;
}
.search-x:hover { color: var(--navy); background: #eef2f8; }
.search-res {
  list-style: none; margin: 12px 0 0; padding: 0;
  max-height: 52vh; overflow-y: auto; overscroll-behavior: contain;
}
.sr-a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none; color: var(--navy); padding: 11px 12px; border-radius: 9px;
}
.sr-a:hover, .sr-a.sel { background: #f1f5fb; }
.sr-t { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.sr-go { flex: none; color: var(--accent); font-weight: 800; font-size: 17px; opacity: .7; }
.search-msg { margin: 10px 6px 4px; padding: 8px 6px; font-size: 13.5px; color: #94a3b8; }
.search-msg[hidden] { display: none; }

.scrim {
  position: fixed; inset: 0;
  background: rgba(6, 15, 38, .52);
  opacity: 0; visibility: hidden;
  transition: opacity .3s;
  z-index: 50;
}
.scrim.show { opacity: 1; visibility: visible; }

/* hero (imagem recortada da arte) ------------------------------------- */
.hero { margin: 0; display: block; }
.hero img { width: 100%; display: block; }

/* painel de conteudo --------------------------------------------------- */
.panel {
  background: #fff;
  margin: -34px 16px 0;          /* -34 sobe sobre o hero: cantos revelam a foto, nao a faixa plum (some o recorte). lateral 1,45% */
  border-radius: 34px 34px 0 0;
  padding: 118px var(--pad) 96px;
  position: relative;
}

.panel h1 {
  margin: 0 0 80px;      /* 145px na arte */
  font-size: var(--h1);
  line-height: var(--h1-lh);
  font-weight: 400;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.panel h1 b { font-weight: 700; }

.panel h2 {
  margin: 70px 0 0;      /* vao antes do subtitulo: ~101px na escala do render */
  font-size: var(--body);
  line-height: var(--body-lh);
  font-weight: 700;
}

.panel p {
  margin: 30px 0 0;
  font-size: var(--body);
  line-height: var(--body-lh);
  font-weight: 400;
}

.panel ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--body);
  line-height: var(--body-lh);
}
.panel ul li { margin-top: 4px; text-indent: -.62em; padding-left: .62em; }

/* Tabela comparativa dentro da materia (usada na p29). Rola no eixo x se nao
   couber, para nunca empurrar a largura do painel. Estetica sobria, alinhada
   ao resto: cabecalho navy, linhas com hairline, sem sombra nem gradiente. */
.panel .tbl-wrap { margin: 30px 0 0; overflow-x: auto; }
.panel table.tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--body);
  line-height: 1.45;
}
.panel table.tbl th,
.panel table.tbl td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}
.panel table.tbl thead th {
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  border-bottom: none;
}
.panel table.tbl tbody tr:last-child td { border-bottom: none; }
.panel table.tbl tbody td:nth-child(2) { font-weight: 700; color: var(--navy); white-space: nowrap; }

.backtop {
  display: block;
  width: max-content;
  margin: 96px auto 0;
  padding: 13px 30px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.backtop span { color: var(--teal); margin-right: 10px; font-weight: 400; }
.backtop:hover { background: #f2fbfe; }

/* materias recomendadas (pe da materia) — 3 colunas, foto no topo.
   Classes proprias (.rec*) porque o card da capa (.ncard) so tem CSS mobile
   embutido no index.html; aqui a materia so carrega live.css/m.css. */
cem-recomendadas { display: block; }
.recs { margin-top: clamp(56px, 6vw, 78px); }
.recs-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 26px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.recs-title::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--teal); }
.recs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rec {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--teal);
  border-radius: 18px;
  padding: 16px 16px 20px;
  background: #fff;
  text-decoration: none;
  transition: background .15s ease;
}
.rec:hover { background: #f2fbfe; }
.rec-foto {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 8.2;
  margin-bottom: 16px;
}
.rec-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-body { display: flex; flex-direction: column; }
.rec-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.18;
  color: var(--navy);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-txt {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-more { margin-top: 10px; color: var(--navy); font-weight: 800; white-space: nowrap; }
.rec:hover .rec-more { text-decoration: underline; }

/* newsletter ----------------------------------------------------------- */
.nl {
  background: var(--grey);
  margin: 0 16px -34px;          /* cinza segue atras dos cantos do rodape */
  padding: 64px var(--pad) 96px;
  position: relative;
  z-index: 1;
}
.nl h2 {
  margin: 0 0 22px;
  color: var(--teal);
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  text-transform: uppercase;
}
/* na arte so "Inscreva-se" e negrito, e um pouco maior que o resto da linha */
.nl .lede { margin: 0; font-size: 15px; font-weight: 400; }
.nl .lede b { font-size: 16px; font-weight: 700; }
.nl .fine { margin: 5px 0 0; font-size: 13px; line-height: 18px; color: #4c4750; }
.nl form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.nl input {
  min-width: 0;                   /* deixa o campo encolher dentro da coluna do grid */
  border: 0;
  border-radius: 8px;
  background: #fff;
  padding: 19px 22px;
  font: 400 19px "Open Sans", sans-serif;
  color: var(--ink);
}
.nl input::placeholder { color: #6d6873; }
.nl input.bad { outline: 2px solid #e7642b; }
.nl button {
  margin-top: 26px;
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  background: transparent;
  padding: 10px 26px;
  font: 700 14px "Open Sans", sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.nl .ok {
  margin-top: 26px;
  display: none;
  font-size: 15px;
  font-weight: 700;
  color: #0f7a4f;
}

/* barra plum ----------------------------------------------------------- */
.plum {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 30px;
  background: var(--plum);
  border-radius: 34px 34px 0 0;   /* cantos superiores arredondados, iguais a arte */
  padding: 60px 48px 48px;
  color: #f7f6f9;
}
.plum .mark { font-size: 19px; letter-spacing: .2em; font-weight: 700; }
.plum .mark span { display: block; color: var(--teal); font-weight: 400; letter-spacing: .16em; }
.plum .fdate { margin-top: 34px; font-size: 13px; color: #cfc9d4; }
/* 4 temas desde 31/07/2026. Flex com wrap: cada .t e indivisivel e o bullet
   viaja com ele, entao se um dia a linha virar duas nao sobra palavra solta. */
.plum .themes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 11px;
  letter-spacing: .12em;
  color: #eceaef;
}
.plum .themes .t { white-space: nowrap; }
.plum .themes .t:not(:last-child)::after {
  content: '•';
  color: var(--teal);
  margin: 0 .55em;
}
.plum .social { display: flex; gap: 26px; margin-top: 30px; justify-content: flex-end; }
.plum .social a {
  color: #f7f6f9;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.plum .social .ic {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}
.plum .social .ic svg { width: 22px; height: 22px; color: var(--plum); display: block; }
.plum .social small { font-size: 10px; font-weight: 700; letter-spacing: .02em; }

/* carrossel de noticias (capa) — texto vivo, copiavel ------------------ */
.newsgrid { background: var(--plum); padding: 0 16px; }
.ng-panel {
  background: #fff;
  border-radius: 0;              /* continua o branco do capa-panel acima, rente */
  padding: 8px clamp(28px, 5vw, 74px) 60px;
}
.ng-title {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
}
/* dois grupos tematicos, cada um com seu subtitulo e grade de 3 colunas. */
.ng-group {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 34px 0 22px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}
.ng-group::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--teal); }
.ng-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  padding: 4px 6px 6px 0;
}
.ncard {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--teal);
  border-radius: 18px;
  padding: 16px 16px 20px;
  background: #fff;
}
.ncard .nc-foto {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 8.2;
  margin-bottom: 16px;
}
.ncard .nc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--navy);
  text-transform: uppercase;
}
.nc-txt {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  color: var(--navy);
}
/* nc-more agora e irmao do .ncard (saiu do <p> por causa do clamp no mobile):
   flex item ancorado no rodape, CTA alinhado em todos os cards da linha. */
.nc-more { margin-top: auto; padding-top: 10px; color: var(--navy); font-weight: 800; text-decoration: none; white-space: nowrap; }
.nc-more:hover { text-decoration: underline; }

/* ====================================================================
   CAPA — masthead + hero + blocos. O conteúdo é texto HTML; ficam
   como arte apenas os elementos gráficos: banner, badge Forbes,
   as fotos e os raios.
   ==================================================================== */
.capa-hero { display: block; margin: 0; font-size: 0; }
.capa-hero > img { width: 100%; height: auto; display: block; }

.capa-blocks { position: relative; display: block; margin: 0; font-size: 0; }
.capa-blocks > img { width: 100%; height: auto; display: block; }
.capa-blocks .hotspot { position: absolute; display: block; }

/* stats "UMA BASE SÓLIDA QUE SUSTENTA O FUTURO" ---------------------- */
/* card inset 16px + cantos superiores arredondados, iguais a arte: as
   secoes empilham rente sobre o plum, alinhadas na mesma largura. */
.stats { background: var(--grey); margin: -34px 16px 0; border-radius: 34px 34px 0 0; position: relative; }
.stats-inner { padding: 70px clamp(40px, 6vw, 92px) 78px; }
.stats-row1 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px; margin-bottom: 64px;
}
.stats-row2 {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 40px; align-items: center;
}
.stat-num {
  font-size: 42px; line-height: 1.0; font-weight: 700;
  color: var(--plum); letter-spacing: -.01em;
}
.stat-big .stat-num { font-size: 50px; }
.stat-lbl { font-size: 17px; font-weight: 600; color: var(--plum); margin-top: 12px; }
.stat-sub { font-size: 15px; font-weight: 400; color: var(--plum); margin-top: 4px; }
.stats .hl {
  background: linear-gradient(transparent 72%, var(--teal) 72%, var(--teal) 88%, transparent 88%);
  padding: 0 .06em;
}
/* Fonte dos numeros, pedida pelo cliente em 31/07/2026 "de forma discreta":
   fio teal fino em cima, tipo pequeno e plum rebaixado. Nao compete com os
   numeros e nao vira nota de rodape solta no meio do card. */
.stats-fonte {
  margin: 54px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(36,31,43,.14);
  font-size: 13px;
  line-height: 19px;
  color: rgba(36,31,43,.62);
}
.stat-pcts { display: grid; gap: 26px; }
.pct { display: flex; align-items: baseline; gap: 16px; }
.pct .pct-num { font-size: 38px; font-weight: 700; color: var(--plum); }
.pct .pct-lbl { font-size: 17px; font-weight: 600; color: var(--plum); }

/* ====================================================================
   CAPA — bloco Destaques + Explore por tema + Próximos encontros.
   Texto em HTML; ficam como arte apenas os elementos gráficos:
   badge Forbes, as 3 miniaturas de foto e o ícone dos Próximos
   Encontros.
   ==================================================================== */
.capa-panel {
  background: #fff; margin: -34px 16px 0; border-radius: 34px 34px 0 0;
  padding: 64px clamp(30px, 5vw, 70px) 40px; position: relative;
}

/* Destaques ----------------------------------------------------------
   Grade de cards no padrao "Noticias em geral" (foto no topo, 3 colunas),
   com a materia da Forbes em destaque logo abaixo. */
.dq { display: block; }
.dq-head {
  display: flex; align-items: center; gap: 20px; margin: 2px 0 24px;
  font-size: 18px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
.dq-head::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--teal); }
/* A faixa da Forbes passou para cima dos tres cards em 31/07/2026, entao o
   respiro de 40px que era do fim da lista agora e do fim da faixa. */
.dq-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0; }
.dq-card {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--teal); border-radius: 18px;
  padding: 16px 16px 20px; background: #fff; text-decoration: none;
}
.dq-card img {
  /* As fotos de origem sao quadradas (300x300). Num banner largo (16/8.2) o
     cover cortava ~metade da altura e a imagem ficava com zoom demais; 4/3
     mostra o assunto quase inteiro, com um corte suave. */
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  border-radius: 12px; display: block; margin-bottom: 16px;
}
.dq-card h4 {
  margin: 0 0 8px; font-size: 15px; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; color: var(--navy); line-height: 1.15;
}
.dq-card p { margin: 0; font-size: 15px; line-height: 21px; color: var(--navy); }

/* Forbes em destaque: foto do selo a esquerda, texto a direita. */
.dq-feature {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: center;
  border: 1.5px solid var(--teal); border-radius: 18px;
  padding: 26px 28px; margin: 0 0 40px; background: #fff; text-decoration: none;
}
.dq-feature .dq-media { display: block; }
.dq-feature img { width: 100%; display: block; border-radius: 12px; }
.dq-feature .dq-body { display: block; }
.dq-feature h3 {
  margin: 0 0 12px; font-size: 20px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: var(--navy);
}
.dq-feature p { margin: 0; font-size: 16px; line-height: 24px; color: #26303f; }
.dq .more { color: var(--navy); font-weight: 800; white-space: nowrap; }
.dq-feature:hover, .dq-card:hover { box-shadow: 0 2px 0 var(--teal); }

/* Coluna Eugenio -----------------------------------------------------
   Faixa plum dentro do painel branco da capa. Nao e card: e o unico bloco
   escuro da folha, e isso basta para destacar. A assimetria e proposital,
   o retrato e pequeno de proposito (o original tem 360px e amolece se
   crescer) e o fio teal divide "quem assina" de "o que ele escreveu". */
.coluna {
  background: #14111a; color: #e9e7ec; border-radius: 22px;
  /* Sangra alem do padding do painel branco (.capa-panel/.hub-panel usam
     clamp(30px,5vw,70px)) para a faixa escura estourar o branco simetrica. O
     overflow-x:clip do body absorve a sobra, sem scroll lateral. */
  margin: 46px calc(-1 * clamp(30px, 5vw, 70px) - 30px) 0;
  /* Duas colunas: a figura do Eugenio ocupa a faixa da esquerda, recortada DENTRO
     do box (object-fit:cover no .col-foto). A foto nova (retrato de tres-quartos)
     preenche a faixa sem sobrar nas laterais, entao nao ha mais vazamento. */
  display: grid; grid-template-columns: minmax(230px, 32%) 1fr;
  align-items: stretch; overflow: visible;
}
/* Coluna da esquerda: a figura preenche o retangulo da faixa como um retrato de
   revista — cover ancorado no alto (rosto + tronco), clipado pelo overflow:hidden
   do box, sem vazar para os lados nem para o texto. O fundo escuro fica so onde a
   foto (com fundo transparente) deixa ver. */
.col-foto {
  position: relative; align-self: stretch;
  background: #0f0d14;
  border-radius: 22px 0 0 22px;
  overflow: hidden;
}
.col-figura {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
}
/* Coluna da direita: todo o texto, com o padding que a faixa perdeu ao virar
   grid. align-self:center centra o bloco quando a figura for mais alta. */
.col-corpo {
  padding: clamp(40px, 4.4vw, 58px) clamp(34px, 4vw, 54px) clamp(40px, 4.4vw, 58px) clamp(66px, 5.5vw, 86px);
  align-self: center; min-width: 0;
}
/* Cabecalho de departamento: o nome da coluna abre o bloco como um slug de
   revista, com filete correndo por baixo. E o que anuncia "isto e uma coluna"
   antes de quem assina — hierarquia de secao editorial, nao de card. */
.col-kicker {
  margin: 0 0 clamp(24px, 2.6vw, 32px); padding: 0 0 18px;
  font-size: 15px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--teal);
  border-bottom: 1px solid rgba(30, 177, 220, .28);
}
/* Quem assina: o nome vira o titulo da coluna. */
.col-nome {
  margin: 0; font-size: clamp(23px, 2.5vw, 31px); line-height: 1.1;
  font-weight: 800; letter-spacing: -.01em; color: #fff;
}
/* Bio como standfirst: um passo maior e mais claro que corpo comum. */
.col-bio { margin: 16px 0 0; font-size: clamp(16px, 1.45vw, 18px); line-height: 1.62; color: #cfcbd6; max-width: none; }

/* A materia do mes: bloco clicavel inteiro, sem borda e sem fundo proprio.
   O que separa das linhas de cima e o fio teal, nao uma segunda caixa. */
.col-materia {
  display: block; margin: clamp(34px, 3.6vw, 46px) 0 0; padding: clamp(28px, 3vw, 34px) 0 0;
  border-top: 2px solid rgba(30, 177, 220, .55); text-decoration: none;
}
.col-selo {
  display: block; font-size: 13px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
}
.col-tit {
  display: block; margin: 12px 0 0; max-width: none;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.2; font-weight: 800; color: #fff;
}
.col-deck { display: block; margin: 12px 0 0; max-width: none; font-size: clamp(16px, 1.4vw, 17px); line-height: 1.5; color: #c9c5d0; }
.col-cta { display: block; margin: 20px 0 0; font-size: 16px; font-weight: 800; color: var(--teal); }
.col-cta::after { content: " \2192"; }
.col-materia:hover .col-tit { color: var(--teal); }

/* Na Mesma Mesa. A secao inteira vira um painel escuro destacado, o mesmo
   tratamento da coluna do Eugenio (.coluna): fundo #14111a, cantos 22px, sangra
   alem do padding do painel branco (estoura o branco pra dentro do plum, o
   overflow-x:clip do body absorve). O banner preenche o topo do card e o corpo
   (data + CTA) vem numa faixa escura embaixo, com respiro. */
/* Rota nova (11/08/2026): o hero do e-mail teaser vira o topo do card. A arte
   ja traz o convite e a data de estreia baked-in e termina numa faixa clara
   (#dde3e9, o fundo do e-mail), entao o card acompanha esse claro: a faixa do
   botao continua a base do hero sem emenda, igual ao e-mail. */
.lancamento {
  background: #dde3e9; color: var(--navy); border-radius: 22px;
  margin: 46px 0 0;
  padding: 0; overflow: hidden;
}
.lanc-media { display: block; margin: 0; overflow: hidden; }
.lanc-media picture { display: block; }
.lanc-media img { width: 100%; height: auto; display: block; }
/* O convite ja vive no hero; aqui embaixo fica so o CTA, centralizado, no
   gradiente azul da marca (o mesmo do botao de trailer do e-mail). */
.lanc-corpo {
  display: flex; justify-content: center;
  margin: 0; padding: clamp(24px, 2.6vw, 34px) clamp(34px, 4vw, 54px);
}
/* Botao "Assista ao trailer de lancamento": gradiente periwinkle->azul da
   identidade Na Mesma Mesa, texto caixa-alta a esquerda + play em circulo
   branco a direita, pill larga. */
.lanc-cta {
  display: inline-flex; align-items: center; gap: clamp(14px, 1.4vw, 20px);
  background: linear-gradient(105deg, #6c75da 0%, #2e4179 52%, #0b7ed0 100%);
  color: #fff;
  font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: 18px clamp(30px, 3vw, 42px); border-radius: 38px 38px 38px 0;
  box-shadow: 0 14px 34px -12px rgba(38, 62, 138, .62);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lanc-yt { flex: none; width: clamp(36px, 3vw, 44px); height: auto; display: block; }
.lanc-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(38, 62, 138, .66); filter: brightness(1.06); }
.lanc-cta:active { transform: translateY(0); }
.lanc-cta:focus-visible { outline: 3px solid #1180d6; outline-offset: 3px; }

/* Explore por tema --------------------------------------------------- */
.explore { text-align: center; padding: 54px 0 6px; }
.explore h2 {
  margin: 0 0 30px; font-size: 24px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--teal);
}
.theme-bar {
  display: flex; gap: 22px; justify-content: center;
  background: #241f2b; border-radius: 70px; padding: 22px;
}
.theme-pill {
  flex: 1 1 0; min-height: 96px; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 1.5px solid var(--teal); border-radius: 60px;
  color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; line-height: 1.1; padding: 10px 14px;
}
.theme-pill:hover { background: rgba(30,177,220,.16); }

/* Próximos encontros MAG -------------------------------------------- */
/* Selo (imagem do cliente) a esquerda + rotator a direita: um encontro
   por vez, trocando sozinho. Secao baixa; o fio teal vertical separa as
   duas colunas, ecoando o filete dos titulos. Tudo leva a agenda (p23). */
.proximos {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(24px, 4vw, 56px); padding: 38px 0 6px;
}
.prx-selo { display: inline-flex; text-decoration: none; }
.prx-selo img { width: clamp(260px, 28vw, 340px); height: auto; display: block; }
.prx-rot { border-left: 1.5px solid var(--teal); padding-left: clamp(22px, 3vw, 44px); }
/* palco: altura = item mais alto (medida pelo JS); itens empilhados em absolute */
.prx-stage { position: relative; }
.prx-item {
  position: absolute; top: 0; left: 0; right: 0;
  display: block; text-decoration: none; color: inherit;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.prx-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.prx-nome {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--teal);
}
.prx-data { margin: 3px 0 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.prx-desc { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--navy); }
.prx-item:hover .prx-nome { text-decoration: underline; text-underline-offset: 4px; }
.prx-dots { display: flex; gap: 8px; margin-top: 16px; }
.prx-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--teal); background: transparent;
  transition: background .2s ease;
}
.prx-dot.is-on { background: var(--teal); }
/* com reduced motion a troca de encontro e instantanea (sem fade/slide) */
@media (prefers-reduced-motion: reduce) {
  .prx-item { transition: none; }
}

/* Bloco de fechamento -----------------------------------------------
   Desde 04/08/2026 os proximos encontros ficam EM CIMA e a inscricao logo
   ABAIXO, numa faixa cinza so e empilhada (coluna unica). A ordem do DOM ja e
   essa: .proximos -> cem-footer(.nl -> .plum). O <cem-footer> sai do layout
   (display:contents) para o .nl e o footer.plum, que nascem dentro dele,
   virarem itens desta grade. Isso evita o unico caminho ruim: duplicar o
   formulario e ter dois id="nl" na mesma folha. */
.closing { display: grid; grid-template-columns: 1fr; }
.closing cem-footer { display: contents; }

/* Cada bloco ocupa a largura toda com o mesmo recuo de 16px dos dois lados; o
   cinza corre sem costura de um para o outro (mesmo fundo, blocos encostados). */
.closing .proximos,
.closing .nl {
  grid-column: 1;
  background: var(--grey);
  margin: 0 16px;
  padding: 62px clamp(34px, 5vw, 62px);
  position: relative;
  z-index: 1;
}
.closing .proximos { padding-bottom: 46px; }   /* aproxima a inscricao dos eventos */
.closing .nl {
  padding-top: 40px;
  margin-bottom: -34px;             /* cinza segue atras dos cantos do rodape */
}
.closing .plum { grid-column: 1; }

/* Em largura cheia o selo volta para o lado do rotator (layout base do
   .proximos): selo a esquerda, encontros a direita com o fio teal vertical. */

/* No fechamento a faixa ocupa a largura toda, entao os quatro campos cabem
   na grade 2x2 do estilo base; aqui so aperto um pouco o intervalo. */
.closing .nl form { gap: 14px; }
.closing .nl h2 { font-size: 26px; line-height: 36px; }


/* Presença MAG — carrossel horizontal de eventos --------------------
   Trilho com scroll-snap: o usuario arrasta ou usa as setas. As fotos
   sao reais (nao ilustracao), entao o card so as emoldura; a arte fica
   na foto, no fio teal e no titulo caixa-alta, como no resto da capa. */
.eventos { padding: 56px 0 6px; }
.ev-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 8px 20px; margin: 0 0 26px;
}
.ev-head h2 {
  grid-column: 1; margin: 0; font-size: 24px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--teal);
}
.ev-sub {
  grid-column: 1; grid-row: 2; margin: 6px 0 0;
  font-size: 16px; line-height: 1.4; color: var(--navy);
}
.ev-nav { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 12px; align-self: center; }
.ev-arrow {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--teal); background: #fff; color: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, color .15s, opacity .15s;
}
.ev-arrow svg { width: 20px; height: 20px; display: block; }
.ev-arrow:hover { background: var(--teal); color: #fff; }
.ev-arrow[disabled] { opacity: .32; cursor: default; }
.ev-arrow[disabled]:hover { background: #fff; color: var(--navy); }

.ev-track {
  display: flex; align-items: stretch; gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 2px; padding: 4px 2px 22px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ev-track::-webkit-scrollbar { display: none; }
/* enquanto tudo esta fechado os cards igualam altura (stretch) e o "Saiba
   mais" alinha no rodape; ao abrir um, o trilho passa a flex-start para o
   card aberto crescer sozinho, sem esticar os vizinhos e abrir vazio. */
.ev-track.has-open { align-items: flex-start; }
.ev-card {
  flex: 0 0 clamp(300px, 30vw, 360px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1.5px solid var(--teal); border-radius: 18px;
  background: #fff; overflow: hidden; text-decoration: none;
}
.ev-foto { margin: 0; }
.ev-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 32%;
  display: block;
}
.ev-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 24px; }
.ev-title {
  margin: 0 0 10px; font-size: 16px; font-weight: 800; line-height: 1.2;
  letter-spacing: .02em; text-transform: uppercase; color: var(--navy);
}
.ev-txt {
  margin: 0; font-size: 15px; line-height: 22px; color: #26303f;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.ev-card.open .ev-txt { -webkit-line-clamp: unset; overflow: visible; }
.ev-more {
  margin-top: auto; align-self: flex-start; padding: 12px 0 0;
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--teal); font-weight: 800; font-size: 14px; letter-spacing: .02em;
}
.ev-more:hover { text-decoration: underline; }

/* Hubs de tema (p02/p03/p04) ------------------------------------------
   O conteúdo é texto HTML; ficam como arte só os elementos gráficos:
   hero, card destaque e a foto do card da esquerda. Geometria dos
   paineis igual a das materias (o -34px e
   o que elimina o recorte plum entre um painel e outro). */
.hub-intro {
  background: var(--grey); margin: -34px 16px 0;
  border-radius: 34px 34px 0 0; position: relative;
}
.hub-intro-in { padding: 62px clamp(40px, 6vw, 92px) 66px; }
.hub-lede { margin: 0 0 16px; font-size: 19px; line-height: 28px; color: var(--ink); text-wrap: pretty; }
.hub-lede:last-child { margin-bottom: 0; }
.hub-lede b { font-weight: 700; }

.hub-panel {
  display: block; background: #fff; margin: -34px 16px 0;
  border-radius: 34px 34px 0 0;   /* mesma sobreposicao da capa: some o recorte */
  padding: 64px clamp(30px, 5vw, 70px) 48px; position: relative;
}

.hub-lead {
  display: block; border-radius: 18px; overflow: hidden; margin-bottom: 46px;
  text-decoration: none; color: inherit;   /* no mobile este bloco leva texto */
}
/* height:auto e obrigatorio: sem ele o atributo height="" do HTML vira altura
   usada e a foto estica na vertical (o width:100% so troca a largura). */
.hub-lead img { width: 100%; height: auto; display: block; }

.hub-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 40px; align-items: start; }
/* p24: sem o manifesto cinza, o painel branco abre direto na coluna do Eugenio.
   Como no layout de referencia da Aline, a coluna encosta no hero: zera o respiro
   de 46px que a coluna herda (usado na home, onde ela vem depois de outro bloco) e
   corta o padding-top do painel so aqui. `.coluna` como primeiro filho de
   `.hub-panel` so acontece no p24 — p02/p03/p04 nao tem coluna dentro do painel. */
.hub-panel > .coluna:first-child { margin-top: 0; }
/* Sem tarja branca entre o manifesto cinza e a coluna escura (pedido 05/08):
   zera o padding-top do painel so no p24. A coluna sangra mais larga que o
   painel e o -34px do painel a puxa pra cima, entao o bloco escuro cobre o
   "labio" branco do topo do painel e encosta na base do manifesto — sobra so
   um respiro cinza (padding-bottom do .hub-intro-in), nunca branco. */
.hub-panel:has(> .coluna:first-child) { padding-top: 0; }

/* p24: a grade de indicacoes fica DENTRO do padding do painel, alinhada com
   "Proximas presencas" e a newsletter abaixo. NAO sangra pra fora: card branco
   com borda furando a borda arredondada do painel corta a borda e parece estourar
   a secao (era o bug do bleed negativo). So a coluna dark sangra largo — faixa de
   fundo, recurso proposital. Respiro acima/abaixo para separar da coluna e do
   proximo bloco. */
.hub-grid--ind { margin: 44px 0 8px; }
/* a foto do card grande entra em faixa larga (3:2) para o card grande nao ficar
   mais alto que a pilha dos tres ao lado. */
.hub-grid--ind .hub-feat > img { aspect-ratio: 3 / 2; object-fit: cover; }

.hub-feat {
  border: 1.5px solid var(--teal); border-radius: 16px; overflow: hidden;
  background: #fff; text-decoration: none; display: block;
}
.hub-feat > img { width: 100%; height: auto; display: block; }
.hub-feat-body { padding: 22px 24px 26px; }
.hub-feat h3 {
  margin: 0 0 10px; font-size: 18px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: var(--navy);
}
.hub-feat-lead { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #26303f; }
.hub-feat p { margin: 0; font-size: 16px; line-height: 24px; color: #26303f; text-wrap: pretty; }

.hub-list { display: grid; gap: 18px; }
.hub-head {
  display: flex; align-items: center; gap: 20px; margin: 2px 0 4px;
  font-size: 18px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
.hub-head::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--teal); }

.hub-card {
  display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center;
  border: 1.5px solid var(--teal); border-radius: 16px; padding: 16px 20px;
  background: #fff; text-decoration: none;
}
.hub-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; }
.hub-card h4 {
  margin: 0 0 4px; font-size: 16px; font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; color: var(--navy); line-height: 1.15;
  text-wrap: balance;             /* sem palavra sozinha na ultima linha */
}
.hub-card p { margin: 0; font-size: 15px; line-height: 22px; color: #26303f; text-wrap: pretty; }
.hub-panel .more { color: var(--navy); font-weight: 800; white-space: nowrap; }
.hub-feat:hover, .hub-card:hover { box-shadow: 0 2px 0 var(--teal); }

/* Proximos eventos por vertical (p02 Cooperativismo, p04 Parcerias).
   Continuacao branca do hub-panel, antes da newsletter cinza: mesmas margens
   laterais (16px), sem canto arredondado — le como uma so peca. O tratamento de
   evento reaproveita a agenda (p23): nome teal, data escura, desc cinza, filete
   teal entre itens. p03 Mercado nao tem evento proprio: variante .selo-only com
   o mesmo selo da home, que leva a agenda cheia (p23, todos abertos). */
.hub-events { background: #fff; margin: 0 16px; padding: 0 clamp(30px, 5vw, 70px) 60px; }
.hub-events-in { border-top: 3px solid var(--teal); padding-top: 44px; }
.hub-events .hub-head { margin: 0 0 30px; }
/* 2o bloco: "Confira nossas proximas presencas" (demais eventos, lista aberta) */
.hub-events .hub-head-2 { margin-top: 44px; }
.hub-ev-list { margin: 0; padding: 0; list-style: none; }
.hub-ev-list li { padding: 0 0 26px; }
.hub-ev-list li + li { border-top: 2px solid var(--teal); padding-top: 26px; }
.hub-ev-list li:last-child { padding-bottom: 0; }
.hub-ev-nome { margin: 0; font-size: 25px; line-height: 31px; font-weight: 700; color: var(--teal); }
.hub-ev-data { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; color: #2f394d; }
.hub-ev-desc { margin: 4px 0 0; font-size: 16px; line-height: 24px; font-weight: 400; color: #61646b; text-wrap: pretty; }

.hub-events.selo-only { display: flex; justify-content: center; }
.hub-events.selo-only .hub-events-in { border-top: 0; padding-top: 8px; }
.hub-events.selo-only a { display: inline-flex; text-decoration: none; }
.hub-events.selo-only img { width: clamp(300px, 34vw, 380px); height: auto; display: block; }

/* markup que so o celular usa ------------------------------------------
   O <cem-header> e o <cem-footer> geram o superset das duas larguras, porque
   customElements.define nao aceita redefinicao: nao da para trocar de
   componente no meio do caminho. O que e do celular sai daqui. */
.datebar { display: none; }

/* wrappers que existem para o celular: no desktop somem da caixa e devolvem
   os filhos ao layout de sempre. A navbar precisa continuar `fixed` em
   relacao a janela, e o rodape continua sendo a grade de duas colunas. */
.navwrap { display: contents; }

.mast .mlogo { display: flex; align-items: center; }

/* quebra de linha so do desktop, onde a medida da coluna pede */
.dbr { display: inline; }

/* <picture> nasce inline e encolhe em volta da imagem, o que anula o
   width:100% do .hub-lead img. */
.hub-lead picture { display: block; }

/* No card destaque dos hubs, nesta largura a chamada ja vem desenhada dentro
   da arte. O texto vivo continua no HTML, so fora do campo visual, para leitor
   de tela e busca acharem a manchete em qualquer largura. O position:relative
   no pai e para o recorte do overflow:hidden alcancar o bloco escondido. */
.hub-lead { position: relative; }
.hub-lead-body {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ====================================================================
   Entrada ao rolar — revelação editorial. Discreta nas matérias, mais
   elaborada na capa e nas páginas de seção. O estado escondido só existe
   quando há JS (html.js, marcado no <head>) e quando o leitor não pediu
   menos movimento; sem qualquer uma das duas coisas, tudo aparece normal.
   O components.js marca .in ao entrar em cena — uma vez, sem repetir.
   Nada de barra no topo, brilho ou loop.
   ==================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* a moldura do herói contém o leve zoom para não gerar rolagem lateral */
  html.js .hero,
  html.js .capa-hero { overflow: hidden; }
  html.js .hero img,
  html.js .capa-hero img {
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .9s ease, transform 1.3s cubic-bezier(.16, 1, .3, 1);
  }
  html.js .hero.in img,
  html.js .capa-hero.in img { opacity: 1; transform: none; }

  /* matéria: sobe pouco, bem suave */
  html.js.pg-soft .panel > * {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
  }

  /* capa e páginas de seção: sobe um pouco mais */
  html.js.pg-hero .intro > *,
  html.js.pg-hero .stats-head,
  html.js.pg-hero .stats-row1 .stat,
  html.js.pg-hero .stats-row2 > *,
  html.js.pg-hero .stats-fonte,
  html.js.pg-hero .dq-head,
  html.js.pg-hero .dq-list > *,
  html.js.pg-hero .dq-feature,
  html.js.pg-hero .coluna > *,
  html.js.pg-hero .lanc-media,
  html.js.pg-hero .lanc-corpo > *,
  html.js.pg-hero .explore h2,
  html.js.pg-hero .theme-pill,
  html.js.pg-hero .ng-title,
  html.js.pg-hero .ng-group,
  html.js.pg-hero .ng-cards .ncard,
  html.js.pg-hero .eventos .ev-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  }

  /* Hubs (p02-p04): os paineis se sobrepoem de proposito (margin -34px) para
     nao abrir faixa plum entre um e outro. Animar cada painel com translate
     quebrava essa emenda no meio da entrada e mostrava os blocos soltos; aqui
     entram so com opacity, sem deslocar, entao a folha aparece inteira. */
  html.js.pg-hero .hub-intro,
  html.js.pg-hero .hub-lead,
  html.js.pg-hero .hub-feat,
  html.js.pg-hero .hub-list > * {
    opacity: 0;
    transition: opacity .9s ease;   /* mesma duracao da opacity da hero */
  }

  /* o selo dos próximos encontros aparece com uma escala leve, não subindo */
  html.js.pg-hero .proximos {
    opacity: 0;
    transform: scale(.965);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  }

  /* o filete teal ao lado do título é "desenhado" da esquerda p/ a direita */
  html.js.pg-hero .dq-head::after,
  html.js.pg-hero .ng-group::after,
  html.js.pg-hero .hub-head::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1) .15s;
  }
  html.js.pg-hero .dq-head.in::after,
  html.js.pg-hero .ng-group.in::after,
  html.js.pg-hero .hub-head.in::after { transform: scaleX(1); }

  /* revelado (vence pelo !important, independe da ordem de especificidade) */
  html.js .in { opacity: 1 !important; transform: none !important; }
}

/* CTA fixo no desktop: card compacto ancorado no canto inferior direito.
   Mesmo elemento .mcta do mobile (injetado no <body> por components.js), aqui
   recomposto como cartao vertical em vez de barra full-width. Fica sobre a
   pagina sem cobrir conteudo e some quando o proprio form (#nl) aparece. */
.mcta {
  position: fixed;
  left: auto;
  right: 28px;
  bottom: 0;                   /* colado na base */
  z-index: 45;                 /* abaixo do menu (55) e do scrim (50) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 232px;
  background: var(--plum);
  border-radius: 16px 16px 0 0;   /* arredonda so o topo; base colada reta */
  padding: 16px 18px;
  box-shadow: 0 -8px 28px rgba(10, 15, 25, .26);
  transform: translateY(0);
  transition: transform .3s ease, opacity .3s ease;
}
.mcta.hide {                   /* recolhe quando o form entra em cena */
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.mcta-txt {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1px;
}
.mcta-btn {
  display: block;
  text-align: center;
  background: var(--teal);
  color: var(--navy);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  line-height: 1;
  transition: filter .15s;
}
.mcta-btn:hover { filter: brightness(1.06); }
.mcta-btn:active { filter: brightness(.94); }