/* ==========================================================================
   LP Open Class · Mestrado e Doutorado Profissional · Fucape Business School

   ESTILO: o da LP do MBEx (mbex.fucape.br), a pedido do Wilton em 16/10/2026:
   seções de ponta a ponta alternando escuro (#0a0a0a) e claro, cabeçalho em
   barra, hero com texto à esquerda e card à direita, faixa de números,
   cabeçalho de seção com título à esquerda e texto à direita, cards claros com
   fio de cor no topo, passos em linha, FAQ centralizado, painel de chamada e
   rodapé escuro em colunas. Nada de moldura nem de seção em box arredondado.

   DATAS: boxes no padrão da LP do Painel Executivo (painelexecutivo.fucape.br):
   foto | quem conduz | tema | data + botão, com os estados ativo e em breve.

   IDENTIDADE: KV de Mestrado e Doutorado. As duas frentes em faixas retas
   (lilás e creme, canto vivo), persona, caixa "MESTRADO / ACADÊMICO" com a
   sombra preta deslocada e o mote de cada uma. O destaque (no lugar do dourado
   do MBEx) é o degradê da capa do KV, do lilás do Mestrado ao laranja do
   Doutorado: os dois juntos, com o mesmo peso. Cores chapadas nos fundos.
   ========================================================================== */

:root {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #161616;
  --ink: #161616;
  --light: #f5f5f7;
  --muted: #a8a8ae;
  --muted-2: #6e6e74;
  --line: #2a2a2e;
  --texto-claro: #57575c;

  --kv-lilas: #e8eaf1;
  --kv-lilas-forte: #dde0ea;
  --kv-cinza: #7d7d7d;
  --kv-grafite: #3a3a3c;
  --kv-laranja: #f6a74b;
  --kv-creme: #f6e4d3;
  --kv-degrade: linear-gradient(90deg, #e8eaf1 0%, #f6a74b 100%);
  --kv-degrade-escuro: linear-gradient(90deg, #6f727d 0%, #d9822b 100%);

  --pendente: #e5392b;

  --font: "Poppins", Arial, sans-serif;
  --font-marca: "Montserrat", "Poppins", Arial, sans-serif;
  --max: 1280px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
img { display: block; max-width: 100%; }
p, li, summary { text-wrap: pretty; }

h1, h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* o destaque dos títulos: o degradê da capa do KV (Mestrado + Doutorado) */
h1 em,
h2 em {
  font-style: normal;
  background: var(--kv-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section--light h2 em,
.faq-section h2 em {
  background: var(--kv-degrade-escuro);
  -webkit-background-clip: text;
  background-clip: text;
}

::selection { background: #fff; color: #111; }
:focus-visible { outline: 2px solid var(--kv-lilas); outline-offset: 3px; }
.section--light :focus-visible,
.faq-section :focus-visible { outline-color: var(--ink); }

.container {
  width: min(var(--max), calc(100% - 64px));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 12px 20px;
  border-radius: 99px;
  background: #fff;
  color: #111;
  font-weight: 500;
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

.eyebrow {
  color: var(--kv-lilas-forte);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section--light .eyebrow,
.faq-section .eyebrow { color: var(--kv-grafite); }

/* ---------- Botões ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 18px 32px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.button--small { min-height: 48px; padding: 12px 24px; font-size: 15px; }
.button--full { width: 100%; }

/* o botão das LPs Fucape com o degradê do KV no lugar do dourado do MBEx */
.button--kv {
  color: var(--bg);
  background: var(--kv-degrade);
  box-shadow: 0 10px 26px rgba(246, 167, 75, 0.2);
}

/* ---------- Cabeçalho: barra escura, como no MBEx ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #ffffff1a;
  background: var(--bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 88px;
}

.logo-image {
  width: 158px;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
}
.nav__cta { display: none; }

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #ffffff2e;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.menu-toggle::before { top: 14px; }
.menu-toggle span { top: 20px; }
.menu-toggle::after { top: 26px; }
.site-header.is-open .menu-toggle::before { top: 20px; transform: rotate(45deg); }
.site-header.is-open .menu-toggle span { opacity: 0; }
.site-header.is-open .menu-toggle::after { top: 20px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0 96px;
  background: var(--bg);
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 64px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero h1 {
  max-width: 680px;
  font-size: 60px;
  line-height: 1.08;
}

.hero__lead {
  max-width: 600px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.hero__bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 500;
}
.hero__bullets li::marker { color: var(--kv-laranja); }

/* card da inscrição, no lugar do formulário do MBEx */
.event-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border: 1px solid rgba(232, 234, 241, 0.35);
  border-radius: 22px;
  background: var(--bg-3);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}

.event-card__data {
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1;
}
.event-card__dia {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 96px;
  letter-spacing: -0.05em;
}
.event-card__mes {
  font-size: 24px;
  font-weight: 600;
  color: var(--kv-lilas-forte);
}

.event-card__lista > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.event-card__lista > div:last-child { border-bottom: 1px solid var(--line); }
.event-card__lista dt { color: var(--muted); }
.event-card__lista dd { font-weight: 600; text-align: right; }

.event-card__nota {
  margin-top: -8px;
  color: var(--muted-2);
  font-size: 12px;
  text-align: center;
}

/* ---------- Faixa de números (MBEx) ---------- */

.metrics {
  border-block: 1px solid rgba(232, 234, 241, 0.14);
  background: var(--bg-3);
}
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.metrics__grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 25px 30px;
  border-left: 1px solid rgba(232, 234, 241, 0.14);
}
.metrics__grid > div:last-child { border-right: 1px solid rgba(232, 234, 241, 0.14); }
.metrics strong { font-size: 22px; font-weight: 600; line-height: 1.3; }
.metrics span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Seções ---------- */

.section { padding: 96px 0; background: var(--bg); }
.section--light { color: var(--ink); background: var(--light); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 410px;
  gap: 90px;
  align-items: end;
}
.section-head h2 {
  max-width: 740px;
  margin-top: 14px;
  font-size: 44px;
  line-height: 1.15;
}
.section-head > p {
  color: var(--texto-claro);
  font-size: 16px;
  line-height: 1.65;
}
.section-head--dark > p { color: var(--muted); }

/* ---------- Agenda: box do Painel Executivo, só com traçado ----------
   O Wilton achou as boxes pretas pesadas e a agenda longa (16/10): a
   confirmada fica na box larga do Painel, em traçado sobre o fundo claro, e as
   próximas viram cartões curtos lado a lado embaixo. */

.agenda {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.evento {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 260px;
  align-items: center;
  gap: 36px;
  padding: 22px 24px 22px 22px;
  border: 1px solid #cfcfd5;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.evento__foto {
  overflow: hidden;
  width: 150px;
  aspect-ratio: 400 / 480;
  border-radius: 14px;
}
.evento__foto img { width: 100%; height: 100%; object-fit: cover; }

/* sem foto do professor ainda: as iniciais na caixa lilás do KV */
.evento__foto--inicial {
  display: grid;
  place-items: center;
  background: var(--kv-lilas);
}
.evento__foto--inicial span {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--kv-cinza);
}

.evento__texto {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.evento__rotulo {
  margin-bottom: 8px;
  color: var(--kv-grafite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.evento__nome {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.evento__bio {
  margin-top: 6px;
  color: var(--texto-claro);
  font-size: 13px;
}

.evento__tema {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.evento__chamada {
  margin-top: 6px;
  color: var(--texto-claro);
  font-size: 14px;
  line-height: 1.5;
}
.evento__detalhe {
  margin-top: 10px;
  color: var(--kv-grafite);
  font-size: 13px;
  font-weight: 600;
}

/* data e botão: os destaques da box, como no Painel */
.evento__acao {
  display: grid;
  gap: 10px;
  text-align: center;
}
.evento__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 12px;
  border: 1px solid #cfcfd5;
  border-radius: 12px;
  line-height: 1;
}
.evento__dia {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.04em;
}
.evento__mes {
  margin-top: 6px;
  color: var(--kv-grafite);
  font-size: 15px;
  font-weight: 600;
}
.evento__semana {
  margin-top: 6px;
  color: var(--texto-claro);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.evento__botao {
  display: block;
  padding: 15px 12px;
  border-radius: 10px;
  background: var(--kv-degrade);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
}

/* as próximas, abreviadas: cartões curtos só com traçado */
.proximas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}

.proxima {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "topo topo"
    "data tema";
  align-items: center;
  gap: 12px 18px;
  padding: 18px 22px 20px;
  border: 1px solid #cfcfd5;
  border-radius: 16px;
}
.proxima__topo {
  grid-area: topo;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--texto-claro);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.proxima__status { color: var(--kv-cinza); }
.proxima__data {
  grid-area: data;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--kv-cinza);
}
.proxima__data span {
  margin-top: 4px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.proxima__tema {
  grid-area: tema;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

/* selo da CAPES no meio do conteúdo: a barra cinza do KV */
.capes {
  display: flex;
  align-items: center;
  gap: 20px 40px;
  margin-top: 16px;
  padding: 26px 40px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
}
.capes__selo {
  flex: none;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  border-left: 3px solid var(--kv-laranja);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.capes__selo b { font-weight: 700; }
.capes__texto { color: var(--muted); font-size: 16px; line-height: 1.5; }

/* ---------- Linhas de pesquisa: cards claros do MBEx ---------- */

.light-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.light-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 33px 26px 28px;
  border: 1px solid #e4e4e8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(26, 23, 18, 0.07);
}
/* fio de cor no topo: cinza do Mestrado e laranja do Doutorado, alternados */
.light-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--kv-cinza);
}
/* acadêmico e profissional: o degradê do KV no fio de todos os cards */
.light-card::before { background: var(--kv-degrade-escuro); }
.light-card span {
  display: block;
  margin-bottom: 32px;
  font-family: var(--font-marca);
  font-size: 26px;
  font-weight: 700;
  color: var(--kv-cinza);
}
.light-card:nth-child(even) span { color: #d9822b; }
.light-card h3 { margin-bottom: 10px; font-size: 17px; line-height: 1.35; }
.light-card p { color: var(--texto-claro); font-size: 14px; }

/* ---------- Como participar: passos do MBEx ---------- */

.process-section { background: #0e0e0e; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.process-grid article {
  padding: 22px 20px 0 0;
  border-top: 1px solid #ffffff2e;
}
.process-grid span {
  display: block;
  margin-bottom: 22px;
  font-family: var(--font-marca);
  font-size: 26px;
  font-weight: 700;
  color: var(--kv-lilas-forte);
}
.process-grid article:nth-child(even) span { color: var(--kv-laranja); }
.process-grid h3 { margin-bottom: 8px; font-size: 17px; }
.process-grid p { color: var(--muted); font-size: 14px; }

/* ---------- FAQ (MBEx, centralizado) ---------- */

.faq-section { background: var(--light); color: var(--ink); }
.faq-centered { max-width: 920px; text-align: center; }
.faq-centered h2 { margin: 12px 0 28px; font-size: 40px; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.faq-list details {
  padding: 20px 28px;
  border: 1px solid #e4e4e8;
  border-radius: 14px;
  background: #fff;
}
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--kv-cinza); font-size: 20px; line-height: 1.2; }
.faq-list details[open] summary::after { content: "−"; color: #d9822b; }
.faq-list details p { margin-top: 12px; color: var(--texto-claro); font-size: 14px; }

/* ---------- Próximo passo: painel do MBEx ---------- */

.cta-section { padding: 96px 0; }
.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 54px 62px;
  border: 1px solid rgba(232, 234, 241, 0.45);
  border-radius: 26px;
  background: var(--bg-2);
}
.cta-panel h2 {
  max-width: 680px;
  margin: 12px 0;
  font-size: 40px;
  line-height: 1.18;
}
.cta-panel p:last-child { color: var(--muted); font-size: 15px; }

/* ---------- Rodapé (MBEx) ---------- */

.site-footer {
  padding: 64px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-main {
  display: grid;
  grid-template-columns: 280px repeat(4, max-content);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .logo-image { width: 170px; }
.footer-brand p { color: var(--muted-2); font-size: 13.5px; line-height: 1.65; }
.footer-column { display: flex; flex-direction: column; gap: 10px; white-space: nowrap; }
.footer-column h3 { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.6; }
.footer-column p,
.footer-column a { color: var(--muted-2); font-size: 13.5px; line-height: 1.6; }
.footer-bottom {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer-bottom p { color: var(--muted-2); font-size: 12px; text-align: center; }

/* ---------- Conteúdo que ainda falta (só no preview) ----------
   Em vermelho (pedido do Wilton): texto ainda errado ou sem confirmação.
   O build da pasta FINAL reprova se sobrar alguma classe "pendente". */

.pendente { color: var(--pendente) !important; }

/* ---------- Interação ---------- */

@media (any-hover: hover) {
  .button:hover { transform: translateY(-2px); filter: brightness(1.05); }
  .nav a:not(.button):hover { color: #fff; }
  .footer-column a:hover { color: var(--kv-lilas-forte); }
  a.evento:hover {
    border-color: rgba(232, 234, 241, 0.55);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- Movimento ----------
   motion-enabled só entra por JavaScript, e só quando o sistema não pede
   menos movimento. Sem ela, tudo aparece parado e visível. */

html.motion-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.motion-enabled [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-grupo] > [data-reveal]:nth-child(5n + 2) { --reveal-delay: 100ms; }
[data-reveal-grupo] > [data-reveal]:nth-child(5n + 3) { --reveal-delay: 200ms; }
[data-reveal-grupo] > [data-reveal]:nth-child(5n + 4) { --reveal-delay: 300ms; }
[data-reveal-grupo] > [data-reveal]:nth-child(5n + 5) { --reveal-delay: 400ms; }

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

@media (max-width: 1279px) {
  .evento { grid-template-columns: 140px minmax(0, 1fr) 240px; gap: 28px; }
  .evento__foto { width: 140px; }
  .evento__texto { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .light-cards { grid-template-columns: repeat(2, 1fr); }
  .light-card--largo { grid-column: auto; }
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  .site-header__inner { min-height: 76px; gap: 16px; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 32px 24px;
    border-bottom: 1px solid #ffffff1a;
    background: var(--bg);
    font-size: 16px;
  }
  .nav a:not(.button) { padding: 14px 0; border-bottom: 1px solid #ffffff12; }
  .nav__cta { display: inline-flex; margin-top: 16px; }
  .site-header.is-open .nav { display: flex; }
  .site-header__cta { margin-left: auto; }
  .menu-toggle { display: block; margin-left: 0; }

  .hero { padding: 64px 0 72px; }
  .hero__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .hero h1 { font-size: 48px; }
  .event-card { padding: 26px; }
  .event-card__dia { font-size: 80px; }

  .section-head { gap: 44px; grid-template-columns: 1fr 340px; }
  .section-head h2 { font-size: 38px; }

  .evento { grid-template-columns: 132px minmax(0, 1fr); gap: 22px 24px; padding: 22px; }
  .evento__foto { width: 132px; }
  .evento__acao { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .evento__data { flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; padding: 14px 10px; }
  .evento__dia { font-size: 40px; }
  .evento__mes, .evento__semana { margin-top: 0; }
  .evento__botao { display: flex; align-items: center; justify-content: center; }


  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

@media (max-width: 759px) {
  .container { width: calc(100% - 36px); }
  .nav { padding-inline: 18px; }
  .site-header__cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .logo-image { width: 132px; }

  .hero { padding: 48px 0 56px; }
  .hero__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__copy { gap: 22px; }
  .hero h1 { font-size: 42px; }
  .hero__lead { font-size: 16px; }

  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .metrics__grid > div { padding: 18px 16px; }
  .metrics__grid > div:nth-child(2) { border-right: 1px solid rgba(232, 234, 241, 0.14); }
  .metrics__grid > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(232, 234, 241, 0.14); }
  .metrics strong { font-size: 17px; }

  .section, .cta-section { padding: 72px 0; }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .section-head h2 { font-size: 34px; }

  /* box da data no celular, como no Painel: foto ao lado do nome, o resto embaixo */
  .evento { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .evento__foto { width: 88px; border-radius: 12px; }
  .evento__foto--inicial span { font-size: 48px; }
  .evento__foto--vazia span { font-size: 44px; }
  .evento__texto { display: contents; }
  .evento__quem { grid-column: 2; align-self: center; }
  .evento__sobre { grid-column: 1 / -1; }
  .evento__nome { font-size: 21px; }
  .evento__nome--breve { font-size: 19px; }
  .evento__tema { font-size: 17px; }
  .evento__acao { grid-template-columns: 1.15fr 1fr; gap: 10px; }
  .evento__data { flex-wrap: wrap; gap: 4px 8px; padding: 12px 8px; }
  .evento__dia { font-size: 32px; }
  .evento__mes { font-size: 14px; }
  .evento__semana { width: 100%; font-size: 10px; }
  .evento__botao { padding: 13px 8px; font-size: 15px; }
  .evento__botao--aguarde { font-size: 12px; }


  .capes { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
  .capes__selo { font-size: 18px; }
  .capes__texto { font-size: 15px; }

  .light-cards { grid-template-columns: 1fr; gap: 14px; }
  .light-card { min-height: 0; }
  .light-card span { margin-bottom: 18px; }

  .faq-centered h2 { font-size: 34px; }
  .faq-list details { padding: 18px 20px; }

  .cta-panel { flex-direction: column; align-items: flex-start; gap: 28px; padding: 34px 24px; }
  .cta-panel h2 { font-size: 32px; }
  .cta-panel .button { width: 100%; }

  .footer-main { grid-template-columns: 1fr; gap: 30px; }
  .footer-column { white-space: normal; }
  .site-footer { padding: 48px 0 32px; }
}

@media (max-width: 460px) {
  .hero h1 { font-size: 38px; }
  .event-card { padding: 22px; }
  .event-card__dia { font-size: 72px; }
  .process-grid { grid-template-columns: 1fr; }
  .button { white-space: normal; text-align: center; }
}

/* ---------- Linhas: acadêmico em 4, profissional em 2 mais largos ---------- */

.light-card--largo { grid-column: span 2; }

.light-card__braco {
  margin-bottom: 18px;
  color: var(--kv-grafite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.light-card__braco + span { margin-bottom: 22px; }

/* ==========================================================================
   Efeitos de fundo
   Luzes girando no topo, nas cores do Mestrado (cinza-lilás) e do Doutorado
   (laranja), e um brilho que respira nas seções escuras. Só CSS: nada de
   requestAnimationFrame nem observer. Com movimento reduzido, as luzes ficam
   paradas (só a animação sai).
   ========================================================================== */

.hero__luzes {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 1400px;
  height: 1400px;
  margin: -700px 0 0 -700px;
  pointer-events: none;
  animation: luzes-girar 28s linear infinite;
}

.hero__luzes::before,
.hero__luzes::after,
.hero__luzes span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}

/* Mestrado: cinza-lilás */
.hero__luzes::before {
  top: 14%;
  left: 18%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(221, 224, 234, 0.42) 0%, rgba(221, 224, 234, 0) 68%);
}

/* Doutorado: laranja */
.hero__luzes::after {
  right: 14%;
  bottom: 16%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(246, 167, 75, 0.4) 0%, rgba(246, 167, 75, 0) 68%);
}

/* terceira luz, menor, girando ao contrário */
.hero__luzes span {
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  margin: -190px 0 0 -190px;
  transform-origin: 50% 160%;
  background: radial-gradient(circle, rgba(125, 125, 125, 0.4) 0%, rgba(125, 125, 125, 0) 70%);
  animation: luzes-girar 19s linear infinite reverse;
}

@keyframes luzes-girar {
  to { transform: rotate(360deg); }
}

/* o card da inscrição vira vidro, para as luzes passarem por trás */
.event-card {
  background: rgba(22, 22, 22, 0.66);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* brilho que respira no fundo das seções escuras */
.com-brilho {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.com-brilho::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -260px;
  left: -220px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(221, 224, 234, 0.13) 0%, rgba(221, 224, 234, 0) 55%),
    radial-gradient(circle at 70% 70%, rgba(246, 167, 75, 0.12) 0%, rgba(246, 167, 75, 0) 55%);
  filter: blur(40px);
  pointer-events: none;
  animation: brilho-respirar 9s ease-in-out infinite alternate;
}
.com-brilho--direita::before { left: auto; right: -220px; }
.cta-section.com-brilho::before { top: auto; bottom: -300px; left: 50%; margin-left: -380px; }

@keyframes brilho-respirar {
  from { opacity: 0.55; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__luzes,
  .hero__luzes span,
  .com-brilho::before { animation: none; }
}

@media (max-width: 759px) {
  .hero__luzes { width: 900px; height: 900px; margin: -450px 0 0 -450px; }
  .hero__luzes::before { width: 340px; height: 340px; }
  .hero__luzes::after { width: 360px; height: 360px; }
  .hero__luzes span { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
  .com-brilho::before { width: 520px; height: 520px; }
}
/* Ajustes de largura das partes acima (ficam depois delas de propósito: uma
   regra de mesma especificidade escrita antes não valeria nada). */
@media (max-width: 1279px) {
  .light-card--largo { grid-column: auto; }
}

/* ==========================================================================
   Produtos: cada um como uma peça da campanha, na horizontal
   Como no slide "sistema visual" do KV: a arte das PSDs (fundo branco, grade,
   quadrado de cor, cenário e persona) à esquerda; no alto à direita o mote em
   dois pesos; embaixo, a caixa do programa em degraus sobreposta à persona.
   Os dois braços ficam numa coluna ao lado. Cores lidas nas artes finais:
   Mestrado: caixa #DEE2ED, subcaixa #7D7D7D, barra #242424, mote #7D7D7D/#2F2F31
   Doutorado: caixa #F6A74B, subcaixa #F7E4D3, barra #020202, mote #F6A74B/#000
   ========================================================================== */

.produtos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.produto {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
}

/* a peça: imagem, mote e caixa no mesmo quadro; tamanhos pelo largura dela */
.produto__arte {
  container: peca / inline-size;
  display: grid;
  isolation: isolate;
}
.produto__arte > img,
.produto__arte > .selo-produto,
.produto__arte > .produto__mote { grid-area: 1 / 1; }
.produto__arte img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

.produto__mote {
  z-index: 1;
  align-self: start;
  justify-self: end;
  width: 46%;
  margin: 7cqi 5cqi 0 0;
  font-weight: 700;
  font-size: clamp(11px, 2.75cqi, 24px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-align: right;
  text-transform: uppercase;
  color: var(--mote-2);
}
.produto__mote span { color: var(--mote-1); }

/* a caixa do programa, como na peça: nome em Montserrat Bold, tipo em Poppins
   espaçado, subcaixa com a área deslocada e a barra escura atrás */
.selo-produto {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 4cqi 6cqi 0;
}
/* a barra escura presa à subcaixa da área (que tem o mesmo texto nas duas
   peças), com medidas pela largura da peça: sai igual no Mestrado e no
   Doutorado, aparecendo só como um degrau à direita e embaixo */
.selo-produto__area { position: relative; }
.selo-produto__area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -5cqi;
  right: -1.6cqi;
  bottom: -1.6cqi;
  left: 3cqi;
  background: var(--barra);
}
.selo-produto__principal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 3.2cqi;
  padding: 1.6cqi 2.6cqi 1.4cqi 4cqi;
  background: var(--caixa);
  line-height: 1;
}
.selo-produto__nome {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: clamp(20px, 6cqi, 46px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--caixa-texto);
}
.selo-produto__tipo {
  margin-top: 0.9cqi;
  white-space: nowrap;
  font-size: clamp(7px, 1.55cqi, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--caixa-texto);
}
.selo-produto__area {
  padding: 1.4cqi 2.6cqi 1.4cqi 4.6cqi;
  background: var(--subcaixa);
  font-size: clamp(9px, 1.95cqi, 16px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: right;
  color: var(--subcaixa-texto);
}

.produto--mestrado {
  --caixa: #dee2ed;
  --caixa-texto: #7d7d7d;
  --subcaixa: #7d7d7d;
  --subcaixa-texto: #e8eaf1;
  --barra: #242424;
  --mote-1: #7d7d7d;
  --mote-2: #2f2f31;
  --tag: #7d7d7d;
  --tag-texto: #fff;
}
.produto--doutorado {
  --caixa: #f6a74b;
  --caixa-texto: #000;
  --subcaixa: #f7e4d3;
  --subcaixa-texto: #000;
  --barra: #020202;
  --mote-1: #f6a74b;
  --mote-2: #000;
  --tag: #f6a74b;
  --tag-texto: #000;
}

/* os dois braços */
.produto__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px 32px;
  border-top: 1px solid #e4e4e8;
}

.produto__bracos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.braco {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #55555a;
  font-size: 14px;
  line-height: 1.6;
}

/* "Acadêmico" / "Profissional": as caixinhas retas do slide "Duas frentes" */
.braco h3 {
  align-self: flex-start;
  padding: 5px 12px 4px;
  background: var(--tag);
  color: var(--tag-texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.braco__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 2px solid var(--tag);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

/* desktop: a peça à esquerda e os braços em coluna à direita, uma faixa
   embaixo da outra (pedido do Wilton: "2 linhas horizontais") */
@media (min-width: 1024px) {
  .produto {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
  .produto__texto {
    padding: 36px 40px;
    border-top: 0;
    border-left: 1px solid #e4e4e8;
  }
  .produto__bracos { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* celular: o mote sai de cima da foto e vai para baixo dela */
@container peca (max-width: 519px) {
  .produto__arte > .produto__mote {
    grid-area: 2 / 1;
    justify-self: stretch;
    width: auto;
    margin: 0;
    padding: 22px 22px 0;
    font-size: 19px;
    text-align: left;
  }
}

@media (max-width: 759px) {
  .produto__texto { padding: 22px 22px 26px; border-top: 0; }
  .produto__bracos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- Topo com o texto do post da campanha ---------- */

.hero__gancho {
  max-width: 600px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero__professor {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--muted);
}
.hero__professor strong { color: #fff; font-weight: 600; }
.hero__professor-inicial {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kv-lilas);
  font-family: var(--font-marca);
  font-size: 16px;
  font-weight: 700;
  color: var(--kv-cinza);
}

@media (max-width: 759px) {
  .hero__gancho { font-size: 20px; }
}

/* ==========================================================================
   Linhas de pesquisa: dois boxes só com traçado, Mestrado e Doutorado
   ========================================================================== */

.linhas-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.linhas-box {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 34px 36px 36px;
  border: 1px solid #cfcfd5;
  border-radius: 18px;
}

/* a chamada de cada box: o nome do programa como na caixa das peças */
.linhas-box__titulo {
  align-self: flex-start;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--kv-cinza);
  font-family: var(--font-marca);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--kv-cinza);
}
.linhas-box--doutorado .linhas-box__titulo {
  border-bottom-color: var(--kv-laranja);
  color: #000;
}

/* "Acadêmico" / "Profissional": a caixinha reta das peças + quantas linhas */
.linhas-box__braco {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted-2);
  font-size: 13px;
}
.linhas-box__braco span {
  padding: 5px 12px 4px;
  background: var(--tag);
  color: var(--tag-texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.linhas-box--mestrado {
  --tag: #7d7d7d;
  --tag-texto: #fff;
  --chip-fundo: #e8eaf1;
  --chip-icone: #5c5c61;
  --chip-borda: #7d7d7d;
}
.linhas-box--doutorado {
  --tag: #f6a74b;
  --tag-texto: #000;
  --chip-fundo: #f6e4d3;
  --chip-icone: #b8650c;
  --chip-borda: #f6a74b;
}

/* cada linha de pesquisa num chip com ícone */
.icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 18px 7px 7px;
  border: 1px solid #dcdce2;
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: translate 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.chip svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--chip-fundo);
  color: var(--chip-icone);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (any-hover: hover) {
  .chip:hover {
    translate: 0 -3px;
    border-color: var(--chip-borda);
    box-shadow: 0 12px 24px rgba(22, 22, 22, 0.08);
  }
}

/* ==========================================================================
   Como participar: 4 quadrados, sobem e ganham sombra ao passar o mouse
   ========================================================================== */

.passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.passo {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  transition: translate 0.35s cubic-bezier(0.2, 0.715, 0.205, 0.99), box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.passo span {
  font-family: var(--font-marca);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--kv-lilas-forte);
}
.passo:nth-child(even) span { color: var(--kv-laranja); }
.passo h3 {
  margin-top: auto;
  margin-bottom: 8px;
  font-size: 18px;
}
.passo p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* translate (e não transform) para não brigar com a entrada dos blocos */
@media (any-hover: hover) {
  .passo:hover {
    translate: 0 -10px;
    border-color: rgba(246, 167, 75, 0.6);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(246, 167, 75, 0.15);
  }
}

@media (max-width: 1279px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo { aspect-ratio: auto; min-height: 220px; }
}

@media (max-width: 1023px) {
  .linhas-boxes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 759px) {
  .linhas-box { padding: 26px 22px 24px; }
  .linhas-box__titulo { font-size: 24px; }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .passo { min-height: 0; gap: 0; }
  .passo h3 { margin-top: 26px; }
}

/* as próximas masterclasses: uma por linha no celular */
@media (max-width: 759px) {
  .proximas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .proxima { padding: 16px 18px 18px; }
}
/* ==========================================================================
   Só o topo em preto (pedido do Wilton, 16/10): daí para baixo as seções
   alternam branco e cinza claro. O rodapé segue escuro, como nas outras LPs.
   ========================================================================== */

.section--branca,
.faq-section.section--branca { background: #fff; }
.process-section.section--light,
.cta-section.section--light { background: var(--light); }

/* produtos: cartão branco sobre o cinza, com fio para não sumir */
.section--light .produto { outline: 1px solid #e2e2e7; }

/* CAPES traçado no claro */
.section--light .capes { border-color: #cfcfd5; color: var(--ink); }
.section--light .capes__texto { color: var(--texto-claro); }

/* os 4 quadrados: brancos sobre o cinza, sombra leve ao passar o mouse */
.section--light .passo {
  border-color: #dcdce2;
  background: #fff;
}
.section--light .passo span { color: var(--kv-cinza); }
.section--light .passo:nth-child(even) span { color: #e38f2f; }
.section--light .passo p { color: var(--texto-claro); }
@media (any-hover: hover) {
  .section--light .passo:hover {
    border-color: rgba(227, 143, 47, 0.7);
    background: #fff;
    box-shadow: 0 24px 46px rgba(22, 22, 22, 0.12), 0 0 0 1px rgba(246, 167, 75, 0.2);
  }
}

/* próximo passo: painel branco traçado */
.section--light .cta-panel {
  border-color: #d6d6dc;
  background: #fff;
}
.section--light .cta-panel p:last-child { color: var(--texto-claro); }

/* Como participar: número grande e apagado, título logo abaixo dele
   (pedido do Wilton, 16/10); ao passar o mouse o número acende no laranja */
.section--light .passo span,
.section--light .passo:nth-child(even) span {
  font-size: 88px;
  letter-spacing: -0.04em;
  color: #dedee3;
  transition: color 0.35s ease;
}
.section--light .passo h3 { margin-top: 18px; }
@media (any-hover: hover) {
  .section--light .passo:hover span { color: var(--kv-laranja); }
}
@media (max-width: 759px) {
  .section--light .passo span,
  .section--light .passo:nth-child(even) span { font-size: 64px; }
  .section--light .passo h3 { margin-top: 12px; }
}

/* Agenda: sombra mais curta ao passar o mouse, para não cair sobre os cartões
   de baixo, e o mesmo efeito nas próximas masterclasses (pedido de 16/10) */
.agenda { gap: 22px; }
.proxima {
  transition: translate 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (any-hover: hover) {
  a.evento:hover {
    border-color: #bfbfc6;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(22, 22, 22, 0.1);
  }
  .proxima:hover {
    translate: 0 -3px;
    border-color: #bfbfc6;
    box-shadow: 0 10px 22px rgba(22, 22, 22, 0.1);
  }
}

/* ao passar o mouse numa das próximas, "Em produção" dá lugar a um botão
   apagado "Em breve" (ainda sem inscrição) */
.proxima { position: relative; }
.proxima__status { transition: opacity 0.3s ease; }
.proxima__botao {
  position: absolute;
  top: 11px;
  right: 14px;
  padding: 7px 16px;
  border-radius: 8px;
  background: #ececf0;
  color: #9a9aa0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.3s ease;
}
@media (any-hover: hover) {
  .proxima:hover .proxima__botao { opacity: 1; translate: 0 0; }
  .proxima:hover .proxima__status { opacity: 0; }
}

/* com a entrada dos blocos ligada, a transição dela cobria a do mouse: aqui
   as duas convivem, e só a entrada espera o atraso do grupo */
html.motion-enabled .passo[data-reveal],
html.motion-enabled .proxima[data-reveal],
html.motion-enabled .linhas-box[data-reveal] {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.35s cubic-bezier(0.2, 0.715, 0.205, 0.99),
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* ==========================================================================
   Topo (pedido de 16/10): texto grande "Masterclass / Mestrado / Doutorado"
   à esquerda, os textos à direita e a data numa barra horizontal embaixo
   ========================================================================== */

.hero__layout {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "marca copy"
    "barra barra";
  gap: 64px 72px;
}
/* o bloco tem a largura do "MASTERCLASS": as duas caixas seguem a palavra */
.hero__marca { grid-area: marca; justify-self: start; width: fit-content; max-width: 100%; }
/* o texto da direita encostado no fim do grid */
.hero__copy { grid-area: copy; justify-self: end; width: min(100%, 500px); }

/* "MASTERCLASS" ocupa a largura da coluna, no degradê do KV */
.hero__marca-titulo {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: var(--kv-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mestrado e Doutorado: duas caixas de vidro, como botões */
.hero__programas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.programa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: translate 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.programa__cor {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--programa-cor);
}
.programa--mestrado { --programa-cor: #dde0ea; }
.programa--doutorado { --programa-cor: var(--kv-laranja); }
.programa__seta {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  fill: none;
  stroke: var(--programa-cor);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.3s ease;
}
@media (any-hover: hover) {
  .programa:hover {
    translate: 0 -3px;
    border-color: var(--programa-cor);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  }
  .programa:hover .programa__seta { translate: 2px 2px; }
}
@media (max-width: 1279px) {
  .programa__seta { display: none; }
}
@media (max-width: 759px) {
  .programa { gap: 10px; padding: 14px; font-size: 13px; letter-spacing: 0.06em; }
}

/* o botão leva ao programa: o cabeçalho fixo não pode cobrir o topo dele */
.produto { scroll-margin-top: 100px; }

/* à direita, título e subtítulo menores e com mais ar (pedido de 16/10) */
.hero { padding: 120px 0; }
.hero__layout { row-gap: 96px; }
.hero__copy { gap: 22px; }
.hero h1 { font-size: 44px; line-height: 1.15; }
.hero .hero__gancho { max-width: 470px; font-size: 19px; line-height: 1.6; }

/* a barra da inscrição: vidro, data | dados | botão */
.hero__barra {
  grid-area: barra;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 22px 24px 22px 34px;
  border: 1px solid rgba(232, 234, 241, 0.28);
  border-radius: 22px;
  background: rgba(22, 22, 22, 0.66);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
.hero__barra-data {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}
.hero__barra-dia {
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.05em;
}
.hero__barra-mes {
  font-size: 18px;
  font-weight: 600;
  color: var(--kv-lilas-forte);
}
.hero__barra-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero__barra-lista > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 20px;
  border-left: 1px solid var(--line);
}
.hero__barra-lista dt { color: var(--muted); font-size: 12px; }
.hero__barra-lista dd { font-size: 15px; font-weight: 600; }
.hero__barra .button { padding-inline: 38px; white-space: nowrap; }

@media (max-width: 1279px) {
  .hero__barra {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px 32px;
  }
  .hero__barra .button { grid-column: 1 / -1; }
  .hero h1 { font-size: 40px; }
  .hero { padding: 96px 0; }
  .hero__layout { row-gap: 72px; }
}

@media (max-width: 1023px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marca" "copy" "barra";
    gap: 40px;
  }
  .hero__copy { justify-self: stretch; width: auto; }
  .hero__barra-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .hero__marca-titulo { font-size: 9.4vw; }
}

@media (max-width: 759px) {
  .hero h1 { font-size: 34px; }
  .hero__marca-titulo { font-size: 11.4vw; }
  .hero .hero__gancho { font-size: 17px; }
  .hero { padding: 56px 0 64px; }
  .hero__layout { row-gap: 44px; }
  .hero__barra {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
  }
  .hero__barra-dia { font-size: 56px; }
  .hero__barra-lista > div { padding: 2px 14px; }
}

/* produtos: sem o fio em volta; ao passar o mouse sobem com sombra */
.section--light .produto { outline: 0; }
html.motion-enabled .produto[data-reveal] {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.35s cubic-bezier(0.2, 0.715, 0.205, 0.99),
    box-shadow 0.35s ease;
}
.produto { transition: translate 0.35s cubic-bezier(0.2, 0.715, 0.205, 0.99), box-shadow 0.35s ease; }
@media (any-hover: hover) {
  .produto:hover {
    translate: 0 -6px;
    box-shadow: 0 22px 44px rgba(22, 22, 22, 0.12);
  }
}

/* botão da barra do topo: cinza, com duas luzes laranja bem difusas (grandes,
   fracas e desfocadas) andando por caminhos e tempos diferentes, subindo,
   descendo e voltando, para o movimento não parecer regular (pedido de
   16/10). Só CSS; com movimento reduzido ficam paradas */
.hero__barra .button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #e8eaf1;
}
.hero__barra .button::before,
.hero__barra .button::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hero__barra .button::before {
  top: -95%;
  left: -15%;
  width: 120%;
  height: 290%;
  background: radial-gradient(closest-side, rgba(246, 167, 75, 0.7) 0%, rgba(246, 167, 75, 0.32) 50%, rgba(246, 167, 75, 0) 100%);
  filter: blur(20px);
  animation-name: botao-luz-1;
  animation-duration: 9s;
}
.hero__barra .button::after {
  top: -80%;
  left: 10%;
  width: 90%;
  height: 260%;
  background: radial-gradient(closest-side, rgba(255, 196, 110, 0.55) 0%, rgba(255, 196, 110, 0.22) 55%, rgba(255, 196, 110, 0) 100%);
  filter: blur(22px);
  animation-name: botao-luz-2;
  animation-duration: 13s;
}
@keyframes botao-luz-1 {
  0%, 100% { transform: translate(-75%, 12%) scale(1); }
  22% { transform: translate(-25%, -16%) scale(1.15); }
  45% { transform: translate(30%, 14%) scale(0.92); }
  63% { transform: translate(62%, -12%) scale(1.08); }
  82% { transform: translate(5%, 18%) scale(1); }
}
@keyframes botao-luz-2 {
  0%, 100% { transform: translate(90%, -10%) scale(0.95); }
  30% { transform: translate(35%, 16%) scale(1.12); }
  55% { transform: translate(-40%, -14%) scale(1); }
  78% { transform: translate(-95%, 10%) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__barra .button::before,
  .hero__barra .button::after { animation: none; }
}

/* ==========================================================================
   Produtos, coluna da direita (pedido de 16/10: "mais moderno", "botões
   elegantes e efeitos", "efeitos modernos e de glass"): luz suave na cor do
   programa ao fundo e os dois braços em cartões de vidro, cada um com a
   duração e o formato em selos e o botão para a página do curso
   ========================================================================== */

.produto__mote { width: auto; }

.produto__texto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  border: 0;
  background: #fafafb;
}
.produto__texto::before,
.produto__texto::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.produto__texto::before {
  top: -110px;
  right: -90px;
  width: 360px;
  height: 360px;
  background: var(--luz-1);
}
.produto__texto::after {
  bottom: -140px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: var(--luz-2);
}
.produto--mestrado { --luz-1: rgba(176, 182, 204, 0.55); --luz-2: rgba(125, 125, 125, 0.22); }
.produto--doutorado { --luz-1: rgba(246, 167, 75, 0.42); --luz-2: rgba(246, 228, 211, 0.95); }

.produto__bracos { gap: 16px; }

.braco {
  gap: 14px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: translate 0.35s cubic-bezier(0.2, 0.715, 0.205, 0.99), box-shadow 0.35s ease, border-color 0.35s ease;
}
@media (any-hover: hover) {
  .braco:hover {
    translate: 0 -4px;
    border-color: var(--tag);
    box-shadow: 0 18px 40px rgba(22, 22, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

.braco__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.braco h3 { border-radius: 999px; }

.braco__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.braco__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
}
.braco__meta svg,
.braco__seta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* botão do curso: pílula escura com a seta num círculo da cor do programa */
.braco__botao {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.braco__seta {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tag);
  color: var(--tag-texto);
  transition: rotate 0.3s ease;
}
.braco__botao:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (any-hover: hover) {
  .braco__botao:hover {
    translate: 0 -2px;
    box-shadow: 0 10px 22px rgba(22, 22, 22, 0.22);
  }
  .braco__botao:hover .braco__seta { rotate: 45deg; }
}

/* desktop: a foto preenche a altura da faixa, sem sobrar branco embaixo */
@media (min-width: 1024px) {
  .produto__texto { padding: 30px; border-left: 0; }
  .produto__arte { grid-template-rows: minmax(0, 1fr); }
  .produto__arte img {
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
  }
}

@media (max-width: 759px) {
  .produto__texto { padding: 18px; }
  .braco { padding: 18px 16px 16px; }
}

/* passos: o texto de apoio desce para o pé do quadrado, alinhado nos quatro
   (bloco de três linhas em todos, então começa na mesma altura) */
.section--light .passo p {
  margin-top: auto;
  min-height: calc(3 * 1.55em);
}
@media (max-width: 759px) {
  .section--light .passo p { margin-top: 0; min-height: 0; }
}

/* lado a lado (tablet), os botões dos dois braços ficam na mesma linha */
.braco__botao { margin-top: auto; }

/* o fundo da coluna da direita vale para o cartão inteiro (pedido de 16/10):
   a arte entra em multiply, então o branco dela some nesse fundo e as luzes
   aparecem por trás do mote. Sombra leve no lugar do fio */
.produto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fafafb;
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.05);
}
.produto::before,
.produto::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.produto::before {
  top: -140px;
  right: -100px;
  width: 460px;
  height: 460px;
  background: var(--luz-1);
}
.produto::after {
  top: -170px;
  left: 36%;
  width: 380px;
  height: 380px;
  background: var(--luz-2);
}
.produto__texto { overflow: visible; background: transparent; }
.produto__texto::before,
.produto__texto::after { content: none; }
.produto__arte { isolation: auto; }
.produto__arte img { mix-blend-mode: multiply; }

/* ==========================================================================
   Nome do programa num cartão de vidro, como os cards da direita (pedido de
   16/10: "tirar o nome de mestrado do jeito que está e colocar do jeito que
   vc fez o texto"). Sai a caixa em degrau com a barra preta
   ========================================================================== */

.selo-produto {
  align-items: flex-start;
  gap: 1.3cqi;
  margin: 0 4cqi 5cqi 0;
  padding: 2.4cqi 3.2cqi 2.2cqi 2.8cqi;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 40px rgba(22, 22, 22, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.selo-produto__area::before { content: none; }

.selo-produto__principal {
  align-items: flex-start;
  margin: 0;
  padding: 0;
  background: none;
}
.selo-produto__nome {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  font-size: clamp(20px, 5cqi, 40px);
  color: var(--nome-cor);
}
/* o quadradinho da cor do programa, como nas caixas do topo */
.selo-produto__nome::before {
  content: "";
  flex: none;
  width: 0.2em;
  height: 0.2em;
  min-width: 6px;
  min-height: 6px;
  background: var(--tag);
}
.selo-produto__tipo {
  margin-top: 1cqi;
  color: #6e6e74;
}
.selo-produto__area {
  width: 100%;
  padding: 1.3cqi 0 0;
  border-top: 1px solid rgba(22, 22, 22, 0.1);
  background: none;
  color: #45454a;
  text-align: left;
}
.produto--mestrado { --nome-cor: #2f2f31; }
.produto--doutorado { --nome-cor: #000; }

/* ==========================================================================
   Linhas de pesquisa no padrão novo da página (pedido de 16/10: "fora do
   padrão do site"): o mesmo cartão claro com luz na cor do programa dos
   produtos, nome com o quadradinho de cor e cada braço num painel de vidro
   ========================================================================== */

.linhas-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 18px;
  padding: 34px;
  border: 0;
  border-radius: 0;
  background: #fafafb;
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06);
}
.linhas-box::before,
.linhas-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.linhas-box::before {
  top: -150px;
  right: -110px;
  width: 440px;
  height: 440px;
  background: var(--luz-1);
}
.linhas-box::after {
  bottom: -170px;
  left: -120px;
  width: 380px;
  height: 380px;
  background: var(--luz-2);
}
.linhas-box--mestrado { --luz-1: rgba(176, 182, 204, 0.55); --luz-2: rgba(125, 125, 125, 0.18); --nome-cor: #2f2f31; }
.linhas-box--doutorado { --luz-1: rgba(246, 167, 75, 0.4); --luz-2: rgba(246, 228, 211, 0.95); --nome-cor: #000; }

.linhas-box__titulo,
.linhas-box--doutorado .linhas-box__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--nome-cor);
}
.linhas-box__titulo::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--tag);
}

.linhas-box__grupo {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: translate 0.35s cubic-bezier(0.2, 0.715, 0.205, 0.99), box-shadow 0.35s ease, border-color 0.35s ease;
}
@media (any-hover: hover) {
  .linhas-box__grupo:hover {
    translate: 0 -4px;
    border-color: var(--tag);
    box-shadow: 0 18px 40px rgba(22, 22, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}
.linhas-box__braco span { border-radius: 999px; }
.chip {
  border-color: rgba(22, 22, 22, 0.08);
  background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 759px) {
  .linhas-box { padding: 22px 18px; }
  .linhas-box__grupo { padding: 16px; }
}

/* o mote mora dentro do cartão de vidro, embaixo da área (pedido de 16/10),
   e o cartão cresce */
.selo-produto {
  gap: 1.5cqi;
  padding: 3cqi 3.6cqi 2.8cqi 3.2cqi;
}
.selo-produto .produto__mote {
  z-index: auto;
  align-self: stretch;
  justify-self: auto;
  width: auto;
  margin: 0;
  padding: 1.5cqi 0 0;
  border-top: 1px solid rgba(22, 22, 22, 0.1);
  font-size: clamp(12px, 2.1cqi, 18px);
  line-height: 1.2;
  text-align: left;
}

/* peça estreita (celular): o cartão sai de cima da foto e fica embaixo dela,
   subindo um pouco sobre a borda */
@container peca (max-width: 519px) {
  .produto__arte > .selo-produto {
    grid-area: 2 / 1;
    justify-self: stretch;
    margin: -34px 14px 0;
    padding: 16px 18px;
    gap: 10px;
  }
  .selo-produto__nome { font-size: 26px; }
  .selo-produto__tipo { font-size: 10px; }
  .selo-produto__area { padding-top: 10px; font-size: 13px; }
  .selo-produto .produto__mote { padding-top: 10px; font-size: 16px; }
}

/* peça estreita: foto um pouco mais alta, cortando o branco da direita */
@container peca (max-width: 519px) {
  .produto__arte > img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 12% 0;
  }
}

/* ==========================================================================
   Agenda no padrão novo (pedido de 16/10: "faça algo similar com cores e
   efeito nessa seção, ela está muito simples"): painel claro com as luzes
   do Mestrado (lilás) e do Doutorado (laranja), a masterclass aberta e as
   próximas em cartões de vidro, números no degradê, ponto pulsando nas
   inscrições abertas e o mesmo botão com luz do topo
   ========================================================================== */

.agenda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  background: #fafafb;
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06);
}
.agenda::before,
.agenda::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.agenda::before {
  top: -200px;
  left: -140px;
  width: 560px;
  height: 480px;
  background: rgba(176, 182, 204, 0.6);
}
.agenda::after {
  right: -160px;
  bottom: -220px;
  width: 620px;
  height: 500px;
  background: rgba(246, 167, 75, 0.38);
}

.evento,
.proxima {
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@media (any-hover: hover) {
  a.evento:hover,
  .proxima:hover {
    border-color: rgba(246, 167, 75, 0.6);
    box-shadow: 0 18px 40px rgba(22, 22, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

/* monograma do professor no degradê lilás → creme */
.evento__foto--inicial { background: linear-gradient(135deg, #e8eaf1 0%, #f6e4d3 100%); }
.evento__foto--inicial span { color: #5c5c61; }

/* "Inscrições abertas" com um ponto laranja pulsando */
.evento__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.evento__rotulo::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kv-laranja);
  box-shadow: 0 0 0 0 rgba(246, 167, 75, 0.6);
  animation: ponto-pulsa 2s ease-out infinite;
}
@keyframes ponto-pulsa {
  0% { box-shadow: 0 0 0 0 rgba(246, 167, 75, 0.6); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(246, 167, 75, 0); }
}

/* "Em produção": ponto cinza parado */
.proxima__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.proxima__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b4b4ba;
}

/* data da aberta em vidro, números no degradê */
.evento__data {
  border-color: rgba(22, 22, 22, 0.08);
  background: rgba(255, 255, 255, 0.7);
}
.evento__dia,
.proxima__data {
  background: var(--kv-degrade-escuro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proxima__data span { color: var(--kv-cinza); }

/* o botão da box: cinza com as luzes laranja difusas, como o do topo */
.evento__botao {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #e8eaf1;
}
.evento__botao::before,
.evento__botao::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.evento__botao::before {
  top: -95%;
  left: -15%;
  width: 120%;
  height: 290%;
  background: radial-gradient(closest-side, rgba(246, 167, 75, 0.7) 0%, rgba(246, 167, 75, 0.32) 50%, rgba(246, 167, 75, 0) 100%);
  filter: blur(20px);
  animation-name: botao-luz-1;
  animation-duration: 10s;
}
.evento__botao::after {
  top: -80%;
  left: 10%;
  width: 90%;
  height: 260%;
  background: radial-gradient(closest-side, rgba(255, 196, 110, 0.55) 0%, rgba(255, 196, 110, 0.22) 55%, rgba(255, 196, 110, 0) 100%);
  filter: blur(22px);
  animation-name: botao-luz-2;
  animation-duration: 14s;
}
@media (prefers-reduced-motion: reduce) {
  .evento__rotulo::before,
  .evento__botao::before,
  .evento__botao::after { animation: none; }
}

@media (max-width: 759px) {
  .agenda { padding: 14px; }
}

/* desktop: o cartão do nome tem a altura dos dois cards da direita juntos
   (pedido de 16/10): os dois lados usam o mesmo respiro de 30 px em cima e
   embaixo, os cards da direita dividem a altura e o mote desce para o pé */
@media (min-width: 1024px) {
  .produto__texto { justify-content: stretch; padding: 30px; }
  .produto__bracos {
    flex: 1;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .produto__arte > .selo-produto {
    align-self: stretch;
    margin: 30px 4cqi 30px 0;
  }
  .selo-produto .produto__mote { margin-top: auto; }
}

/* com a pessoa no meio, o cartão do nome fica por cima dela: vidro mais
   opaco para o texto (cinza do mote) seguir legível sobre o terno escuro */
.selo-produto { background: rgba(255, 255, 255, 0.74); }

/* os cartões do nome com a mesma largura no Mestrado e no Doutorado
   (medida pela palavra maior, "DOUTORADO") */
@container peca (min-width: 520px) {
  .produto__arte > .selo-produto { width: 46cqi; }
}

/* os painéis grandes arredondados, na família dos cartões de dentro
   (pedido de 16/10): produtos, agenda e linhas de pesquisa */
.produto,
.agenda,
.linhas-box { border-radius: 28px; }
@media (max-width: 759px) {
  .produto,
  .agenda,
  .linhas-box { border-radius: 22px; }
}

/* ordem pedida (16/10): nome à esquerda > pessoa no meio > detalhes à direita */
@container peca (min-width: 520px) {
  .produto__arte > .selo-produto {
    align-self: center;
    justify-self: start;
    margin: 0 0 0 4cqi;
  }
}
@media (min-width: 1024px) {
  .produto__arte > .selo-produto {
    align-self: stretch;
    margin: 30px 0 30px 30px;
  }
  .produto__arte img { object-position: 70% 0; }
}
@container peca (max-width: 519px) {
  .produto__arte > img { object-position: 100% 0; }
}

/* Agenda, segunda versão (pedido de 16/10: "ficou ruim"): sem o painel em
   volta (caixa dentro de caixa); as luzes ficam soltas no fundo da seção e
   os cartões de vidro flutuam sobre elas. Botão em pílula preta com a seta
   laranja, como o "Conheça o programa"; monograma no degradê do KV */
.agenda {
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.agenda::before,
.agenda::after { content: none; }

#agenda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#agenda::before,
#agenda::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
#agenda::before {
  top: 34%;
  left: -6%;
  width: 46%;
  height: 420px;
  background: rgba(176, 182, 204, 0.55);
}
#agenda::after {
  right: -4%;
  bottom: -60px;
  width: 50%;
  height: 420px;
  background: rgba(246, 167, 75, 0.32);
}

.evento__foto--inicial { background: linear-gradient(135deg, #dde0ea 0%, #f6a74b 100%); }
.evento__foto--inicial span { color: #fff; }

.evento { --tag: var(--kv-laranja); --tag-texto: #000; }
.evento__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 15px;
  text-align: left;
}
.evento__botao::before,
.evento__botao::after { content: none; }
.evento__botao .braco__seta { width: 36px; height: 36px; }
@media (any-hover: hover) {
  a.evento:hover .braco__seta { rotate: 45deg; }
}

/* botão do topo, terceira versão (pedido de 16/10): preto; passa um brilho
   amarelo difuso, ele some e vem um cinza, alternando, com o caminho subindo
   e descendo. Só CSS; com movimento reduzido fica só o preto */
.hero__barra .button {
  background: #161616;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.hero__barra .button::before,
.hero__barra .button::after {
  top: -95%;
  left: -10%;
  width: 120%;
  height: 290%;
  filter: blur(20px);
  opacity: 0;
  animation-name: botao-passa;
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hero__barra .button::before {
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.8) 0%, rgba(246, 167, 75, 0.38) 50%, rgba(246, 167, 75, 0) 100%);
  animation-delay: 0s;
}
.hero__barra .button::after {
  background: radial-gradient(closest-side, rgba(221, 224, 234, 0.6) 0%, rgba(221, 224, 234, 0.24) 50%, rgba(221, 224, 234, 0) 100%);
  animation-delay: 4.5s;
}
@keyframes botao-passa {
  0% { transform: translate(-85%, 14%) scale(1); opacity: 0; }
  8% { opacity: 1; }
  24% { transform: translate(-15%, -16%) scale(1.15); }
  38% { transform: translate(45%, 12%) scale(0.95); opacity: 1; }
  50%, 100% { transform: translate(90%, -8%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__barra .button::before,
  .hero__barra .button::after { animation: none; opacity: 0; }
}

/* Linhas, segunda versão (pedido de 16/10: "essa cor não tá boa"): como na
   agenda, sem o painel em volta; luzes leves soltas no fundo da seção
   (lilás atrás do Mestrado, pêssego atrás do Doutorado) e os painéis de
   vidro por cima */
.linhas-box,
.linhas-box:hover {
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.linhas-box::before,
.linhas-box::after { content: none; }

#linhas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#linhas::before,
#linhas::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
#linhas::before {
  top: 38%;
  left: -4%;
  width: 48%;
  height: 460px;
  background: rgba(196, 201, 220, 0.5);
}
#linhas::after {
  top: 38%;
  right: -4%;
  width: 48%;
  height: 460px;
  background: rgba(247, 200, 150, 0.4);
}
.linhas-boxes { gap: 32px; }
.linhas-box__grupo { background: rgba(255, 255, 255, 0.62); }

@media (max-width: 1023px) {
  #linhas::before { top: 22%; width: 90%; height: 520px; }
  #linhas::after { top: 62%; width: 90%; height: 520px; }
}

/* Agenda e linhas, terceira versão (pedido de 16/10: "nem aqui de fundo"):
   sem as luzes coloridas no fundo branco; cartões brancos com fio bem leve
   e sombra suave. A cor fica nos detalhes (etiquetas, números, ícones,
   ponto pulsando, monograma) */
#agenda::before,
#agenda::after,
#linhas::before,
#linhas::after { content: none; }

.evento,
.proxima,
.linhas-box__grupo {
  border: 1px solid #ececf0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06);
}
@media (any-hover: hover) {
  a.evento:hover,
  .proxima:hover,
  .linhas-box__grupo:hover {
    border-color: rgba(246, 167, 75, 0.6);
    box-shadow: 0 18px 40px rgba(22, 22, 22, 0.1);
  }
  .linhas-box--mestrado .linhas-box__grupo:hover { border-color: #b9bcc8; }
}
.evento__data { background: #fafafb; border-color: #ececf0; }

/* botão do topo: fio branco para ele não sumir no preto quando não há luz
   passando (as luzes ficam dentro do fio, que não é cortado) */
.hero__barra .button { border: 1px solid rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   Luz dentro dos cartões, em movimento (pedidos de 16/10: "coloque a cor
   desses box em movimento de fundo" e "tá muito brancão sem graça"): a mesma
   luz do cartão de produto (fundo #FAFAFB com luz no canto) entra na agenda e
   nas linhas, sempre DENTRO do cartão, e todas derivam devagar
   ========================================================================== */

@keyframes luz-deriva-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, 36px) scale(1.12); }
  66% { transform: translate(34px, -24px) scale(0.92); }
}
@keyframes luz-deriva-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(60px, -34px) scale(1.1); }
  75% { transform: translate(-36px, 22px) scale(0.95); }
}

.produto::before { animation: luz-deriva-1 16s ease-in-out infinite; }
.produto::after { animation: luz-deriva-2 21s ease-in-out infinite; }

/* agenda: a aberta com laranja e lilás; as próximas com uma luz cada */
.evento,
.proxima,
.linhas-box__grupo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fafafb;
}
.evento::before,
.evento::after,
.proxima::before,
.linhas-box__grupo::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.evento::before {
  top: -160px;
  right: -60px;
  width: 520px;
  height: 340px;
  background: rgba(246, 167, 75, 0.38);
  animation: luz-deriva-1 16s ease-in-out infinite;
}
.evento::after {
  bottom: -170px;
  left: -80px;
  width: 460px;
  height: 320px;
  background: rgba(176, 182, 204, 0.5);
  animation: luz-deriva-2 21s ease-in-out infinite;
}
.proxima::before {
  top: -120px;
  right: -80px;
  width: 300px;
  height: 220px;
  background: var(--luz-proxima);
  animation: luz-deriva-2 18s ease-in-out infinite;
}
.proxima:nth-child(1) { --luz-proxima: rgba(176, 182, 204, 0.55); }
.proxima:nth-child(2) { --luz-proxima: rgba(246, 205, 160, 0.55); }
.proxima:nth-child(3) { --luz-proxima: rgba(246, 167, 75, 0.38); }
.proxima:nth-child(2)::before { animation-delay: -6s; }
.proxima:nth-child(3)::before { animation-delay: -12s; }

/* linhas: luz da cor do programa no canto de cada braço */
.linhas-box__grupo::before {
  top: -150px;
  right: -90px;
  width: 420px;
  height: 280px;
  background: var(--luz-1);
  animation: luz-deriva-1 17s ease-in-out infinite;
}
.linhas-box__grupo + .linhas-box__grupo::before { animation-delay: -8s; }
.linhas-box--mestrado { --luz-1: rgba(176, 182, 204, 0.55); }
.linhas-box--doutorado { --luz-1: rgba(246, 167, 75, 0.36); }

/* o que fica por cima da luz: um pouco de vidro para não chapar */
.evento__data,
.chip,
.braco__meta li { background: rgba(255, 255, 255, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .produto::before,
  .produto::after,
  .evento::before,
  .evento::after,
  .proxima::before,
  .linhas-box__grupo::before { animation: none; }
}

/* fio do botão igual ao da barra em volta (pedido de 16/10) */
.hero__barra .button { border-color: rgba(232, 234, 241, 0.28); }

/* ==========================================================================
   Agenda e linhas, quarta versão (pedido de 16/10: "ficou ruim"): sem as
   manchas de luz nos cartões pequenos (o cinza virava borrão); no lugar, um
   degradê contínuo e claro que desliza devagar. Os produtos seguem com a luz
   que ele aprovou
   ========================================================================== */

.evento::before,
.evento::after,
.proxima::before,
.linhas-box__grupo::before { content: none; }

@keyframes degrade-desliza {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* a masterclass aberta: branco que esquenta para o creme do Doutorado */
.evento {
  background: linear-gradient(105deg, #fafafb 0%, #fafafb 38%, #fbeedf 70%, #f8dfc2 100%);
  background-size: 180% 100%;
  animation: degrade-desliza 12s ease-in-out infinite alternate;
}

/* as próximas: claras, com um fio do degradê do KV no topo */
.proxima { background: #fff; }
.proxima::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kv-degrade);
  opacity: 0.85;
}

/* linhas: branco que vai para o lilás (Mestrado) ou para o creme (Doutorado) */
.linhas-box__grupo {
  background: linear-gradient(105deg, #fafafb 0%, #fafafb 35%, var(--grupo-cor) 100%);
  background-size: 180% 100%;
  animation: degrade-desliza 14s ease-in-out infinite alternate;
}
.linhas-box__grupo + .linhas-box__grupo { animation-delay: -7s; }
.linhas-box--mestrado { --grupo-cor: #e6e9f2; }
.linhas-box--doutorado { --grupo-cor: #f9e3c9; }

@media (prefers-reduced-motion: reduce) {
  .evento,
  .linhas-box__grupo { animation: none; }
}

/* tons um pouco mais presentes e limpos (sem cinza "sujo") */
.evento { background-image: linear-gradient(105deg, #fafafb 0%, #fafafb 32%, #fbe6cf 68%, #f6cf9f 100%); }
.proxima { background: linear-gradient(180deg, #ffffff 0%, #fdf4ea 100%); }
.linhas-box--mestrado { --grupo-cor: #dfe4f3; }
.linhas-box--doutorado { --grupo-cor: #f7d8b4; }

/* barra do CAPES coerente com os cartões de produto (pedido de 16/10):
   arredondada, sem fio, sombra leve e o degradê do lilás do Mestrado ao
   creme do Doutorado deslizando devagar */
.section--light .capes {
  margin-top: 24px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(105deg, #e3e7f3 0%, #fafafb 40%, #fafafb 55%, #fbe6cf 82%, #f6cf9f 100%);
  background-size: 160% 100%;
  box-shadow: 0 10px 30px rgba(22, 22, 22, 0.05);
  animation: degrade-desliza 14s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .section--light .capes { animation: none; }
}
@media (max-width: 759px) {
  .section--light .capes { border-radius: 22px; }
}

/* o degradê começa mostrando o lado colorido (e fica nele com movimento
   reduzido), em vez de abrir no branco */
.evento,
.linhas-box__grupo,
.section--light .capes {
  background-position: 100% 50%;
  animation-direction: alternate-reverse;
}

/* CAPES: o texto no meio e a próxima turma num selo à direita, para a barra
   ficar preenchida (pedido de 16/10) */
.capes__texto { flex: 1; max-width: 560px; }
.capes__turma {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--texto-claro);
  font-size: 14px;
  white-space: nowrap;
}
.capes__turma b { color: var(--ink); font-weight: 600; }
.capes__turma svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #d9822b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1023px) {
  .section--light .capes { flex-wrap: wrap; }
  .capes__texto { flex-basis: 260px; }
}
@media (max-width: 759px) {
  .capes__texto { flex: none; }
  .capes__turma { margin-left: 0; white-space: normal; }
}

/* a box da masterclass aberta no mesmo estilo das próximas (pedido de
   16/10: "gostei mais do de baixo"): degradê vertical do branco ao creme e
   o fio do degradê do KV no topo, sem o deslize */
.evento {
  background: linear-gradient(180deg, #ffffff 0%, #fdf4ea 100%);
  animation: none;
}
.evento::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  border-radius: 0;
  background: var(--kv-degrade);
  filter: none;
  opacity: 0.85;
  animation: none;
}

/* linhas: mais respiro entre o cabeçalho da seção e os blocos, e entre o
   nome do programa e os cartões (pedido de 16/10: "agora tá colado") */
.linhas-boxes { margin-top: 72px; row-gap: 56px; }
.linhas-box { gap: 22px; }
@media (max-width: 759px) {
  .linhas-boxes { margin-top: 48px; row-gap: 44px; }
}

/* cartão do nome (pedido de 16/10: "tá colado demais" e "falta um
   destaque"): nome um pouco menor com mais margem, fundo no estilo dos
   cartões da agenda (branco até a cor do programa, fio do KV no topo) e o
   mote maior, como destaque do cartão */
.produto--mestrado { --selo-fundo: #eceff7; }
.produto--doutorado { --selo-fundo: #fcecd9; }
.produto__arte > .selo-produto {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.85) 45%, var(--selo-fundo) 100%);
}
.selo-produto::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kv-degrade);
  opacity: 0.85;
}
.selo-produto__nome { font-size: clamp(20px, 4.2cqi, 34px); }

@container peca (min-width: 520px) {
  .produto__arte > .selo-produto {
    gap: 1.6cqi;
    padding: 3.6cqi 3.4cqi 3.2cqi;
  }
  .selo-produto .produto__mote {
    padding-top: 2cqi;
    font-size: clamp(14px, 2.7cqi, 24px);
    line-height: 1.15;
  }
}

/* produtos: as duas luzes ficam do lado dos detalhes, longe da pessoa (a de
   cima no meio passava por trás do rosto e tingia a foto) */
.produto::after {
  top: auto;
  bottom: -180px;
  left: auto;
  right: 4%;
  width: 380px;
  height: 340px;
}
@media (min-width: 1024px) {
  .produto::before { right: -140px; }
}
@keyframes luz-deriva-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 30px) scale(1.08); }
  66% { transform: translate(20px, -20px) scale(0.94); }
}
@keyframes luz-deriva-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(30px, -26px) scale(1.06); }
  75% { transform: translate(-24px, 18px) scale(0.96); }
}

/* monograma do professor sem cor (pedido de 16/10): cinza neutro */
.evento__foto--inicial { background: #ececf0; }
.evento__foto--inicial span { color: #8a8a90; }

/* caixa da data da masterclass aberta: preta, com o mesmo brilho difuso do
   botão do topo passando devagar (amarelo, some, cinza), pedido de 16/10 */
.evento__data {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(232, 234, 241, 0.28);
  background: #161616;
}
.evento__dia {
  background: var(--kv-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.evento__mes { color: #fff; }
.evento__semana { color: var(--muted); }
.evento__data::before,
.evento__data::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -10%;
  width: 120%;
  height: 220%;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  animation: botao-passa 11s ease-in-out infinite;
}
.evento__data::before {
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.55) 0%, rgba(246, 167, 75, 0.25) 50%, rgba(246, 167, 75, 0) 100%);
}
.evento__data::after {
  background: radial-gradient(closest-side, rgba(221, 224, 234, 0.4) 0%, rgba(221, 224, 234, 0.16) 50%, rgba(221, 224, 234, 0) 100%);
  animation-delay: 5.5s;
}
@media (prefers-reduced-motion: reduce) {
  .evento__data::before,
  .evento__data::after { animation: none; opacity: 0; }
}

/* CAPES: três colunas com o mesmo espaço entre elas, separadas por fios
   finos como a barra da data do topo (pedido de 16/10: "espaçamento
   coerente") */
@media (min-width: 760px) {
  .section--light .capes {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    padding: 26px 32px;
  }
  .capes__texto {
    max-width: none;
    margin: 0 32px;
    padding: 4px 32px;
    border-inline: 1px solid rgba(22, 22, 22, 0.1);
  }
  .capes__turma { margin-left: 0; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .section--light .capes { grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; }
  .capes__texto { margin-right: 0; padding-right: 0; border-right: 0; }
  .capes__turma { grid-column: 1 / -1; justify-self: start; }
}

/* ==========================================================================
   A box inteira da masterclass aberta preta, com o brilho difuso passando
   devagar (amarelo, some, cinza), pedido de 16/10. A data volta a fazer
   parte da box e o botão fica claro para aparecer no preto
   ========================================================================== */

.evento {
  border: 1px solid rgba(232, 234, 241, 0.22);
  background: #161616;
  color: #fff;
  box-shadow: 0 18px 44px rgba(22, 22, 22, 0.18);
}
.evento::before,
.evento::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto;
  top: -90%;
  left: -5%;
  right: auto;
  bottom: auto;
  width: 60%;
  height: 280%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  pointer-events: none;
  animation: botao-passa 13s ease-in-out infinite;
}
.evento::before {
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.42) 0%, rgba(246, 167, 75, 0.18) 50%, rgba(246, 167, 75, 0) 100%);
}
.evento::after {
  background: radial-gradient(closest-side, rgba(221, 224, 234, 0.26) 0%, rgba(221, 224, 234, 0.1) 50%, rgba(221, 224, 234, 0) 100%);
  animation-delay: 6.5s;
}

.evento__rotulo { color: var(--muted); }
.evento__nome,
.evento__tema { color: #fff; }
.evento__foto--inicial { background: #26262a; }
.evento__foto--inicial span { color: #6e6e74; }

/* a data sem caixa própria: só um fio, o brilho é da box toda */
.evento__data {
  border-color: rgba(232, 234, 241, 0.2);
  background: rgba(255, 255, 255, 0.03);
}
.evento__data::before,
.evento__data::after { content: none; }

/* botão claro com a seta laranja */
.evento__botao {
  background: #f5f5f7;
  color: var(--ink);
}

@media (any-hover: hover) {
  a.evento:hover {
    border-color: rgba(246, 167, 75, 0.6);
    box-shadow: 0 24px 50px rgba(22, 22, 22, 0.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  .evento::before,
  .evento::after { animation: none; opacity: 0; }
}

/* celular: o botão embaixo da data, na largura toda, sem quebrar */
.evento__botao { white-space: nowrap; }
@media (max-width: 759px) {
  .evento__acao { grid-template-columns: minmax(0, 1fr); }
}

/* sem o vermelho de pendência na box preta (pedido de 16/10, para ver como
   fica): o lugar do minicurrículo em cinza. Continua com a classe pendente,
   então o build segue recusando até chegar o texto */
.evento__bio.pendente { color: var(--muted) !important; }

/* as próximas também pretas, com o brilho difuso passando em momentos
   diferentes em cada uma */
.proxima {
  border: 1px solid rgba(232, 234, 241, 0.22);
  background: #161616;
  color: #fff;
  box-shadow: 0 14px 34px rgba(22, 22, 22, 0.16);
}
.proxima::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110%;
  left: -10%;
  right: auto;
  width: 80%;
  height: 320%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.36) 0%, rgba(246, 167, 75, 0.15) 50%, rgba(246, 167, 75, 0) 100%);
  filter: blur(46px);
  opacity: 0;
  pointer-events: none;
  animation: botao-passa 13s ease-in-out infinite;
}
.proxima:nth-child(2)::before {
  background: radial-gradient(closest-side, rgba(221, 224, 234, 0.24) 0%, rgba(221, 224, 234, 0.1) 50%, rgba(221, 224, 234, 0) 100%);
  animation-delay: 4.3s;
}
.proxima:nth-child(3)::before { animation-delay: 8.6s; }
.proxima__topo { color: var(--muted); }
.proxima__tema { color: #fff; }
.proxima__data {
  background: var(--kv-degrade);
  -webkit-background-clip: text;
  background-clip: text;
}
.proxima__data span { color: var(--muted); }
.proxima__botao {
  background: rgba(255, 255, 255, 0.1);
  color: #a8a8ae;
}
@media (any-hover: hover) {
  .proxima:hover {
    border-color: rgba(246, 167, 75, 0.6);
    box-shadow: 0 20px 44px rgba(22, 22, 22, 0.26);
  }
}
@media (prefers-reduced-motion: reduce) {
  .proxima::before { animation: none; opacity: 0; }
}

/* agenda com menos firula (pedido de 16/10: "reduzir as cores de novo"):
   preto e branco; o laranja fica só no ponto de inscrições abertas e na seta
   do botão; só a box da 01 tem o brilho passando */
.proxima::before,
.proxima::after { content: none; }
.proxima__data,
.evento__dia {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
}
.proxima__data { color: #d6d6db; }
.evento__rotulo::before { animation: none; box-shadow: none; }

/* agenda em preto, cinza e branco (pedido de 16/10): a aberta preta com
   brilho branco/cinza, as próximas em cinza claro, a data e o botão em
   branco. O laranja só no ponto e na seta */
.evento::before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
}
.evento::after {
  background: radial-gradient(closest-side, rgba(168, 168, 174, 0.28) 0%, rgba(168, 168, 174, 0.1) 50%, rgba(168, 168, 174, 0) 100%);
}
.evento__foto--inicial { background: #2a2a2e; }
.evento__foto--inicial span { color: #8a8a90; }
.evento__data {
  border: 0;
  background: #fff;
}
.evento__dia,
.evento__mes { color: var(--ink); }
.evento__semana { color: #6e6e74; }

.proxima {
  border: 1px solid #e2e2e7;
  background: #ececf0;
  color: var(--ink);
  box-shadow: none;
}
.proxima__topo { color: #6e6e74; }
.proxima__status::before { background: #a8a8ae; }
.proxima__data { color: #7d7d7d; }
.proxima__data span { color: #8a8a90; }
.proxima__tema { color: var(--ink); }
.proxima__botao {
  background: #dcdce1;
  color: #8a8a90;
}
@media (any-hover: hover) {
  .proxima:hover {
    border-color: #c9c9cf;
    box-shadow: 0 14px 30px rgba(22, 22, 22, 0.1);
  }
}

/* caixa da data no cinza claro das próximas (pedido de 16/10) */
.evento__data { background: #ececf0; }

/* box da 01 com hierarquia (pedido de 16/10: "falta destaque"): o tema é o
   título grande, com "pesquisar?" no degradê do topo; o professor numa
   linha menor embaixo */
.evento__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.evento__rotulo { margin-bottom: 0; }
.evento .evento__tema {
  max-width: 620px;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.evento__tema em {
  font-style: normal;
  background: var(--kv-degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.evento__prof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  color: var(--muted);
  font-size: 15px;
}
.evento__prof .evento__nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}
.evento__prof .evento__bio { margin: 0; font-size: 13px; }
.evento__prof .evento__bio::before { content: "· "; }

@media (max-width: 1023px) {
  .evento .evento__tema { font-size: 30px; }
}
@media (max-width: 759px) {
  .evento__texto { display: flex; grid-column: 2; align-self: center; gap: 8px; }
  .evento .evento__tema { font-size: 22px; }
  .evento__prof { font-size: 13px; }
  .evento__prof .evento__nome { font-size: 13px; }
}
@media (max-width: 759px) {
  .evento__prof .evento__bio { flex-basis: 100%; }
  .evento__prof .evento__bio::before { content: none; }
}

/* ==========================================================================
   Box da 01, versão clara (pedido de 16/10: "esse preto pesou"): box branca
   com fio e sombra leves; o preto fica só na caixa da data (com o brilho
   passando) e no botão em pílula, como o "Conheça o programa"
   ========================================================================== */

.evento {
  border: 1px solid #e2e2e7;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(22, 22, 22, 0.07);
}
.evento::before,
.evento::after { content: none; }
@media (any-hover: hover) {
  a.evento:hover {
    border-color: #c9c9cf;
    box-shadow: 0 20px 44px rgba(22, 22, 22, 0.11);
  }
}

.evento__rotulo { color: #6e6e74; }
.evento .evento__tema { color: var(--ink); }
.evento__tema em { background: var(--kv-degrade-escuro); -webkit-background-clip: text; background-clip: text; }
.evento__prof { color: #6e6e74; }
.evento__prof .evento__nome { color: var(--ink); }
.evento__bio.pendente { color: #8a8a90 !important; }
.evento__foto--inicial { background: #ececf0; }
.evento__foto--inicial span { color: #a8a8ae; }

/* data preta com o brilho difuso passando (amarelo, some, cinza) */
.evento__data {
  border: 0;
  background: #161616;
}
.evento__dia,
.evento__mes { color: #fff; }
.evento__semana { color: var(--muted); }
.evento__data::before,
.evento__data::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -10%;
  width: 120%;
  height: 220%;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  animation: botao-passa 11s ease-in-out infinite;
}
.evento__data::before {
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.5) 0%, rgba(246, 167, 75, 0.22) 50%, rgba(246, 167, 75, 0) 100%);
}
.evento__data::after {
  background: radial-gradient(closest-side, rgba(221, 224, 234, 0.36) 0%, rgba(221, 224, 234, 0.14) 50%, rgba(221, 224, 234, 0) 100%);
  animation-delay: 5.5s;
}
@media (prefers-reduced-motion: reduce) {
  .evento__data::before,
  .evento__data::after { animation: none; opacity: 0; }
}

/* botão em pílula preta com a seta laranja */
.evento__botao {
  background: #161616;
  color: #fff;
}

/* ==========================================================================
   Box da 01 como INGRESSO (pedido de 16/10: "traga algo novo, diferente"):
   à esquerda o tema e o professor; à direita o canhoto cinza, separado por
   um picote pontilhado com os recortes redondos, com a data grande e o botão
   preto. Só branco, cinza e preto
   ========================================================================== */

.evento {
  position: relative;
  overflow: visible;
  grid-template-columns: 132px minmax(0, 1fr) 300px;
  gap: 32px;
  padding: 0 0 0 26px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px #e6e6eb, 0 16px 40px rgba(22, 22, 22, 0.08);
}
.evento__foto { width: 132px; margin: 26px 0; }
.evento__texto { padding: 26px 0; }

/* o canhoto */
.evento__acao {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 30px;
  border-left: 2px dashed #cfcfd5;
  border-radius: 0 22px 22px 0;
  background: #ececf0;
  text-align: left;
}
/* os recortes redondos no topo e no pé do picote */
.evento__acao::before,
.evento__acao::after {
  content: "";
  position: absolute;
  left: -14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e6e6eb;
}
.evento__acao::before { top: -14px; clip-path: inset(50% 0 0 0); }
.evento__acao::after { bottom: -14px; clip-path: inset(0 0 50% 0); }

.evento__data {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.evento__data::before,
.evento__data::after { content: none; }
.evento__dia {
  grid-row: 1 / 3;
  font-size: 64px;
  line-height: 0.85;
  color: var(--ink);
}
.evento__mes {
  margin: 0;
  align-self: end;
  font-size: 17px;
  color: var(--ink);
}
.evento__semana {
  margin: 4px 0 0;
  align-self: start;
  font-size: 11px;
  color: #6e6e74;
}
.evento__botao { background: #161616; color: #fff; }

@media (any-hover: hover) {
  a.evento:hover {
    box-shadow: 0 0 0 1px #c9c9cf, 0 22px 46px rgba(22, 22, 22, 0.12);
  }
}

@media (max-width: 1023px) {
  .evento { grid-template-columns: 110px minmax(0, 1fr) 250px; gap: 24px; padding-left: 20px; }
  .evento__foto { width: 110px; }
  .evento__acao { padding: 24px; }
  .evento__dia { font-size: 54px; }
}

/* celular: o canhoto embaixo, com o picote na horizontal */
@media (max-width: 759px) {
  .evento {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
    padding: 0;
  }
  .evento__foto { width: 76px; margin: 20px 0 0 18px; align-self: start; }
  .evento__texto { padding: 20px 18px 20px 0; }
  .evento__acao {
    grid-column: 1 / -1;
    padding: 22px 18px 18px;
    border-left: 0;
    border-top: 2px dashed #cfcfd5;
    border-radius: 0 0 22px 22px;
  }
  .evento__acao::before,
  .evento__acao::after { top: -14px; bottom: auto; clip-path: inset(0 0 0 50%); }
  .evento__acao::before { left: -14px; }
  .evento__acao::after { left: auto; right: -14px; clip-path: inset(0 50% 0 0); }
  .evento__dia { font-size: 52px; }
}

/* fio do topo na cor de cada programa (pedido de 16/10: "a linha de cima é
   cinza, não tem amarelo em Mestrado") */
.selo-produto::after { background: var(--tag); opacity: 1; }

/* ==========================================================================
   Linhas de pesquisa em 2 boxes, uma por programa, no estilo do cartão do
   nome (pedido de 16/10: "remova a cor e deixe em 2 box"): cartão branco com
   fio da cor do programa no topo, nome com o quadradinho dentro e os dois
   braços separados por um fio fino. Sem degradê
   ========================================================================== */

.linhas-boxes { margin-top: 48px; gap: 24px; }
.linhas-box,
.linhas-box:hover {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 34px 34px 30px;
  border: 1px solid #e6e6eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(22, 22, 22, 0.07);
}
.linhas-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tag);
}
.linhas-box__titulo { margin-bottom: 24px; }

.linhas-box__grupo,
.linhas-box__grupo:hover {
  translate: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  animation: none;
}
.linhas-box__grupo + .linhas-box__grupo {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #ececf0;
}
.chip { background: #fafafb; }

@media (max-width: 759px) {
  .linhas-box,
  .linhas-box:hover { padding: 26px 20px 22px; }
}

/* o degradê do KV de volta na beirada de cima do ingresso e das próximas
   (pedido de 16/10). Desenhado por máscara, então acompanha o arredondado;
   os recortes do picote ficam por cima dele */
.evento::before,
.proxima::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: var(--kv-degrade);
  filter: none;
  opacity: 1;
  animation: none;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 3px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% 3px no-repeat;
  pointer-events: none;
}
.evento__acao::before,
.evento__acao::after { z-index: 2; }

/* canhoto mais largo: o picote vai para a esquerda e a data e o botão
   ganham respiro (pedido de 16/10: "tá muito apertado na direita") */
@media (min-width: 1024px) {
  .evento { grid-template-columns: 132px minmax(0, 1fr) 380px; }
  .evento__acao { padding: 30px 40px; gap: 18px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .evento { grid-template-columns: 110px minmax(0, 1fr) 290px; }
  .evento__acao { padding: 26px 30px; }
}

/* sem o fio de cima; o degradê do KV vai para o fundo do canhoto, deslizando
   devagar (pedido de 16/10) */
.evento::before,
.proxima::after { content: none; }
.evento__acao {
  background: linear-gradient(120deg, #e8eaf1 0%, #eee6e4 40%, #f6d3a8 75%, #f6b263 100%);
  background-size: 170% 170%;
  background-position: 0% 50%;
  animation: degrade-desliza 10s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .evento__acao { animation: none; background-position: 60% 50%; }
}
@media (max-width: 759px) {
  .evento { grid-template-columns: 94px minmax(0, 1fr); }
}

/* canhoto: o cinza cresce e depois o amarelo cresce, indo e voltando, num
   movimento visível (pedido de 16/10: "o movimento está sutil") */
.evento__acao {
  background: linear-gradient(110deg, #e8eaf1 0%, #e8eaf1 22%, #efe3da 40%, #f6cf9f 62%, #f6b263 82%, #f6b263 100%);
  background-size: 210% 100%;
  background-position: 0% 50%;
  animation: degrade-desliza 8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .evento__acao { animation: none; background-position: 50% 50%; }
}

/* ingresso com recortes vazados de verdade (pedido de 16/10: no hover a
   sombra e a cor falhavam no recorte): a box é furada por máscara nos dois
   pontos do picote e a sombra vem do invólucro (drop-shadow), seguindo o
   formato com os furos, inclusive quando sobe no hover */
.ingresso { position: relative; }
@media (min-width: 760px) {
  .ingresso {
    filter: drop-shadow(0 0 0.7px rgba(22, 22, 22, 0.32)) drop-shadow(0 16px 30px rgba(22, 22, 22, 0.08));
    transition: filter 0.3s ease;
  }
  .ingresso .evento {
    --corte: 379px;
    box-shadow: none;
    -webkit-mask:
      radial-gradient(circle at calc(100% - var(--corte)) 0, #0000 13px, #000 13.5px),
      radial-gradient(circle at calc(100% - var(--corte)) 100%, #0000 13px, #000 13.5px);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle at calc(100% - var(--corte)) 0, #0000 13px, #000 13.5px),
      radial-gradient(circle at calc(100% - var(--corte)) 100%, #0000 13px, #000 13.5px);
    mask-composite: intersect;
  }
  .ingresso .evento__acao::before,
  .ingresso .evento__acao::after { content: none; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .ingresso .evento { --corte: 289px; }
}
@media (any-hover: hover) and (min-width: 760px) {
  .ingresso .evento,
  .ingresso a.evento:hover { box-shadow: none; transform: none; }
  .ingresso { transition: filter 0.3s ease, translate 0.3s ease; }
  .ingresso:hover {
    translate: 0 -3px;
    filter: drop-shadow(0 0 0.7px rgba(22, 22, 22, 0.42)) drop-shadow(0 22px 38px rgba(22, 22, 22, 0.12));
  }
}

/* seta do botão do ingresso em círculo cinza-claro (o laranja sumia no
   canhoto) */
.evento__botao .braco__seta { background: #e8eaf1; color: var(--ink); }

/* ritmo do canhoto: a maior parte do tempo no cinza, o amarelo cresce,
   fica pouco e volta (pedido de 16/10: "muito tempo no amarelo") */
@keyframes canhoto-cor {
  0%, 38% { background-position: 0% 50%; }
  56%, 64% { background-position: 100% 50%; }
  84%, 100% { background-position: 0% 50%; }
}
.evento__acao { animation: canhoto-cor 13s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .evento__acao { animation: none; background-position: 0% 50%; }
}

/* quadradinho dos botões Mestrado/Doutorado do topo menor (pedido de 16/10) */
.programa__cor { width: 6px; height: 6px; }

/* "Em produção": bolinha amarela piscando (pedido de 16/10), cada cartão
   num tempo para não piscarem juntos */
@keyframes bolinha-pisca {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.proxima__status::before {
  background: var(--kv-laranja);
  animation: bolinha-pisca 1.6s ease-in-out infinite;
}
.proxima:nth-child(2) .proxima__status::before { animation-delay: -0.5s; }
.proxima:nth-child(3) .proxima__status::before { animation-delay: -1s; }
@media (prefers-reduced-motion: reduce) {
  .proxima__status::before { animation: none; }
}

/* picote do ingresso em laranja (pedido de 16/10) */
.evento__acao { border-left-color: var(--kv-laranja); }
@media (max-width: 759px) {
  .evento__acao { border-top-color: var(--kv-laranja); }
}

/* picote de volta ao cinza (pedido de 16/10, depois de ver em laranja) */
.evento__acao { border-left-color: #cfcfd5; }
@media (max-width: 759px) {
  .evento__acao { border-top-color: #cfcfd5; }
}

/* sem o pontilhado do picote (pedido de 16/10); os recortes ficam */
.evento__acao { border-left: 0; }
@media (max-width: 759px) {
  .evento__acao { border-top: 0; }
}

/* tracejado do picote de volta, em cinza (pedido de 16/10) */
.evento__acao { border-left: 2px dashed #cfcfd5; }
@media (max-width: 759px) {
  .evento__acao { border-left: 0; border-top: 2px dashed #cfcfd5; }
}

/* ritmo do canhoto: 3 s no cinza, 3 s indo para o amarelo e já volta em 3 s,
   sem parar no amarelo */
@keyframes canhoto-cor {
  0%, 33% { background-position: 0% 50%; }
  66% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.evento__acao { animation: canhoto-cor 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .evento__acao { animation: none; background-position: 0% 50%; }
}

/* o degradê do canhoto não passa por baixo do tracejado (os vãos entre os
   traços ficavam laranja e o picote parecia amarelo) */
.evento__acao { background-clip: padding-box; }

/* cartões do nome sem o brilho de dentro (pedido de 16/10): brancos, com o
   fio da cor do programa no topo */
.produto__arte > .selo-produto { background: #fff; }

/* a luz do canto do cartão de produto caminha (pedido de 16/10): sai do
   canto de cima, desce pela direita, atravessa por baixo até perto do mote
   ("Quem lidera...") e volta pelo mesmo caminho */
@keyframes luz-caminha {
  0% { top: -140px; right: -140px; }
  35% { top: calc(100% - 330px); right: -80px; }
  100% { top: calc(100% - 300px); right: 54%; }
}
@media (min-width: 1024px) {
  .produto::before {
    animation: luz-caminha 14s ease-in-out infinite alternate;
  }
  .produto--mestrado::before { animation-delay: -7s; }
}
@media (prefers-reduced-motion: reduce) {
  .produto::before { animation: none; }
}

/* artes com fundo transparente: sem o multiply (a luz passa por trás sem
   tingir a pessoa, o quadrado e a faixa) */
.produto__arte img { mix-blend-mode: normal; }

/* subtítulo do topo menor e regular (pedido de 16/10) */
.hero .hero__gancho {
  max-width: 470px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}
@media (max-width: 759px) {
  .hero .hero__gancho { font-size: 16px; }
}

/* próximas brancas, só com o traçado, como o ingresso (pedido de 16/10) */
.proxima {
  border: 1px solid #dcdce2;
  background: #fff;
  box-shadow: 0 16px 30px rgba(22, 22, 22, 0.06);
}
.proxima__botao { background: #ececf0; color: #8a8a90; }
/* só o fundo muda: o traçado continua o mesmo e sem sombra */
.proxima { border-color: #e2e2e7; box-shadow: none; }

/* próximas: em vez do botão, ao passar o mouse o cartão desfoca e aparece
   "EM BREVE" no centro, num véu de vidro (pedido de 16/10) */
.proxima__botao {
  inset: 0;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  translate: none;
  transition: opacity 0.35s ease;
}
@media (any-hover: hover) {
  .proxima:hover .proxima__botao { translate: none; }
  .proxima:hover .proxima__status { opacity: 1; }
}

/* ==========================================================================
   Fecho (pedido de 16/10: "mal distribuído"): texto à esquerda e, à direita,
   um bloco de ações: a inscrição em pílula preta grande e os dois programas
   ========================================================================== */

.section--light .cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 56px;
  border-color: #e2e2e7;
  border-radius: 28px;
}
.cta-acoes {
  display: grid;
  gap: 12px;
}
.cta-principal {
  --tag: var(--kv-laranja);
  --tag-texto: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 30px;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.cta-principal .braco__seta { width: 48px; height: 48px; }
.cta-principal .braco__seta svg { width: 18px; height: 18px; }
.cta-programas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cta-programa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid #dcdce2;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.3s ease, translate 0.3s ease;
}
.cta-programa--mestrado { --programa-cor: #7d7d7d; }
.cta-programa--doutorado { --programa-cor: var(--kv-laranja); }
@media (any-hover: hover) {
  .cta-principal:hover {
    translate: 0 -2px;
    box-shadow: 0 14px 30px rgba(22, 22, 22, 0.2);
  }
  .cta-principal:hover .braco__seta { rotate: 45deg; }
  .cta-programa:hover { translate: 0 -2px; border-color: var(--programa-cor); }
}
@media (max-width: 1023px) {
  .section--light .cta-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 759px) {
  .cta-principal { font-size: 16px; padding-left: 22px; }
  .cta-principal .braco__seta { width: 42px; height: 42px; }
  .cta-programas { grid-template-columns: minmax(0, 1fr); }
}

/* fecho: o subtítulo maior no topo da coluna da direita, o botão grande
   embaixo dele (pedido de 16/10) */
.cta-sub {
  margin-bottom: 8px;
  color: #45454a;
  font-size: 21px;
  line-height: 1.45;
}
.cta-panel h2 { margin-bottom: 0; }
@media (max-width: 759px) {
  .cta-sub { font-size: 18px; }
}

/* fecho no celular: o botão grande numa linha só */
.cta-principal { white-space: nowrap; }
@media (max-width: 759px) {
  .cta-principal { gap: 10px; padding: 8px 8px 8px 18px; font-size: 15px; }
  .cta-principal .braco__seta { width: 40px; height: 40px; }
}

/* botão do cabeçalho simples, sem o degradê: contorno fino e texto branco;
   o efeito fica só no hover, quando ele se preenche de branco (pedido de
   16/10) */
.site-header .button--kv {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  box-shadow: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (any-hover: hover) {
  .site-header .button--kv:hover {
    border-color: #fff;
    background: #fff;
    color: var(--ink);
  }
}

/* botão grande do fecho com o mesmo brilho do botão do topo: amarelo
   difuso passa, some e vem o cinza (pedido de 16/10) */
.cta-principal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(232, 234, 241, 0.28);
}
.cta-principal::before,
.cta-principal::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -95%;
  left: -10%;
  width: 70%;
  height: 290%;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  animation: botao-passa 9s ease-in-out infinite;
}
.cta-principal::before {
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.8) 0%, rgba(246, 167, 75, 0.38) 50%, rgba(246, 167, 75, 0) 100%);
}
.cta-principal::after {
  background: radial-gradient(closest-side, rgba(221, 224, 234, 0.6) 0%, rgba(221, 224, 234, 0.24) 50%, rgba(221, 224, 234, 0) 100%);
  animation-delay: 4.5s;
}
@media (prefers-reduced-motion: reduce) {
  .cta-principal::before,
  .cta-principal::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   Topo, nova organização (pedido de 16/10: "MASTERCLASS grandão ocupando
   tudo" e "organize o texto"): a palavra na largura toda do conteúdo; embaixo
   o título à esquerda e, à direita, o subtítulo com os dois programas; a
   barra da data no pé
   ========================================================================== */

.hero__layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "marca marca"
    "copy lado"
    "barra barra";
  row-gap: 48px;
  column-gap: 72px;
  align-items: end;
}
.hero__marca {
  grid-area: marca;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  container-type: inline-size;
}
/* a palavra ocupa a largura do conteúdo inteira */
.hero__marca-titulo {
  font-size: 13.15cqi;
  line-height: 0.9;
  white-space: nowrap;
}
.hero__copy {
  grid-area: copy;
  justify-self: start;
  width: auto;
}
.hero h1 { max-width: 560px; font-size: 46px; line-height: 1.12; }
.hero__lado {
  grid-area: lado;
  display: grid;
  gap: 24px;
}
.hero .hero__gancho { max-width: 520px; }
.hero__programas { margin-top: 0; max-width: 520px; }

@media (max-width: 1279px) {
  .hero h1 { font-size: 40px; }
}
@media (max-width: 1023px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marca" "copy" "lado" "barra";
    row-gap: 32px;
  }
}
@media (max-width: 759px) {
  .hero h1 { font-size: 32px; }
  .hero__lado { gap: 20px; }
}
/* ajuste fino: a palavra encosta nas duas margens do conteúdo */
.hero__marca-titulo { font-size: 13.5cqi; }
.hero__marca-titulo { font-size: 13.4cqi; }

/* topo alinhado ao grid (pedido de 16/10): a coluna da direita vai até a
   margem direita, na linha da barra e do fim do MASTERCLASS */
.hero__lado { justify-self: stretch; }
.hero .hero__gancho,
.hero__programas { max-width: none; width: 100%; }

/* barra da data mais abaixo e mais alta (pedido de 16/10); a palavra um fio
   menor para o último S nunca ser cortado pelo degradê */
.hero__marca-titulo { font-size: 13.25cqi; }
.hero__barra {
  margin-top: 40px;
  padding-top: 34px;
  padding-bottom: 34px;
}
@media (max-width: 1023px) {
  .hero__barra { margin-top: 16px; padding-top: 28px; padding-bottom: 28px; }
}
.hero__marca-titulo { font-size: 13.4cqi; }

/* botão da barra do topo mais largo (pedido de 16/10) */
@media (min-width: 1280px) {
  .hero__barra .button { min-width: 250px; padding-inline: 56px; }
}
@media (min-width: 1280px) {
  .hero__barra .button { min-width: 220px; padding-inline: 44px; }
  .hero__barra { gap: 32px; }
  .hero__barra-lista > div { padding-inline: 16px; }
  .hero__barra-lista dd { white-space: nowrap; }
}

/* "de" sobre "outubro", ao lado do 29 (pedido de 16/10) */
.hero__barra-data { align-items: center; }
.hero__barra-mes { line-height: 1.1; }

/* topo com respiros iguais (pedido de 16/10): do pé do MASTERCLASS ao
   título e do pé dos botões à barra */
.hero__layout { row-gap: 64px; }
.hero__barra { margin-top: 0; }

/* MASTERCLASS mais afastado das outras informações (pedido de 16/10) */
.hero__marca { margin-bottom: 44px; }
@media (max-width: 1023px) {
  .hero__marca { margin-bottom: 16px; }
}
@media (max-width: 1023px) {
  .hero__layout { row-gap: 32px; }
}
@media (max-width: 759px) {
  .hero__layout { row-gap: 28px; }
}

/* menos espaço embaixo da barra da data, no fim do topo (pedido de 16/10) */
.hero { padding-bottom: 72px; }
@media (max-width: 1279px) {
  .hero { padding-bottom: 64px; }
}
@media (max-width: 759px) {
  .hero { padding-bottom: 48px; }
}

/* ==========================================================================
   MASTERCLASS que some e volta (pedido de 16/10): o preenchimento em degradê
   vai sumindo numa varredura suave, como o brilho que passa, e fica só um
   contorno fino cinza-claro; depois o preenchimento volta. Só CSS: o
   contorno é uma cópia da palavra por baixo; o preenchimento tem a máscara
   que corre. Com movimento reduzido, a palavra fica preenchida
   ========================================================================== */

.hero__marca { position: relative; }
.hero__marca-titulo { position: relative; z-index: 1; }
.hero__marca-contorno {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: var(--font-marca);
  font-weight: 700;
  font-size: 13.4cqi;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 234, 241, 0.55);
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__marca-titulo {
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 38%, #000 62%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 0%, transparent 38%, #000 62%, #000 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation: marca-some 14s ease-in-out infinite;
  }
}
@keyframes marca-some {
  0%, 22% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  42%, 62% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  82%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

/* fecho: no lugar dos dois programas, um botão de WhatsApp (pedido de 16/10) */
.cta-whatsapp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border: 1px solid #dcdce2;
  border-radius: 999px;
  background: #fff;
  color: #45454a;
  font-size: 14px;
  transition: border-color 0.3s ease, translate 0.3s ease;
}
.cta-whatsapp strong { color: var(--ink); font-weight: 600; }
.cta-whatsapp svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #25a244;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (any-hover: hover) {
  .cta-whatsapp:hover { translate: 0 -2px; border-color: #25a244; }
}

/* MASTERCLASS com espaço entre as letras (no contorno elas se encostavam,
   pedido de 16/10); tamanho recalculado para ir de margem a margem. As duas
   camadas (preenchimento e contorno) com as mesmas medidas */
.hero__marca-titulo,
.hero__marca-contorno {
  font-size: 12.65cqi;
  letter-spacing: 0.01em;
}

/* topo em três colunas (pedido de 16/10): título à esquerda, subtítulo no
   meio e os dois botões um em cima do outro à direita */
@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "marca marca marca"
      "copy sub botoes"
      "barra barra barra";
    column-gap: 56px;
    align-items: end;
  }
  .hero__lado { display: contents; }
  .hero .hero__gancho { grid-area: sub; align-self: end; }
  .hero__programas {
    grid-area: botoes;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .hero h1 { font-size: 40px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero h1 { font-size: 34px; }
  .hero__layout { column-gap: 36px; }
}
@media (min-width: 1024px) {
  .hero__layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.75fr); }
}

/* WhatsApp do fecho na paleta da página (pedido de 16/10): ícone num círculo
   cinza-lilás, como as setas, que fica laranja no hover; texto em duas
   linhas e seta à direita */
.cta-whatsapp {
  gap: 14px;
  padding: 10px 22px 10px 10px;
}
.cta-whatsapp__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8eaf1;
  color: var(--ink);
  transition: background-color 0.3s ease;
}
.cta-whatsapp__icone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.cta-whatsapp__icone .cheio { fill: currentColor; stroke: none; }
.cta-whatsapp__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.cta-whatsapp__texto small { color: #6e6e74; font-size: 12px; }
.cta-whatsapp__texto strong { font-size: 15px; }
.cta-whatsapp__seta {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: #8a8a90;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.3s ease, stroke 0.3s ease;
}
@media (any-hover: hover) {
  .cta-whatsapp:hover { border-color: var(--kv-laranja); }
  .cta-whatsapp:hover .cta-whatsapp__icone { background: var(--kv-laranja); }
  .cta-whatsapp:hover .cta-whatsapp__seta { rotate: 45deg; stroke: var(--ink); }
}
@media (max-width: 759px) {
  .cta-whatsapp__texto strong { font-size: 14px; }
}
.cta-whatsapp .cta-whatsapp__seta { width: 16px; height: 16px; stroke: #8a8a90; }
@media (any-hover: hover) {
  .cta-whatsapp:hover .cta-whatsapp__seta { stroke: var(--ink); }
}

/* o pé do L e a perna do A se encostavam no contorno: respiro só nesse par,
   nas duas camadas; tamanho ajustado para seguir de margem a margem */
.marca-la { margin-left: 0.05em; }
.hero__marca-titulo,
.hero__marca-contorno { font-size: 12.57cqi; }

/* botões Mestrado e Doutorado na coluna da esquerda (pedido de 16/10) */
@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
      "marca marca marca"
      "botoes copy sub"
      "barra barra barra";
  }
}

/* WhatsApp do fecho como link de texto simples embaixo do botão (pedido de
   16/10: a versão em caixa ficou pesada) */
.cta-duvida {
  padding-left: 30px;
  color: #6e6e74;
  font-size: 14px;
}
.cta-duvida a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--kv-laranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease;
}
.cta-duvida svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.3s ease;
}
@media (any-hover: hover) {
  .cta-duvida a:hover { text-decoration-color: var(--ink); }
  .cta-duvida a:hover svg { rotate: 45deg; }
}
@media (max-width: 759px) {
  .cta-duvida { padding-left: 0; text-align: center; }
}

/* Fale com um consultor (pedido de 16/10, texto do fucape.br): fio em cima,
   rótulo, título e texto à esquerda; o botão do WhatsApp à direita, na
   pílula preta com seta como os outros */
.consultor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 56px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #dcdce2;
}
.consultor__texto { display: grid; gap: 10px; }
.consultor h3 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.consultor__texto > p:last-child {
  max-width: 460px;
  color: var(--texto-claro);
  font-size: 16px;
  line-height: 1.6;
}
.consultor__botao {
  --tag: var(--kv-laranja);
  --tag-texto: #000;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.consultor__botao .braco__seta { width: 40px; height: 40px; }
@media (any-hover: hover) {
  .consultor__botao:hover { translate: 0 -2px; box-shadow: 0 14px 30px rgba(22, 22, 22, 0.2); }
  .consultor__botao:hover .braco__seta { rotate: 45deg; }
}
@media (max-width: 759px) {
  .consultor { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .consultor h3 { font-size: 24px; }
  .consultor__botao { justify-content: space-between; font-size: 14px; }
}

/* ==========================================================================
   Linha do topo (pedido de 16/10: alinhar ao grid e espaço igual): botões,
   título e subtítulo numa linha só, alinhados pelo topo, com o mesmo espaço
   entre eles; o primeiro encosta na margem esquerda e o subtítulo na
   direita. Título e subtítulo com a largura exata das linhas (medida)
   ========================================================================== */

.hero__linha {
  grid-area: copy;
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.hero__linha .hero__programas {
  flex: none;
  width: 260px;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}
.hero__linha h1 {
  flex: none;
  width: var(--h1-largura, auto);
  max-width: none;
  margin: 0;
}
.hero__linha .hero__gancho {
  flex: none;
  width: var(--sub-largura, 340px);
  max-width: none;
  margin: 0;
}

@media (max-width: 1023px) {
  .hero__linha {
    flex-direction: column;
    gap: 24px;
  }
  .hero__linha .hero__programas {
    order: 3;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__linha h1,
  .hero__linha .hero__gancho { width: auto; }
}
/* larguras medidas das linhas: título em 3 linhas, subtítulo em 3 linhas */
@media (min-width: 1024px) {
  .hero__linha { --h1-largura: 416px; --sub-largura: 359px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__linha { --h1-largura: 354px; }
  .hero__linha .hero__programas { width: 220px; }
}
/* os três alinhados pelo topo */
.hero__linha > * { align-self: flex-start; }

/* MASTERCLASS: só 1 s apagado (no contorno) e volta (pedido de 16/10).
   Ciclo de 14 s: 8 s preenchido, 2,5 s apagando, 1 s só contorno, 2,5 s
   voltando */
@keyframes marca-some {
  0%, 40% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  58%, 65% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  83%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
.hero__linha .hero__gancho,
.hero__linha h1,
.hero__linha .hero__programas { align-self: flex-start; }

/* fecho numa box só: subtítulo embaixo do título, à esquerda; os dois
   botões empilhados à direita, do mesmo tamanho */
.cta-panel .cta-sub {
  max-width: 520px;
  margin: 14px 0 0;
  color: var(--texto-claro);
  font-size: 17px;
  line-height: 1.6;
}
.cta-acoes { gap: 12px; }
.cta-consultor {
  --tag: #e8eaf1;
  --tag-texto: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 30px;
  border: 1px solid #d6d6dc;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: translate 0.3s ease, border-color 0.3s ease;
}
.cta-consultor .braco__seta { width: 48px; height: 48px; }
.cta-consultor .braco__seta svg { width: 18px; height: 18px; }
@media (any-hover: hover) {
  .cta-consultor:hover { translate: 0 -2px; border-color: var(--kv-laranja); }
  .cta-consultor:hover .braco__seta { rotate: 45deg; background: var(--kv-laranja); }
}
@media (max-width: 759px) {
  .cta-consultor { gap: 10px; padding: 8px 8px 8px 18px; font-size: 14px; white-space: normal; }
  .cta-consultor .braco__seta { width: 40px; height: 40px; }
}

/* WhatsApp com menos destaque que a inscrição (pedido de 16/10): sem fundo,
   fio leve, texto menor e mais claro, seta pequena */
.cta-consultor {
  padding: 6px 6px 6px 24px;
  border-color: #e6e6eb;
  background: transparent;
  color: #6e6e74;
  font-size: 14px;
  font-weight: 500;
}
.cta-consultor .braco__seta { width: 34px; height: 34px; background: #f0f0f3; }
.cta-consultor .braco__seta svg { width: 14px; height: 14px; }
@media (any-hover: hover) {
  .cta-consultor:hover { color: var(--ink); border-color: #c9c9cf; }
  .cta-consultor:hover .braco__seta { background: #e8eaf1; }
}
@media (max-width: 759px) {
  .cta-consultor { padding: 6px 6px 6px 18px; font-size: 13px; }
  .cta-consultor .braco__seta { width: 32px; height: 32px; }
}
@media (max-width: 759px) {
  .cta-consultor { white-space: nowrap; }
}

/* os dois botões do fecho com a mesma altura (pedido de 16/10) */
.cta-principal,
.cta-consultor { min-height: 70px; }
@media (max-width: 759px) {
  .cta-principal,
  .cta-consultor { min-height: 58px; }
}

/* bolinha da seta do WhatsApp igual à da inscrição: mesmo tamanho e mesmo
   respiro da borda (pedido de 16/10) */
.cta-consultor { padding: 10px 10px 10px 30px; }
.cta-consultor .braco__seta { width: 48px; height: 48px; }
.cta-consultor .braco__seta svg { width: 18px; height: 18px; }
@media (max-width: 759px) {
  .cta-consultor { padding: 8px 8px 8px 22px; }
  .cta-consultor .braco__seta { width: 40px; height: 40px; }
}

/* título e subtítulo um embaixo do outro (pedido de 16/10, para ver):
   botões empilhados na margem esquerda; ao lado, o título em 2 linhas e o
   subtítulo embaixo, em 1 ou 2 linhas */
@media (min-width: 1024px) {
  .hero__linha {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 80px;
    row-gap: 18px;
    align-items: start;
  }
  .hero__linha .hero__programas { grid-column: 1; grid-row: 1 / 3; width: auto; }
  .hero__linha h1 { grid-column: 2; grid-row: 1; width: auto; text-wrap: balance; }
  .hero__linha .hero__gancho { grid-column: 2; grid-row: 2; width: auto; max-width: 820px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__linha { grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; }
}

/* quebra do subtítulo do topo depois de "Mestrado" (pedido de 16/10); no
   celular o texto corre livre */
@media (max-width: 1023px) {
  .quebra-desk { display: none; }
}

/* texto à esquerda e botões à direita (pedido de 16/10); os botões esticam
   até a altura do bloco de texto (do topo do título ao pé do subtítulo) e
   ficam maiores */
@media (min-width: 1024px) {
  .hero__linha { grid-template-columns: minmax(0, 1fr) 340px; }
  .hero__linha h1 { grid-column: 1; }
  .hero__linha .hero__gancho { grid-column: 1; }
  .hero__linha .hero__programas {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .hero__linha .programa {
    padding: 0 26px;
    font-size: 17px;
  }
  .hero__linha .programa__cor { width: 8px; height: 8px; }
  .hero__linha .programa__seta { display: block; width: 22px; height: 22px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__linha { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* botões Mestrado/Doutorado com a mesma entrada do resto do topo, um depois
   do outro (pedido de 16/10); a transição da entrada convive com a do hover */
html.motion-enabled .programa[data-reveal] {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.hero__programas > .programa--mestrado { --reveal-delay: 250ms; }
.hero__programas > .programa--doutorado { --reveal-delay: 400ms; }

/* ==========================================================================
   O preto do topo termina no meio da barra da data (pedido de 16/10): a
   metade de baixo da barra fica sobre o branco da seção seguinte. Uma faixa
   branca sai do meio da barra para baixo, de ponta a ponta, por trás dela e
   por cima das luzes; a barra fica sólida (o vidro ficaria cinza no branco)
   ========================================================================== */

.hero { padding-bottom: 0; }
.hero__barra {
  position: relative;
  background: #161616;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 40px rgba(22, 22, 22, 0.16);
}
.hero__barra::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: #fff;
  pointer-events: none;
}
@media (max-width: 1279px), (max-width: 759px) {
  .hero { padding-bottom: 0; }
}
/* sem a linha preta de meio pixel no pé do topo */
.hero__barra::after { bottom: -3px; }

/* barra da data com o mesmo fundo do canhoto do ingresso (pedido de 16/10):
   degradê cinza-lilás > laranja alternando (3 s cinza, 3 s até o laranja,
   3 s de volta); textos escuros, botão preto */
.hero__barra {
  border: 0;
  background: linear-gradient(110deg, #e8eaf1 0%, #e8eaf1 22%, #efe3da 40%, #f6cf9f 62%, #f6b263 82%, #f6b263 100%);
  background-size: 210% 100%;
  background-position: 0% 50%;
  animation: canhoto-cor 9s ease-in-out infinite;
  color: var(--ink);
}
.hero__barra-dia { color: var(--ink); }
.hero__barra-mes { color: var(--ink); }
.hero__barra-lista > div { border-left-color: rgba(22, 22, 22, 0.14); }
.hero__barra-lista dt { color: #5c5c61; }
.hero__barra-lista dd { color: var(--ink); }
.hero__barra .button { border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .hero__barra { animation: none; background-position: 0% 50%; }
}

/* botão da barra preto sólido, sem o brilho, e sombra curta e leve (pedido
   de 16/10) */
.hero__barra .button {
  border: 0;
  background: #161616;
  color: #fff;
  box-shadow: 0 6px 14px rgba(22, 22, 22, 0.16);
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.hero__barra .button::before,
.hero__barra .button::after { content: none; }
@media (any-hover: hover) {
  .hero__barra .button:hover {
    translate: 0 -2px;
    box-shadow: 0 10px 20px rgba(22, 22, 22, 0.22);
  }
}

/* itens da barra distribuídos por toda a largura até o botão (pedido de
   16/10): o espaço sobra entre eles, não no fim */
@media (min-width: 1280px) {
  .hero__barra { gap: 40px; }
  .hero__barra-lista {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }
  .hero__barra-lista > div { padding-inline: 28px 0; }
}

/* a barra da data não entra animada (como camada, a faixa branca de trás
   cobria a metade de baixo no primeiro quadro); entram só o conteúdo */
html.motion-enabled .hero__barra .button[data-reveal] {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.3s ease,
    box-shadow 0.3s ease;
}

/* a sombra da barra não é mais cortada (pedido de 16/10): o topo ganha um
   respiro branco abaixo da barra, onde a sombra cabe, e a Agenda começa
   esse tanto mais cedo */
.hero { padding-bottom: 56px; }
.hero__barra::after { bottom: -59px; }
#agenda { padding-top: 48px; }
@media (max-width: 759px) {
  .hero { padding-bottom: 40px; }
  .hero__barra::after { bottom: -43px; }
  #agenda { padding-top: 40px; }
}

/* "Gratuita" em preto na barra (pedido de 16/10); segue com a classe
   pendente, então o build recusa até a gratuidade ser confirmada */
.hero__barra-lista dd.pendente { color: var(--ink) !important; }

/* logo do cabeçalho um pouco menor (pedido de 16/10) */
.site-header .logo-image { width: 136px; }
@media (max-width: 759px) {
  .site-header .logo-image { width: 116px; }
}

/* celular: os dois botões do fecho cabem na caixa (o do WhatsApp forçava a
   coluna a 330 px) */
@media (max-width: 759px) {
  .cta-acoes { min-width: 0; }
  .cta-consultor { gap: 8px; padding-left: 18px; font-size: 12.5px; }
}

/* ==========================================================================
   Celular (ajustes só abaixo de 760 px; o desktop está aprovado)
   ========================================================================== */

/* a arte dos produtos vem por <picture>: no celular, a versão com a pessoa
   no centro (pedido de 16/10). O picture não ocupa caixa própria */
.produto__arte > picture { display: contents; }
.produto__arte > picture > img { grid-area: 1 / 1; }
@media (max-width: 759px) {
  .produto__arte > picture > img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 0;
  }

  /* cartão do nome com mais respiro entre os textos (pedido de 16/10) */
  .produto__arte > .selo-produto {
    gap: 16px;
    padding: 22px 22px 24px;
  }
  .selo-produto__tipo { margin-top: 8px; }
  .selo-produto__area { padding-top: 16px; }
  .selo-produto .produto__mote { padding-top: 16px; }
}

@media (max-width: 759px) {
  /* Como participar: caixas em rolagem lateral, no padrão do MBEx (80% de
     largura, encaixe, sem setas nem bolinhas; pedido de 16/10) */
  .passos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    width: auto;
    margin-inline: -18px;
    padding: 4px 18px 14px;
    scrollbar-width: none;
  }
  .passos::-webkit-scrollbar { display: none; }
  .passo {
    scroll-snap-align: start;
    min-height: 0;
  }

  /* rodapé centralizado e logo menor (pedido de 16/10) */
  .site-footer { text-align: center; }
  .footer-brand,
  .footer-column { align-items: center; }
  .footer-brand .logo-image { width: 130px; }
}
@media (max-width: 759px) {
  /* a faixa de rolagem ocupa a tela toda (o pai já é a seção inteira) */
  .passos { width: 100%; margin-inline: 0; }
  /* fecho: um pouco menos de margem interna para os botões caberem */
  .section--light .cta-panel { padding-inline: 20px; }
  .cta-consultor { font-size: 12px; }
}
@media (max-width: 759px) {
  /* o dobro do espaço entre o MASTERCLASS e o título (pedido de 16/10) */
  .hero__marca { margin-bottom: 60px; }
}

/* a quebra do MASTERCLASS só existe no celular */
.quebra-cel { display: none; }
@media (max-width: 759px) {
  .quebra-cel { display: inline; }
}
@media (max-width: 759px) {
  /* MASTERCLASS em duas linhas, "MASTER" de margem a margem, e mais espaço
     até o título (pedido de 16/10, para testar) */
  .hero__marca-titulo,
  .hero__marca-contorno {
    font-size: 22.4cqi;
    line-height: 0.92;
  }
  .hero__marca { margin-bottom: 84px; }
}

@media (max-width: 759px) {
  /* próximas masterclasses: caixas verticais lado a lado, com rolagem
     lateral como os passos (pedido de 16/10) */
  .proximas {
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    margin-inline: -18px;
    padding: 4px 18px 14px;
    scrollbar-width: none;
  }
  .proximas::-webkit-scrollbar { display: none; }
  .proxima {
    scroll-snap-align: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topo"
      "data"
      "tema";
    align-content: start;
    gap: 18px;
    min-height: 210px;
    padding: 18px 18px 22px;
  }
  .proxima__topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .proxima__data {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    font-size: 44px;
  }
  .proxima__data span { margin-top: 0; }
  .proxima__tema { font-size: 16px; line-height: 1.35; }
}
@media (max-width: 759px) {
  /* mais espaço entre o ingresso e a faixa das próximas (pedido de 16/10) */
  .agenda { gap: 32px; }
}

@media (max-width: 759px) {
  /* sombra que respira atrás do ingresso (pedido de 16/10): uma luz difusa
     lilás e pêssego que cresce e recua devagar */
  .ingresso { position: relative; isolation: isolate; }
  .ingresso::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8% 6% -2%;
    border-radius: 32px;
    background:
      radial-gradient(60% 70% at 25% 70%, rgba(176, 182, 204, 0.55), transparent 70%),
      radial-gradient(60% 70% at 80% 75%, rgba(246, 167, 75, 0.45), transparent 70%);
    filter: blur(26px);
    animation: ingresso-respira 4.5s ease-in-out infinite;
    pointer-events: none;
  }
}
@keyframes ingresso-respira {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .ingresso::before { animation: none; opacity: 0.7; }
}
@media (max-width: 759px) {
  .ingresso::before {
    inset: 14% -10px -26px;
    background:
      radial-gradient(60% 70% at 22% 72%, rgba(176, 182, 204, 0.75), transparent 72%),
      radial-gradient(60% 70% at 80% 78%, rgba(246, 167, 75, 0.6), transparent 72%);
    filter: blur(24px);
  }
}
@media (max-width: 759px) {
  /* respiração do ingresso mais presente */
  .ingresso::before {
    inset: 22% -14px -40px;
    background:
      radial-gradient(60% 70% at 22% 72%, rgba(176, 182, 204, 0.95), transparent 72%),
      radial-gradient(60% 70% at 80% 78%, rgba(246, 167, 75, 0.8), transparent 72%);
    filter: blur(22px);
  }

  /* produtos: a luz do fundo caminha pelo cartão no celular (pedido de
     16/10): sai do canto de cima, desce pela direita até a altura dos
     cartões e volta */
  .produto::before {
    width: 340px;
    height: 340px;
    animation: luz-caminha-cel 12s ease-in-out infinite alternate;
  }
  .produto--doutorado::before { animation-delay: -6s; }
}
@keyframes luz-caminha-cel {
  0% { top: -120px; right: -120px; }
  45% { top: 30%; right: -60px; }
  100% { top: 62%; right: 45%; }
}

@media (max-width: 759px) {
  /* ingresso no celular: recortes vazados de verdade na linha do picote
     (antes eram círculos brancos por cima, que apareciam sobre a sombra) */
  .ingresso .evento {
    box-shadow: none;
    -webkit-mask:
      radial-gradient(circle at 0 var(--corte-y, 50%), #0000 13px, #000 13.5px),
      radial-gradient(circle at 100% var(--corte-y, 50%), #0000 13px, #000 13.5px);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle at 0 var(--corte-y, 50%), #0000 13px, #000 13.5px),
      radial-gradient(circle at 100% var(--corte-y, 50%), #0000 13px, #000 13.5px);
    mask-composite: intersect;
  }
  .ingresso .evento__acao::before,
  .ingresso .evento__acao::after { content: none; }

  /* a respiração é uma sombra preta, que segue o formato com os recortes */
  .ingresso::before { content: none; }
  .ingresso {
    filter: drop-shadow(0 0 0.7px rgba(22, 22, 22, 0.3)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
    animation: ingresso-sombra 4.5s ease-in-out infinite;
  }
}
@keyframes ingresso-sombra {
  0%, 100% { filter: drop-shadow(0 0 0.7px rgba(22, 22, 22, 0.3)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08)); }
  50% { filter: drop-shadow(0 0 0.7px rgba(22, 22, 22, 0.3)) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.24)); }
}
@media (prefers-reduced-motion: reduce) {
  .ingresso { animation: none; }
}

/* ==========================================================================
   Público de cada masterclass (pedido de 20/10): uma pílula tipo botão com o
   programa e o braço, na cor do programa (Mestrado cinza-lilás, Doutorado
   creme e laranja). No ingresso ela fica em cima e o rótulo "Masterclass 01
   · Inscrições abertas" desce para baixo do professor
   ========================================================================== */

.publico {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin: 0;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--publico-borda);
  border-radius: 999px;
  background: var(--publico-fundo);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.publico__cor {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--publico-cor);
}
.publico--mestrado { --publico-fundo: #e8eaf1; --publico-borda: #d6d9e4; --publico-cor: #7d7d7d; }
.publico--doutorado { --publico-fundo: #f6e4d3; --publico-borda: #f0d2b3; --publico-cor: #f6a74b; }
/* público ainda a confirmar: sem o vermelho, mas a classe segura o build */
.publico.pendente { color: var(--ink) !important; }

/* ingresso: pílula em cima, rótulo no pé */
.evento__texto .publico { margin-bottom: 4px; }
.evento__texto .evento__rotulo { margin-top: 6px; }

/* próximas: a pílula numa linha própria, entre o número e a data */
.proxima {
  grid-template-areas:
    "topo topo"
    "publico publico"
    "data tema";
}
.proxima .publico {
  grid-area: publico;
  padding: 5px 12px 5px 10px;
  font-size: 12px;
}
@media (max-width: 759px) {
  .proxima {
    grid-template-areas:
      "topo"
      "publico"
      "data"
      "tema";
  }
}

/* barra do topo com o 5º item (Para) numa linha só no desktop; no celular o
   público ocupa a linha inteira. Pílulas das próximas no tamanho do texto */
@media (min-width: 1280px) {
  .hero__barra-lista { grid-template-columns: repeat(5, auto); }
  .hero__barra-lista > div { padding-inline: 22px 0; }
  .hero__barra { gap: 30px; }
}
@media (max-width: 1279px) {
  .hero__barra-publico { grid-column: 1 / -1; }
}
.proxima .publico { justify-self: start; }

/* ==========================================================================
   Duas datas confirmadas (pedido de 20/10): no topo, uma barra para cada,
   empilhadas; o preto termina no meio da pilha (a faixa branca saiu da
   barra e foi para o invólucro). Mais respiro entre os itens e os fios
   ========================================================================== */

.hero__barras {
  grid-area: barra;
  position: relative;
  display: grid;
  gap: 14px;
}
.hero__barras .hero__barra { grid-area: auto; margin: 0; }
.hero__barra::after { content: none; }
.hero__barras::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  bottom: -59px;
  left: -100vw;
  right: -100vw;
  background: #fff;
  pointer-events: none;
}
.hero__barras .hero__barra + .hero__barra { animation-delay: -4.5s; }

/* itens com respiro dos dois lados do fio */
@media (min-width: 1280px) {
  .hero__barra-lista {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }
  .hero__barra-lista > div { padding: 2px 32px 2px 28px; }
  .hero__barra-lista > div:last-child { padding-right: 0; }
  .hero__barra { padding-top: 26px; padding-bottom: 26px; }
}
@media (max-width: 1279px) {
  .hero__barra-lista > div { padding-left: 18px; }
}
@media (max-width: 759px) {
  .hero__barras { gap: 12px; }
  .hero__barras::after { bottom: -43px; }
}

/* agenda: os dois ingressos empilhados, com o mesmo respiro entre eles */
.agenda > .ingresso + .ingresso { margin-top: 4px; }
.evento__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Topo: uma barra só, alternando entre as datas confirmadas (pedido de
   20/10). As barras ocupam a mesma célula; a ativa aparece, a outra some com
   um leve deslize. O preto continua terminando no meio da barra
   ========================================================================== */

.hero__barras { display: grid; gap: 0; }
.hero__barras > .hero__barra {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity 0.7s ease, translate 0.7s ease, visibility 0s linear 0.7s;
}
.hero__barras > .hero__barra.is-ativa {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.7s ease 0.15s, translate 0.7s ease 0.15s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .hero__barras > .hero__barra,
  .hero__barras > .hero__barra.is-ativa { transition: none; translate: none; }
}

/* carrossel (pedido de 20/10): a próxima espera à direita, a que sai vai
   para a esquerda; pontinhos embaixo da barra, no branco */
.hero__barras > .hero__barra {
  translate: 60px 0;
  transition: opacity 0.6s ease, translate 0.75s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.75s;
}
.hero__barras > .hero__barra.is-saindo { translate: -60px 0; }
.hero__barras > .hero__barra.is-ativa {
  translate: 0 0;
  transition: opacity 0.6s ease 0.1s, translate 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, visibility 0s;
}
.hero__barras-pontos {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  gap: 8px;
  margin-top: 18px;
  translate: -50% 0;
}
.hero__barras-pontos button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cfcfd5;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.hero__barras-pontos button[aria-current="true"] { width: 26px; background: var(--ink); }
.hero__barras-pontos button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 759px) {
  .hero__barras-pontos { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__barras > .hero__barra,
  .hero__barras > .hero__barra.is-saindo,
  .hero__barras > .hero__barra.is-ativa { transition: none; translate: none; }
}

/* ==========================================================================
   Masterclass só acadêmica (pedido de 20/10)
   ========================================================================== */

/* botões do topo: "Mestrado" / "Doutorado" com "Acadêmico" embaixo */
.programa__nome { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.programa__nome small {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.62);
}

/* ingresso mais alto, foto (ou monograma) vertical tipo stories e o público
   vazando para fora da caixa, à esquerda, sobre a foto */
.ingresso { position: relative; }
.ingresso__publicos {
  position: absolute;
  z-index: 3;
  top: 40px;
  left: -16px;
  display: grid;
  justify-items: start;
  gap: 8px;
  filter: drop-shadow(0 8px 16px rgba(22, 22, 22, 0.14));
}
.ingresso__publicos .publico { padding: 9px 16px 9px 13px; font-size: 13px; }
@media (min-width: 760px) {
  .ingresso .evento { grid-template-columns: 172px minmax(0, 1fr) 380px; gap: 40px; padding-left: 28px; }
  .ingresso .evento__foto { width: 172px; aspect-ratio: 9 / 16; margin: 28px 0; border-radius: 16px; }
  .ingresso .evento__texto { gap: 14px; padding: 36px 24px 36px 0; }
  .evento__resumo { max-width: 520px; color: var(--texto-claro); font-size: 17px; line-height: 1.5; }
  .ingresso .evento__prof { margin-top: 6px; padding-top: 16px; border-top: 1px solid #ececf0; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .ingresso .evento { grid-template-columns: 140px minmax(0, 1fr) 290px; gap: 28px; padding-left: 22px; }
  .ingresso .evento__foto { width: 140px; }
}
.evento__foto--inicial span { font-size: 56px; }
@media (max-width: 759px) {
  .ingresso__publicos { top: 22px; left: -8px; }
  .ingresso .evento__foto { aspect-ratio: 9 / 16; margin-top: 64px; }
  .evento__resumo { color: var(--texto-claro); font-size: 14px; line-height: 1.5; }
}


/* agenda: datas das próximas maiores, mesmas cores */
.proxima__data { font-size: 56px; letter-spacing: -0.05em; }
.proxima__data span { font-size: 13px; letter-spacing: 0.12em; }
@media (max-width: 759px) {
  .proxima__data { font-size: 56px; }
}

/* cada masterclass é para o Mestrado e o Doutorado Acadêmico: as duas
   pílulas em todas as datas (pedido de 20/10) */
.proxima__publicos {
  grid-area: publico;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proxima__publicos .publico { padding: 5px 11px 5px 9px; font-size: 11.5px; }

/* barra do topo: "Mestrado e Doutorado Acadêmico" em duas linhas, para os
   outros itens caberem antes do botão */
@media (min-width: 1280px) {
  .hero__barra-lista > div:first-child dd { max-width: 170px; white-space: normal; line-height: 1.3; }
}
@media (max-width: 759px) {
  /* celular: as duas pílulas lado a lado, vazando pela borda de cima */
  .ingresso__publicos {
    top: -15px;
    left: 14px;
    display: flex;
    gap: 6px;
  }
  .ingresso__publicos .publico { padding: 7px 11px 7px 9px; font-size: 11.5px; }
  .ingresso .evento__foto { margin-top: 34px; }
  .ingresso .evento__texto { padding-top: 34px; }
  .agenda > .ingresso:first-child { margin-top: 14px; }
}
@media (min-width: 1280px) {
  .hero__barra-lista > div:first-child dd { max-width: 200px; }
}
@media (min-width: 1280px) {
  .hero__barra-lista > div:first-child dd { max-width: none; white-space: nowrap; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .hero__barra-lista > div { padding: 2px 16px 2px 18px; }
  .hero__barra .button { min-width: 180px; padding-inline: 28px; }
  .hero__barra { gap: 22px; }
}

/* público no topo do texto do ingresso, lado a lado (pedido de 20/10: em
   cima da foto ficou ruim) */
.ingresso__publicos,
.ingresso .evento__texto .ingresso__publicos {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
  filter: none;
}
.ingresso__publicos .publico { padding: 7px 14px 7px 12px; font-size: 13px; }
@media (max-width: 759px) {
  .ingresso__publicos .publico { padding: 6px 10px 6px 9px; font-size: 11.5px; }
  .ingresso .evento__foto { margin-top: 20px; }
  .ingresso .evento__texto { padding-top: 20px; }
  .agenda > .ingresso:first-child { margin-top: 0; }
}

/* ==========================================================================
   Barra da data, nova organização (pedido de 20/10: "falta alinhamento"):
   data | público em cima e detalhes numa linha embaixo | botão. Um fio só,
   entre a data e o resto
   ========================================================================== */

.hero__barra {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 36px;
}
.hero__barra-info {
  display: grid;
  gap: 12px;
  padding-left: 36px;
  border-left: 1px solid rgba(22, 22, 22, 0.14);
}
.hero__barra-publicos { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__barra .publico {
  border-color: rgba(22, 22, 22, 0.08);
  background: rgba(255, 255, 255, 0.78);
  padding: 7px 14px 7px 12px;
  font-size: 13px;
}
.hero__barra-detalhes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  color: #45454a;
  font-size: 15px;
  line-height: 1.4;
}
.hero__barra-detalhes strong { color: var(--ink); font-weight: 600; }
.hero__barra-detalhes span + span::before {
  content: "·";
  margin: 0 12px;
  color: rgba(22, 22, 22, 0.35);
}

@media (max-width: 1279px) {
  .hero__barra { grid-template-columns: auto minmax(0, 1fr); gap: 22px 32px; }
  .hero__barra-info { padding-left: 28px; }
}
@media (max-width: 759px) {
  .hero__barra { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero__barra-info { padding: 16px 0 0; border-left: 0; border-top: 1px solid rgba(22, 22, 22, 0.12); }
  .hero__barra .publico { padding: 6px 10px 6px 9px; font-size: 11.5px; }
  .hero__barra-detalhes { flex-direction: column; gap: 4px; font-size: 14px; }
  .hero__barra-detalhes span + span::before { content: none; }
}

/* ==========================================================================
   Ingresso no tablet (760 a 1199 px; pedido de 20/10: "fica ruim, deixe mais
   na horizontal"): o canhoto vai para baixo, numa faixa horizontal com a
   data à esquerda e o botão à direita; o picote fica na horizontal e os
   recortes vão para as laterais, na altura medida pelo app.js (--corte-y)
   ========================================================================== */
@media (min-width: 760px) and (max-width: 1199px) {
  .ingresso .evento {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 32px;
    padding: 0 0 0 28px;
    -webkit-mask:
      radial-gradient(circle at 0 var(--corte-y, 70%), #0000 13px, #000 13.5px),
      radial-gradient(circle at 100% var(--corte-y, 70%), #0000 13px, #000 13.5px);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle at 0 var(--corte-y, 70%), #0000 13px, #000 13.5px),
      radial-gradient(circle at 100% var(--corte-y, 70%), #0000 13px, #000 13.5px);
    mask-composite: intersect;
  }
  .ingresso .evento__foto { width: 150px; margin: 28px 0; align-self: start; }
  .ingresso .evento__texto { padding: 32px 32px 32px 0; }
  .ingresso .evento__acao {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-left: -28px;
    padding: 24px 32px;
    border-left: 0;
    border-top: 2px dashed #cfcfd5;
    border-radius: 0 0 22px 22px;
  }
  .ingresso .evento__acao .evento__botao { flex: 0 1 300px; }
}

/* próximas no tablet estreito: rolagem lateral, cartões mais largos */
@media (min-width: 760px) and (max-width: 1023px) {
  .proximas {
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 32px;
    margin-inline: -32px;
    padding: 4px 32px 14px;
    scrollbar-width: none;
  }
  .proximas::-webkit-scrollbar { display: none; }
  .proxima { scroll-snap-align: start; }
}

/* ==========================================================================
   Produtos entre 1024 e 1279 px (pedido de 20/10: a foto era esticada na
   altura e cortava a pessoa): fica o layout empilhado do tablet, com a arte
   inteira em proporção (16:10) e os dois braços lado a lado embaixo. As três
   colunas só a partir de 1280 px
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .produto { display: flex; flex-direction: column; }
  .produto__arte { grid-template-rows: auto; }
  .produto__arte img {
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 0;
  }
  .produto__arte > .selo-produto {
    align-self: center;
    margin: 0 0 0 4cqi;
  }
  .produto__texto {
    padding: 28px 32px 32px;
    border-left: 0;
  }
  .produto__bracos {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 16px;
  }
}

/* celular: o número da data maior e "de outubro" numa linha, centralizado na
   altura do 29 (pedido de 20/10) */
@media (max-width: 759px) {
  .quebra-mes { display: none; }
  .hero__barra-data { align-items: center; gap: 12px; }
  .hero__barra-dia { font-size: 76px; line-height: 0.85; }
  .hero__barra-mes { font-size: 20px; line-height: 1; }
}

/* ==========================================================================
   Ingresso no celular, redesenhado (pedido de 20/10: "foto ruim, sem espaço,
   muita informação"; o botão fica como estava): foto ou monograma em cima, na
   largura toda; pílulas numa linha, título e professor; picote; data e botão.
   Saem no celular o rótulo, a frase do tema e o minicurrículo
   ========================================================================== */
@media (max-width: 759px) {
  .ingresso .evento {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }
  .ingresso .evento__foto {
    grid-column: 1;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 22px 22px 0 0;
  }
  .ingresso .evento__foto--inicial span { font-size: 72px; }
  .ingresso .evento__texto {
    grid-column: 1;
    gap: 10px;
    padding: 20px 20px 24px;
  }
  .ingresso__publicos { flex-wrap: nowrap; gap: 6px; margin: 0 0 4px; }
  .ingresso__publicos .publico { padding: 5px 10px 5px 8px; font-size: 11px; }
  .ingresso .evento__rotulo,
  .ingresso .evento__resumo,
  .ingresso .evento__bio { display: none; }
  .ingresso .evento .evento__tema { font-size: 27px; line-height: 1.12; }
  .ingresso .evento__prof { font-size: 14px; }
  .ingresso .evento__prof .evento__nome { font-size: 14px; }
  .ingresso .evento__acao { padding: 22px 20px 20px; gap: 16px; }
}

@media (max-width: 759px) {
  /* ingresso: as duas pílulas numa linha (seletor com o mesmo peso da regra
     que mandava quebrar) */
  .ingresso .evento__texto .ingresso__publicos { flex-wrap: nowrap; gap: 6px; }
  .ingresso .evento__texto .ingresso__publicos .publico { padding: 5px 10px 5px 8px; font-size: 11px; }

  /* ==========================================================================
     Próximas no celular, redesenhadas (pedido de 20/10: "tudo blocado, um em
     cima do outro"): número e status na mesma linha; o título sobe; a data
     vira um número grande e apagado ao fundo, à direita; as pílulas ficam
     numa linha só, separadas por um fio
     ========================================================================== */
  .proximas { grid-auto-columns: 82%; }
  .proxima {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topo"
      "tema"
      "publico";
    align-content: space-between;
    gap: 0;
    min-height: 196px;
    padding: 18px 18px 18px;
  }
  .proxima__topo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
  }
  .proxima__data {
    position: absolute;
    z-index: 0;
    top: 34px;
    right: 14px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-size: 104px;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: rgba(125, 125, 125, 0.16);
    pointer-events: none;
  }
  .proxima__data span {
    margin: 2px 4px 0 0;
    color: #8a8a90;
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .proxima__tema {
    position: relative;
    z-index: 1;
    max-width: 62%;
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.3;
  }
  .proxima__publicos {
    position: relative;
    z-index: 1;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #ececf0;
  }
  .proxima__publicos .publico { padding: 5px 9px 5px 8px; font-size: 10.5px; }
}
@media (max-width: 759px) {
  .proximas { grid-auto-columns: 86%; }
  .proxima__publicos .publico { gap: 6px; padding: 5px 8px 5px 7px; font-size: 10px; }
}

@media (max-width: 759px) {
  /* pílulas das próximas sem o quadradinho, para caberem numa linha */
  .proxima__publicos .publico { padding: 5px 9px; }
  .proxima__publicos .publico__cor { display: none; }

  /* ==========================================================================
     Produtos no celular (pedido de 20/10): o cartão do nome do programa sobe
     para o topo, a foto fica no meio e os braços (Acadêmico, Profissional)
     viram rolagem lateral
     ========================================================================== */
  .produto__arte > .selo-produto {
    grid-area: 1 / 1;
    justify-self: stretch;
    margin: 14px 14px 0;
  }
  .produto__arte > picture > img,
  .produto__arte > img { grid-area: 2 / 1; }
  .produto__texto { padding: 18px 0 20px; }
  .produto__bracos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    padding: 4px 14px 12px;
    scrollbar-width: none;
  }
  .produto__bracos::-webkit-scrollbar { display: none; }
  .produto__bracos .braco { scroll-snap-align: start; }
}

/* CAPES no celular (pedido de 20/10: "ruim em cores"): a caixa é estreita e
   alta, então o degradê vai na diagonal, de cima para baixo, com o lilás e o
   creme mais presentes, deslizando devagar na vertical */
@keyframes degrade-desliza-vertical {
  from { background-position: 50% 0%; }
  to { background-position: 50% 100%; }
}
@media (max-width: 759px) {
  .section--light .capes {
    background: linear-gradient(165deg, #dfe3f0 0%, #eef0f6 30%, #fbf3ea 62%, #f8dcbc 100%);
    background-size: 100% 150%;
    background-position: 50% 0%;
    animation: degrade-desliza-vertical 9s ease-in-out infinite alternate;
  }
  .capes__turma { background: rgba(255, 255, 255, 0.85); }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  .section--light .capes { animation: none; }
}
@media (max-width: 759px) {
  .section--light .capes {
    background: linear-gradient(170deg, #e2e5f0 0%, #e8eaf1 32%, #f3dfcb 66%, #f6c690 100%);
    background-size: 100% 140%;
  }
}

/* ==========================================================================
   Ingresso no celular, segunda versão (pedido de 20/10: a foto é stories,
   vertical; e as informações voltam todas): foto 9:16 à esquerda; ao lado,
   as pílulas, o rótulo e o título; embaixo, na largura toda, a frase do tema
   e o professor; depois o picote, a data e o botão
   ========================================================================== */
@media (max-width: 759px) {
  .ingresso .evento {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-areas:
      "foto publicos"
      "foto rotulo"
      "foto tema"
      "resumo resumo"
      "prof prof"
      "acao acao";
    grid-template-rows: auto auto 1fr auto auto auto;
    gap: 0 16px;
    padding: 18px 18px 0;
  }
  .ingresso .evento__foto {
    grid-area: foto;
    width: 100%;
    aspect-ratio: 9 / 16;
    margin: 0 0 16px;
    border-radius: 16px;
  }
  .ingresso .evento__foto--inicial span { font-size: 48px; }
  .ingresso .evento__texto { display: contents; }
  .ingresso .evento__texto .ingresso__publicos {
    grid-area: publicos;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
  }
  .ingresso .evento__rotulo,
  .ingresso .evento__resumo,
  .ingresso .evento__bio { display: revert; }
  .ingresso .evento__rotulo { grid-area: rotulo; margin: 0 0 10px; display: flex; font-size: 10px; }
  .ingresso .evento .evento__tema { grid-area: tema; align-self: start; font-size: 24px; line-height: 1.12; }
  .ingresso .evento__resumo { grid-area: resumo; margin: 2px 0 12px; display: block; }
  .ingresso .evento__prof {
    grid-area: prof;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding-top: 12px;
    border-top: 1px solid #ececf0;
  }
  .ingresso .evento__prof .evento__bio { flex-basis: 100%; display: block; }
  .ingresso .evento__acao { grid-area: acao; margin: 0 -18px; }
}

/* próximas: o "EM BREVE" também no toque (classe posta pelo app.js) */
.proxima.is-tocada .proxima__botao { opacity: 1; translate: none; }
.proxima { cursor: default; -webkit-tap-highlight-color: transparent; }

@media (max-width: 759px) {
  /* próximas: o número grande desce para a altura do título e não passa
     mais por cima do status nem do fio */
  .proxima__tema { min-height: 96px; margin-top: 20px; max-width: 58%; }
  .proxima__data {
    top: 56px;
    right: 16px;
    font-size: 88px;
    line-height: 0.8;
  }
  .proxima__data span { margin-top: 6px; }

  /* ==========================================================================
     Barra da data no celular (pedido de 20/10: "muito espaço livre à
     direita"): à esquerda o 29 com "de outubro" embaixo; um fio; à direita
     as pílulas e os detalhes; o botão na largura toda embaixo
     ========================================================================== */
  .hero__barra {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "data info"
      "botao botao";
    align-items: center;
    gap: 20px 18px;
    padding: 22px 20px 20px;
  }
  .hero__barra-data {
    grid-area: data;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .hero__barra-dia { font-size: 72px; line-height: 0.8; }
  .hero__barra-mes { font-size: 15px; line-height: 1.1; white-space: nowrap; }
  .hero__barra-info {
    grid-area: info;
    gap: 10px;
    padding: 2px 0 2px 18px;
    border-top: 0;
    border-left: 1px solid rgba(22, 22, 22, 0.14);
  }
  .hero__barra-publicos { flex-direction: column; align-items: flex-start; gap: 5px; }
  .hero__barra .publico { padding: 4px 9px 4px 8px; font-size: 11px; }
  .hero__barra-detalhes { gap: 2px; font-size: 13px; line-height: 1.35; }
  .hero__barra .button { grid-area: botao; grid-column: 1 / -1; }
}

/* ==========================================================================
   Produtos no celular, segunda versão (pedido de 20/10: o recorte do corpo
   precisa terminar numa camada): a foto entra no cartão branco, em cima; o
   corte do corpo encosta na linha da cor do programa, que passa a dividir a
   foto do texto (nome, área, mote). Tudo num cartão só, tipo stories
   ========================================================================== */
@media (max-width: 759px) {
  .produto__arte {
    margin: 14px 14px 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(22, 22, 22, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .produto__arte > picture > img,
  .produto__arte > img {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 100%;
  }
  .produto__arte > .selo-produto {
    grid-area: 2 / 1;
    justify-self: stretch;
    margin: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    padding: 22px 22px 24px;
  }
  .produto__texto { padding-top: 16px; }
}

/* ==========================================================================
   Linhas de pesquisa no celular (pedido de 20/10): duas abas lado a lado,
   Acadêmico e Profissional; cada uma abre só as suas linhas. Chips menores.
   No desktop e no tablet as abas não aparecem e os dois braços ficam abertos
   ========================================================================== */
.linhas-abas { display: none; }
@media (max-width: 759px) {
  .linhas-box.tem-abas .linhas-abas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }
  .linhas-aba {
    padding: 10px 12px;
    border: 1px solid #dcdce2;
    border-radius: 999px;
    background: #fff;
    color: #6e6e74;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .linhas-aba[aria-selected="true"] {
    border-color: var(--tag);
    background: var(--tag);
    color: var(--tag-texto);
  }
  .linhas-aba:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .linhas-box.tem-abas .linhas-box__grupo { display: none; }
  .linhas-box.tem-abas .linhas-box__grupo.is-aberto { display: block; }
  .linhas-box.tem-abas .linhas-box__grupo + .linhas-box__grupo { margin-top: 0; padding-top: 0; border-top: 0; }
  .linhas-box.tem-abas .linhas-box__braco { display: none; }
  .linhas-box__titulo { margin-bottom: 14px; font-size: 22px; }
  .chips { gap: 8px; }
  .chip { gap: 8px; padding: 5px 14px 5px 5px; font-size: 13px; }
  .chip svg { width: 28px; height: 28px; padding: 6px; }
}

/* barra da data no celular (pedido de 20/10): o "29 de outubro" cresce até a
   altura do bloco da direita, e as informações encostam na margem direita,
   alinhadas à direita */
@media (max-width: 759px) {
  .hero__barra { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .hero__barra-data { justify-content: center; gap: 8px; }
  .hero__barra-dia { font-size: 108px; line-height: 0.78; letter-spacing: -0.06em; }
  .hero__barra-mes { font-size: 18px; }
  .hero__barra-info {
    justify-self: end;
    align-content: center;
    justify-items: end;
    text-align: right;
  }
  .hero__barra-publicos { align-items: flex-end; }
  .hero__barra-detalhes { align-items: flex-end; }
}
@media (max-width: 379px) {
  .hero__barra { column-gap: 14px; padding-inline: 16px; }
  .hero__barra-dia { font-size: 88px; }
  .hero__barra-mes { font-size: 15px; }
  .hero__barra-info { padding-left: 14px; }
  .hero__barra-detalhes { font-size: 12.5px; }
}

/* ==========================================================================
   Ingresso no celular, terceira versão (pedido de 20/10): foto à esquerda e
   todo o texto à direita, alinhado à direita; a frase do tema logo abaixo do
   título; no canhoto, o 29 numa borda e "de outubro / quinta-feira · 20h"
   na outra
   ========================================================================== */
@media (max-width: 759px) {
  .ingresso .evento {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    grid-template-areas:
      "foto publicos"
      "foto rotulo"
      "foto tema"
      "foto resumo"
      "foto prof"
      "acao acao";
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  .ingresso .evento__foto { margin-bottom: 18px; }
  .ingresso .evento__texto .ingresso__publicos {
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
  }
  .ingresso .evento__rotulo,
  .ingresso .evento .evento__tema,
  .ingresso .evento__resumo,
  .ingresso .evento__prof { justify-self: end; text-align: right; }
  .ingresso .evento__rotulo { justify-content: flex-end; }
  .ingresso .evento__resumo { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
  .ingresso .evento__prof {
    align-self: end;
    justify-content: flex-end;
    margin: 12px 0 18px;
    padding-top: 10px;
    font-size: 13px;
  }
  .ingresso .evento__prof .evento__nome { font-size: 13px; }
  .ingresso .evento__prof .evento__bio { font-size: 11.5px; }

  /* canhoto: 29 à esquerda; mês e dia da semana colados à direita */
  .ingresso .evento__data {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
  }
  .ingresso .evento__dia { grid-row: 1 / 3; }
  .ingresso .evento__mes,
  .ingresso .evento__semana { justify-self: end; text-align: right; }
  .ingresso .evento__semana { white-space: nowrap; }
}
@media (max-width: 759px) {
  .ingresso .evento__rotulo { display: block; }
  .ingresso .evento__rotulo::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
}

/* minicurrículo do professor numa linha própria, embaixo do nome */
.ingresso .evento__prof .evento__bio {
  flex-basis: 100%;
  margin-top: 4px;
  color: var(--texto-claro);
  font-size: 13px;
  line-height: 1.5;
}
.ingresso .evento__prof .evento__bio::before { content: none; }
.ingresso .evento__prof { max-width: 560px; }
@media (max-width: 759px) {
  .ingresso .evento__prof .evento__bio { font-size: 11.5px; line-height: 1.45; }
}

@media (max-width: 759px) {
  /* produto (celular): a linha encosta na foto (sem a fresta) e o cartão
     arredonda embaixo (o vidro do cartão do nome escapava do recorte) */
  .produto__arte > .selo-produto {
    position: relative;
    z-index: 1;
    margin-top: -3px;
    border-radius: 0 0 22px 22px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .produto__arte { isolation: isolate; }

  /* barra da data (celular): duas metades iguais, o fio exatamente no meio e
     mais escuro; o 29 menor e centralizado na metade da esquerda */
  .hero__barra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .hero__barra-data { justify-self: center; padding-right: 16px; }
  .hero__barra-dia { font-size: 82px; }
  .hero__barra-mes { font-size: 16px; }
  .hero__barra-info {
    justify-self: stretch;
    padding-left: 16px;
    border-left: 1px solid rgba(22, 22, 22, 0.32);
  }
}
@media (max-width: 379px) {
  .hero__barra-dia { font-size: 70px; }
  .hero__barra-mes { font-size: 14px; }
  .hero__barra-info { padding-left: 12px; }
}
@media (max-width: 759px) {
  .hero__barra { padding-inline: 16px; }
  .hero__barra-info { min-width: 0; }
  .hero__barra .publico { padding: 4px 9px; font-size: 10.5px; }
  .hero__barra .publico__cor { display: none; }
  .hero__barra-detalhes { font-size: 12.5px; }
  .hero__barra-detalhes span { white-space: normal; }
}

/* ==========================================================================
   Ingresso no celular, quarta versão (pedido de 20/10): ao lado da foto só
   as pílulas, o título e a frase do tema; abaixo da foto, na largura toda, o
   rótulo e, separado por um fio, o professor com o minicurrículo
   ========================================================================== */
@media (max-width: 759px) {
  .ingresso .evento {
    grid-template-areas:
      "foto publicos"
      "foto tema"
      "foto resumo"
      "rotulo rotulo"
      "prof prof"
      "acao acao";
    grid-template-rows: auto auto 1fr auto auto auto;
  }
  .ingresso .evento__foto { margin-bottom: 16px; }
  .ingresso .evento__resumo { align-self: start; margin: 8px 0 16px; }
  .ingresso .evento__rotulo {
    justify-self: start;
    text-align: left;
    margin: 0 0 14px;
  }
  .ingresso .evento__prof {
    justify-self: stretch;
    justify-content: flex-start;
    text-align: left;
    margin: 0 0 20px;
    padding-top: 14px;
  }
  .ingresso .evento__prof .evento__bio { font-size: 12.5px; line-height: 1.5; }
}
@media (max-width: 759px) {
  /* pílulas da barra (celular): de volta com a cor do programa e a bolinha,
     e encostadas à direita (a pílula tinha align-self próprio à esquerda) */
  .hero__barra .publico {
    align-self: flex-end;
    gap: 5px;
    padding: 4px 8px 4px 7px;
    border-color: var(--publico-borda);
    background: var(--publico-fundo);
    font-size: 10px;
  }
  .hero__barra .publico__cor { display: block; width: 6px; height: 6px; }
}
@media (max-width: 379px) {
  .hero__barra .publico { padding: 4px 7px 4px 6px; font-size: 9.5px; }
}
@media (max-width: 759px) {
  /* ingresso: o texto da direita centralizado na altura da foto, pílulas
     encostadas à direita, rótulo numa linha só */
  .ingresso .evento {
    grid-template-areas:
      "foto ."
      "foto publicos"
      "foto tema"
      "foto resumo"
      "foto ."
      "rotulo rotulo"
      "prof prof"
      "acao acao";
    grid-template-rows: 1fr auto auto auto 1fr auto auto auto;
  }
  .ingresso .evento__resumo { margin-bottom: 0; }
  .ingresso .evento__texto .ingresso__publicos .publico { align-self: flex-end; }
  .ingresso .evento__rotulo {
    white-space: nowrap;
    font-size: clamp(8.5px, 2.55vw, 10px);
    letter-spacing: 0.08em;
  }
}

/* selo do ingresso: só no celular, vazando pela borda de cima, centralizado,
   em vidro, com a bolinha laranja (pedido de 20/10) */
.ingresso__selo { display: none; }
@media (max-width: 759px) {
  .ingresso { margin-top: 16px; }
  .ingresso__selo {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 16px rgba(22, 22, 22, 0.1);
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    translate: -50% -50%;
  }
  .ingresso__selo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kv-laranja);
  }
  .ingresso .evento__rotulo { display: none; }
  .ingresso .evento { padding-top: 28px; }
  .ingresso .evento { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .ingresso .evento__prof { margin-top: 4px; }
}
@media (max-width: 759px) {
  /* produto (celular): sem a borda branca do vidro, que passava por cima do
     fim da foto; a linha da cor encosta direto no recorte */
  .produto__arte > .selo-produto { border: 0; }

  /* braços em rolagem: espaço embaixo para a sombra não ser cortada pela
     faixa (o corte aparecia como um retângulo claro) e sombra mais curta */
  .produto__bracos { padding-bottom: 30px; margin-bottom: -18px; }
  .produto__bracos .braco { box-shadow: 0 8px 18px rgba(22, 22, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
}

/* ingresso no celular, teste (pedido de 20/10): texto à esquerda, alinhado à
   esquerda, e a foto à direita */
@media (max-width: 759px) {
  .ingresso .evento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    grid-template-areas:
      ". foto"
      "publicos foto"
      "tema foto"
      "resumo foto"
      ". foto"
      "rotulo rotulo"
      "prof prof"
      "acao acao";
  }
  .ingresso .evento__texto .ingresso__publicos {
    align-items: flex-start;
    justify-self: start;
  }
  .ingresso .evento__texto .ingresso__publicos .publico { align-self: flex-start; }
  .ingresso .evento .evento__tema,
  .ingresso .evento__resumo { justify-self: start; text-align: left; }
}

/* canhoto do ingresso no desktop: data maior (pedido de 20/10) */
@media (min-width: 1200px) {
  .ingresso .evento__data { column-gap: 14px; }
  .ingresso .evento__dia { font-size: 96px; }
  .ingresso .evento__mes { font-size: 24px; }
  .ingresso .evento__semana { margin-top: 6px; font-size: 13px; }
  .ingresso .evento__acao { gap: 22px; }
}

/* próximas: agora são duas (pedido de 20/10: a 01 passou para 05/11) */
@media (min-width: 1024px) {
  .proximas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Produtos no tablet (760 a 1279 px; pedido de 20/10: "a imagem fica ruim"):
   o mesmo cartão do celular (foto com a pessoa no centro, o corte encostado
   na linha da cor e o nome embaixo) à esquerda; os dois braços empilhados à
   direita. A arte do tablet é a do celular (picture até 1279 px)
   ========================================================================== */
@media (min-width: 760px) and (max-width: 1279px) {
  .produto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .produto__arte {
    display: grid;
    grid-template-rows: auto auto;
    align-self: start;
    margin: 24px 0 24px 24px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(22, 22, 22, 0.08);
  }
  .produto__arte > picture > img,
  .produto__arte > img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 100%;
  }
  .produto__arte > .selo-produto {
    grid-area: 2 / 1;
    position: relative;
    z-index: 1;
    align-self: stretch;
    justify-self: stretch;
    width: auto;
    margin: -3px 0 0;
    padding: 22px 24px 24px;
    border: 0;
    border-radius: 0 0 22px 22px;
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .produto__arte > .selo-produto .produto__mote { margin-top: 0; }
  .produto__texto {
    align-self: center;
    padding: 24px;
    border: 0;
  }
  .produto__bracos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 16px;
  }
}

/* ==========================================================================
   Produtos no tablet, segunda versão (760 a 1279 px; pedido de 20/10): à
   esquerda só a foto, vertical, com o corte encostado na linha da cor; à
   direita, em cima, o cartão do nome com todo o texto e, embaixo, os dois
   braços. A arte entra no grid do cartão (display: contents), então os
   tamanhos do cartão do nome passam a ser em px
   ========================================================================== */
@media (min-width: 760px) and (max-width: 1279px) {
  .produto {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "foto selo"
      "foto texto";
    align-items: stretch;
    gap: 16px 24px;
    padding: 24px;
  }
  .produto__arte { display: contents; }
  .produto__arte > picture > img,
  .produto__arte > img {
    grid-area: foto;
    width: 100%;
    height: 100%;
    min-height: 420px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 100%;
    border-bottom: 3px solid var(--tag);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(22, 22, 22, 0.08);
  }
  .produto__arte > .selo-produto {
    grid-area: selo;
    margin: 0;
    padding: 24px 26px 26px;
    gap: 12px;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(22, 22, 22, 0.06);
  }
  .selo-produto__nome { font-size: clamp(24px, 3vw, 34px); }
  .selo-produto__tipo { margin-top: 6px; font-size: 11px; }
  .selo-produto__area { padding-top: 12px; font-size: 14px; }
  .selo-produto .produto__mote { padding-top: 12px; font-size: clamp(15px, 1.8vw, 20px); }
  .produto__texto { grid-area: texto; align-self: start; padding: 0; }
  .produto__bracos { gap: 16px; }
}

/* ===== Open Class: a palavra do topo (20/10) =====
   "OPEN CLASS" tem outra largura que "MASTERCLASS": tamanho recalculado para
   seguir de margem a margem, nas duas camadas. No celular, "OPEN" / "CLASS",
   com o CLASS de margem a margem e sem o espaço no fim da primeira linha */
.hero__marca-titulo,
.hero__marca-contorno { font-size: 14.55cqi; }
@media (max-width: 759px) {
  .marca-espaco { display: none; }
  .hero__marca-titulo,
  .hero__marca-contorno { font-size: 28.6cqi; }
}

/* contorno do título grande um pouco mais grosso (pedido de 20/10: estava
   fino demais); no celular, onde a letra é menor, um pouco menos */
.hero__marca-contorno { -webkit-text-stroke-width: 2px; }
@media (max-width: 759px) {
  .hero__marca-contorno { -webkit-text-stroke-width: 1.5px; }
}

/* ==========================================================================
   Próximas (pedido de 20/10): do tablet para cima as duas boxes ocupam o
   grid inteiro, metade cada (sem sobra à direita), e a linha de baixo vira
   horizontal: o número com o mês ao lado, à esquerda; o tema encostado à
   direita, na prumada do "Em produção". O celular continua como estava
   ========================================================================== */
@media (min-width: 760px) {
  .proximas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }
  .proxima { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .proxima__data { flex-direction: row; align-items: baseline; gap: 10px; }
  .proxima__data span { margin: 0; }
  .proxima__tema { justify-self: end; max-width: 100%; text-align: right; }
}

/* ==========================================================================
   Inscrição em pop-up (pedido de 20/10): todo "Inscreva-se" abre esta
   janela. Card do evento em cima, campos embaixo, botão preto da página. No
   celular ela sobe da base da tela, na largura toda
   ========================================================================== */
html.tem-modal { overflow: hidden; }

.inscricao {
  width: min(600px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.inscricao::backdrop {
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.inscricao[open] { animation: inscricao-entra 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes inscricao-entra {
  from { translate: 0 18px; scale: 0.98; }
  to { translate: none; scale: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inscricao[open] { animation: none; }
}

.inscricao__caixa { position: relative; padding: 36px 36px 32px; }
.inscricao__etapa { display: grid; gap: 18px; }
.inscricao__etapa[hidden] { display: none; }
.inscricao .eyebrow { margin: 0; }
.inscricao h2 {
  margin: -8px 0 0;
  padding-right: 48px;
  font-size: 30px;
  line-height: 1.15;
}

.inscricao__fechar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e3e3e8;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, rotate 0.3s ease;
}
.inscricao__fechar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
@media (any-hover: hover) {
  .inscricao__fechar:hover { background: #f3f4f8; rotate: 90deg; }
}
.inscricao__fechar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* o card do evento: pequeno, no degradê claro do ingresso */
.inscricao__evento {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border: 1px solid #e3e3e8;
  border-radius: 18px;
  background: linear-gradient(100deg, #eceef4 0%, #f7efe6 100%);
}
.inscricao__evento img {
  width: 64px;
  height: 84px;
  border-radius: 12px;
  object-fit: cover;
  object-position: 50% 18%;
  background: #fff;
}
.inscricao__evento-rotulo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.inscricao__evento-tema {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.inscricao__evento-info { font-size: 12.5px; line-height: 1.5; color: var(--texto-claro); }

/* campos: nome e o campo extra na largura toda; WhatsApp e e-mail lado a lado */
.inscricao__form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.campo--largo { grid-column: 1 / -1; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo label { font-size: 13px; font-weight: 600; color: var(--ink); }
.campo__input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #d6d6dc;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo__input::placeholder { color: #a8a8ae; }
.campo__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(246, 167, 75, 0.35);
}
select.campo__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}
select.campo__input:invalid { color: #8a8a90; }
.campo__input.is-invalid { border-color: #b45309; }
.campo__erro { font-size: 12.5px; line-height: 1.4; color: #b45309; }

/* campo-armadilha: fora da tela sem criar rolagem (guia, seção 9) */
.campo-armadilha {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inscricao__nota { font-size: 12px; line-height: 1.5; color: var(--texto-claro); }
.inscricao__nota a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.inscricao .inscricao__enviar {
  width: 100%;
  min-height: 62px;
  border: 0;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}
.inscricao .inscricao__enviar:disabled { cursor: progress; opacity: 0.75; }
.inscricao__status { font-size: 13px; line-height: 1.5; color: #b45309; }
.inscricao__status:empty { display: none; }

/* confirmação */
.inscricao__sucesso { justify-items: center; padding: 8px 0 4px; text-align: center; }
.inscricao__sucesso h2 { margin: 0; padding: 0; outline: none; }
.inscricao__sucesso p { max-width: 440px; font-size: 15px; line-height: 1.6; color: var(--texto-claro); }
.inscricao__duvida a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.inscricao__check {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--kv-degrade);
}
.inscricao__check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #161616;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inscricao__previa {
  padding: 8px 14px;
  border-radius: 10px;
  background: #f3f4f8;
  font-size: 12px !important;
}
.inscricao__ok {
  margin-top: 4px;
  padding: 14px 34px;
  border: 0;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.inscricao__ok:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 759px) {
  .inscricao {
    width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  @keyframes inscricao-sobe {
    from { translate: 0 40px; }
    to { translate: none; }
  }
  .inscricao[open] { animation-name: inscricao-sobe; }
  .inscricao__caixa { padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); }
  .inscricao h2 { font-size: 24px; }
  .inscricao__form { grid-template-columns: minmax(0, 1fr); }
  .inscricao__evento-tema { font-size: 15px; }
}

/* pop-up: o rótulo "Inscrição" legível no fundo branco; no celular a
   confirmação desce para o aviso da prévia não encostar no botão de fechar */
.inscricao .eyebrow { color: var(--muted-2); }
@media (max-width: 759px) {
  .inscricao__sucesso { padding-top: 44px; }
}

/* ==========================================================================
   Aviso de cookies (21/10): modelo aprovado de produtos.fucape.br (Guia,
   seção 16), com os cantos e as cores desta LP. Card no canto de baixo à
   direita; no celular, na largura toda. Recusar e Aceitar iguais (ANPD)
   ========================================================================== */
.cookies {
  position: fixed;
  z-index: 70;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 20px;
  border: 1px solid #e3e3e8;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.cookies[hidden] { display: none; }
.cookies__texto { font-size: 13.5px; line-height: 1.6; color: var(--texto-claro); }
.cookies__texto a,
.cookies__personalizar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookies__personalizar { margin-left: 10px; }
.cookies__preferencias {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ececf0;
}
.cookies__preferencias[hidden] { display: none; }
.cookies__opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--texto-claro);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.cookies__opcao strong { display: block; color: var(--ink); font-weight: 600; }
.cookies__opcao input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #161616;
}
.cookies__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.botao-cookie {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.botao-cookie--salvar { justify-self: start; width: auto; padding-inline: 22px; }
.botao-cookie:focus-visible,
.cookies__texto a:focus-visible,
.cookies__personalizar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (any-hover: hover) {
  .botao-cookie:hover { background: #2a2a2e; }
}
@media (min-width: 640px) {
  .cookies {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 420px;
    padding: 24px;
  }
}

/* "Preferências de cookies" no rodapé, com a cara dos links da coluna */
.footer-cookies {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-2);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}
@media (any-hover: hover) {
  .footer-cookies:hover { color: var(--kv-lilas-forte); }
}
@media (max-width: 1023px) {
  .footer-cookies { align-self: center; }
}

/* "Saiba mais" e "Personalizar" não quebram no meio */
.cookies__texto a,
.cookies__personalizar { white-space: nowrap; }

/* ==========================================================================
   Revisão da redação (21/10): só o profissional nesta LP
   ========================================================================== */
/* "Para quem é" com dois parágrafos na coluna da direita */
.section-head__texto { display: grid; gap: 12px; }
.section-head__texto p { color: var(--texto-claro); font-size: 16px; line-height: 1.65; }

/* produtos com um braço só: ele ocupa a coluna inteira e o botão desce */
.produto__bracos:has(> .braco:only-child) { grid-template-rows: minmax(0, 1fr); }
.produto__bracos > .braco:only-child { display: flex; flex-direction: column; height: 100%; }
.produto__bracos > .braco:only-child .braco__botao { margin-top: auto; }
.produto__bracos > .braco:only-child .braco__topo { flex-wrap: wrap; row-gap: 10px; }

/* linhas: nome e descrição de cada uma (textos das páginas no fucape.br) */
.linhas-lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.linha-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px 16px 14px;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
}
.linha-item > svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  background: var(--chip-fundo);
  color: var(--chip-icone);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.linha-item h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.linha-item p { font-size: 14px; line-height: 1.6; color: var(--texto-claro); }

/* convite para o acadêmico, no pé das linhas */
.convite-academico {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
  padding: 28px 32px;
  border: 1px solid #dcdce2;
  border-radius: 22px;
  background: linear-gradient(100deg, #eceef4 0%, #f7f7f9 60%);
}
.convite-academico__titulo { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.convite-academico p { max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--texto-claro); }
.convite-academico__botao { --tag: #e8eaf1; --tag-texto: var(--ink); align-self: center; padding: 7px 7px 7px 22px; font-size: 14px; }
.convite-academico__botao .braco__seta { width: 36px; height: 36px; }
@media (max-width: 759px) {
  .convite-academico { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .convite-academico__titulo { font-size: 19px; }
  .convite-academico__botao { justify-self: start; }
}

/* celular: com um braço só, ele ocupa a largura toda (sem rolagem lateral);
   o botão do convite acadêmico na largura do card */
@media (max-width: 759px) {
  .produto__bracos:has(> .braco:only-child) { grid-auto-columns: 100%; overflow-x: visible; }
  .convite-academico__botao { justify-self: stretch; justify-content: space-between; }
}

/* tablet: o braço único desce até o pé da foto, com o botão embaixo */
@media (min-width: 760px) and (max-width: 1279px) {
  .produto__texto:has(.braco:only-child) { align-self: stretch; display: flex; flex-direction: column; }
  .produto__texto:has(.braco:only-child) > .produto__bracos { flex: 1; }
}

/* braço único (21/10): etiquetas empilhadas na vertical nos dois programas e
   o botão preto maior, na largura do texto, com a seta no fim */
.produto__bracos > .braco:only-child .braco__topo { flex-direction: column; align-items: flex-start; }
.produto__bracos > .braco:only-child .braco__meta { flex-direction: column; align-items: flex-start; }
.produto__bracos > .braco:only-child .braco__botao {
  align-self: stretch;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px 8px 8px 24px;
  font-size: 15px;
}
.produto__bracos > .braco:only-child .braco__botao .braco__seta { width: 40px; height: 40px; }

/* ==========================================================================
   Box "Também na Fucape" (21/10): a outra frente só aparece aqui, no fim das
   linhas. Em cima o convite e o botão para a outra LP; embaixo o resumo dos
   dois programas da outra frente (duração, formato, para quem é, linhas e
   link do curso)
   ========================================================================== */
.convite-academico { display: none; }
.outra-frente {
  margin-top: 28px;
  padding: 32px;
  border: 1px solid #dcdce2;
  border-radius: 28px;
  background: linear-gradient(115deg, #eceef4 0%, #f7f7f9 48%, #f7efe6 100%);
}
.outra-frente__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}
.outra-frente .eyebrow { margin: 0 0 10px; color: var(--muted-2); }
.outra-frente__titulo { margin: 0 0 8px; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.outra-frente__topo p:not(.eyebrow) { max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--texto-claro); }
.outra-frente__cta {
  --tag: var(--kv-laranja);
  --tag-texto: #000;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px 8px 8px 24px;
  font-size: 15px;
}
.outra-frente__cta .braco__seta { width: 40px; height: 40px; }
.outra-frente__programas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.outra-frente__programa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-top: 3px solid var(--kv-grafite);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 26px rgba(22, 22, 22, 0.06);
}
.outra-frente__programa--doutorado { border-top-color: var(--kv-laranja); }
.outra-frente__cabeca { display: grid; gap: 10px; }
.outra-frente__cabeca h4 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.outra-frente__cabeca .braco__meta { flex-direction: row; }
.outra-frente__programa > p { font-size: 14px; line-height: 1.6; color: var(--texto-claro); }
.outra-frente__linhas { padding-top: 12px; border-top: 1px solid #ececf0; font-size: 13px !important; }
.outra-frente__linhas span {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.outra-frente__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.outra-frente__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.3s ease;
}
@media (any-hover: hover) {
  .outra-frente__link:hover svg { rotate: 45deg; }
}
@media (max-width: 1023px) {
  .outra-frente__topo { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
  .outra-frente__cta { justify-self: start; }
}
@media (max-width: 759px) {
  .outra-frente { padding: 24px 18px; border-radius: 22px; }
  .outra-frente__titulo { font-size: 21px; }
  .outra-frente__cta { justify-self: stretch; }
  .outra-frente__programas { grid-template-columns: minmax(0, 1fr); }
  .outra-frente__programa { padding: 18px; }
}

/* agenda (21/10): título em duas linhas ("Open Class:" / "casos reais de
   gestão") centralizado na altura do texto da direita, que é mais longo */
#agenda .section-head { align-items: center; }

/* texto da agenda (21/10: "quebra de linha muito ruim"): no desktop a coluna
   ganha 40px e o texto quebra em quatro linhas parelhas, sem palavra curta no
   fim; abaixo disso ele corre livre */
.quebra-agenda { display: none; }
@media (min-width: 1280px) {
  #agenda .section-head { grid-template-columns: 1fr 450px; }
  #agenda .section-head > p { text-wrap: wrap; }
  .quebra-agenda { display: inline; }
}

/* temas das próximas maiores (21/10), do tablet para cima */
@media (min-width: 760px) {
  .proxima__tema { font-size: 20px; line-height: 1.3; font-weight: 600; }
}
@media (min-width: 1024px) {
  .proxima__tema { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
}

/* CAPES (21/10): quebra antes de "têm nota máxima" só onde cabe em duas linhas */
.quebra-capes { display: none; }
@media (min-width: 1280px) {
  .quebra-capes { display: inline; }
}

/* box "Também na Fucape" (21/10): o botão centralizado na altura do texto */
@media (min-width: 1024px) {
  .outra-frente__topo { align-items: center; }
  .outra-frente__topo > .outra-frente__cta { align-self: center; }
}
.outra-frente__topo > .outra-frente__cta { margin-top: 0; }

/* ==========================================================================
   Celular (21/10): foto, nome, mote e o braço numa caixa só por programa,
   com o fundo do card do programa (o da caixa de baixo, que ficou melhor).
   Só abaixo de 760px; tablet e desktop seguem como estavam
   ========================================================================== */
@media (max-width: 759px) {
  .produto__arte {
    margin: 0;
    border-radius: 22px 22px 0 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }
  .produto__arte > .selo-produto { background: transparent; }
  .produto__texto { padding: 0 0 22px; }
  .produto__bracos,
  .produto__bracos:has(> .braco:only-child) {
    margin: 0;
    padding: 0 22px;
    overflow: visible;
  }
  .produto__bracos > .braco,
  .produto__bracos .braco {
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid rgba(22, 22, 22, 0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* celular (21/10): "Profissional"/"Acadêmico" embaixo do nome estava pequeno */
@media (max-width: 759px) {
  .selo-produto__tipo { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--texto-claro); }
}
/* celular: "Ciências Contábeis e Administração" no tamanho do texto do programa */
@media (max-width: 759px) {
  .selo-produto__area { font-size: 14px; line-height: 1.5; }
}

/* celular (21/10): caixa do programa lisa, sem as luzes coloridas que andam
   no fundo, só com uma sombra atrás */
@media (max-width: 759px) {
  .produto::before,
  .produto::after { content: none; animation: none; }
  .produto {
    background: #fff;
    box-shadow: 0 16px 40px rgba(22, 22, 22, 0.1);
  }
}

/* celular (21/10): nome do programa maior na caixa */
@media (max-width: 759px) {
  .selo-produto__nome { font-size: 28px; line-height: 1.1; }
}