/* =========================================================
   Método Tuller · folha de estilo única
   Tokens e regras: ver DESIGN-SYSTEM.md e /design-system/
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta oficial (Manual da Marca Método Tuller, cap. 02) */
  --mt-petroleo: #113540;   /* primária · 60% */
  --mt-gelo:     #AACDDB;   /* secundária · 30% */
  --mt-branco:   #FFFFFF;   /* apoio · 10% */
  --mt-preto:    #111111;   /* apoio (monocromia, texto longo em fundo claro) */

  /* Derivações para tela (não são cores novas: são a paleta em transparência) */
  --mt-nevoa:        #F2F6F7;                 /* fundo claro alternado (gelo a ~15% sobre branco) */
  --mt-petroleo-90:  #1B4552;                 /* hover de superfície petróleo */
  --mt-texto:        #113540;
  --mt-texto-suave:  rgba(17, 53, 64, .78);
  --mt-linha:        rgba(17, 53, 64, .14);
  --mt-linha-escura: rgba(170, 205, 219, .22);
  --mt-gelo-texto:   #C9DFE8;                 /* corpo de texto sobre petróleo */

  /* Tipografia (cap. 03): Montserrat 700 títulos · 600 subtítulos · 500 rótulos · 400 texto, entrelinha 150% */
  --mt-fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mt-h1: clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
  --mt-h2: clamp(1.7rem, 1.2rem + 2vw, 2.75rem);
  --mt-h3: clamp(1.15rem, 1.05rem + .4vw, 1.375rem);
  --mt-corpo: 1.0625rem;
  --mt-pequeno: .9375rem;
  --mt-rotulo: .75rem;

  /* Espaço e forma */
  --mt-gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --mt-secao: clamp(4rem, 3rem + 5vw, 7.5rem);
  --mt-largura: 1200px;
  --mt-raio: 16px;         /* cartões, fotos, avisos (pedido do Jonathas em 07/11: cantos arredondados) */
  --mt-raio-pequeno: 10px; /* elementos internos menores */
  --mt-raio-botao: 12px;  /* botões, selos e filtros com canto suave (sem pílula) */
  --mt-sombra: 0 1px 2px rgba(17,53,64,.06), 0 8px 24px rgba(17,53,64,.08);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mt-fonte);
  font-size: var(--mt-corpo);
  line-height: 1.5;
  color: var(--mt-texto);
  background: var(--mt-branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--mt-h1); }
h2 { font-size: var(--mt-h2); }
h3 { font-size: var(--mt-h3); font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--mt-gelo); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--mt-gelo); color: var(--mt-petroleo); padding: .75rem 1rem; z-index: 100; font-weight: 600; }
.skip:focus { left: 1rem; top: 1rem; }

.container { width: 100%; max-width: var(--mt-largura); margin: 0 auto; padding: 0 var(--mt-gutter); }
.secao { padding: var(--mt-secao) 0; }
.secao--nevoa { background: var(--mt-nevoa); }
.secao--gelo { background: var(--mt-gelo); }
.secao--petroleo { background: var(--mt-petroleo); color: var(--mt-branco); }
.secao--petroleo p, .secao--petroleo li { color: var(--mt-gelo-texto); }
.secao--petroleo h2, .secao--petroleo h3 { color: var(--mt-branco); }

/* ---------- 3. Rótulo (eyebrow) e número de capítulo ---------- */
.rotulo {
  display: inline-block;
  font-size: var(--mt-rotulo);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--mt-texto-suave);
}
.secao--petroleo .rotulo, .hero .rotulo { color: var(--mt-gelo); }
.capitulo {
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--mt-gelo);
  margin-bottom: .25rem;
  letter-spacing: -.02em;
}
.secao--gelo .capitulo { color: var(--mt-petroleo); }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--mt-texto-suave); max-width: 60ch; }
.secao--petroleo .lead, .hero .lead { color: var(--mt-gelo-texto); }
.cabeca-secao { max-width: 760px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.cabeca-secao--centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabeca-secao--centro .lead { margin-left: auto; margin-right: auto; }

/* ---------- 4. Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.5rem;
  font: 600 .9375rem/1.2 var(--mt-fonte);
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--mt-raio-botao);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
  text-align: center;
}
.btn--primario { background: var(--mt-petroleo); color: var(--mt-branco); }
.btn--primario:hover { background: var(--mt-petroleo-90); }
.btn--gelo { background: var(--mt-gelo); color: var(--mt-petroleo); }
.btn--gelo:hover { background: var(--mt-branco); }
.btn--contorno { border-color: currentColor; color: var(--mt-petroleo); background: transparent; }
.btn--contorno:hover { background: var(--mt-petroleo); color: var(--mt-branco); border-color: var(--mt-petroleo); }
.secao--petroleo .btn--contorno, .hero .btn--contorno { color: var(--mt-branco); }
.secao--petroleo .btn--contorno:hover, .hero .btn--contorno:hover { background: var(--mt-gelo); color: var(--mt-petroleo); border-color: var(--mt-gelo); }
.btn--link { padding: 0; min-height: auto; border: 0; background: none; color: var(--mt-petroleo); text-decoration: underline; text-underline-offset: 4px; }
.botoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- 5. Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--mt-petroleo);
  border-bottom: 1px solid var(--mt-linha-escura);
}
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.topo__logo img { height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.menu a { color: var(--mt-branco); text-decoration: none; font-weight: 500; font-size: .9375rem; padding: .5rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--mt-gelo); }
.menu .btn { border-bottom-width: 2px; padding: .6rem 1.1rem; min-height: 42px; }
.menu .btn:hover { border-bottom-color: transparent; }
.menu-toggle {
  display: none; background: none; border: 0; color: var(--mt-branco);
  width: 48px; height: 48px; margin-right: -12px; cursor: pointer;
}
.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--mt-petroleo);
    padding: .5rem var(--mt-gutter) 1.5rem;
    border-bottom: 1px solid var(--mt-linha-escura);
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 1rem 0; border-bottom: 1px solid var(--mt-linha-escura); }
  .menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--mt-linha-escura); color: var(--mt-gelo); }
  .menu .btn { margin-top: 1rem; border-bottom: 2px solid transparent; }
  .topo__logo img { height: 38px; }
}

/* ---------- 6. Hero ---------- */
.hero { background: var(--mt-petroleo); color: var(--mt-branco); overflow: hidden; }
.hero__grade { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.hero__texto { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; }
.hero h1 { color: var(--mt-branco); max-width: 15ch; }
.hero .lead { margin-bottom: 2rem; }
.hero__foto { align-self: end; position: relative; }
/* A foto tem fundo petróleo escuro: as bordas esquerda e superior se dissolvem no fundo do hero,
   e a base encosta na borda da seção, para a Andreia "sair" do fundo em vez de ficar num quadro. */
/* Foto recortada (fundo removido): a Andreia fica direto sobre o petróleo, com um halo gelo atrás
   e os anéis girando; a base encosta no fim da seção. */
.hero__foto::before {
  content: ""; position: absolute; z-index: 0;
  left: 6%; right: -6%; bottom: 0; height: 88%;
  background: radial-gradient(closest-side, rgba(170,205,219,.28), rgba(170,205,219,0));
}
.hero__foto img {
  position: relative; z-index: 1;
  width: 100%; max-width: 500px; margin-left: auto; height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.28));
}
.hero--interna .hero__texto { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.hero--interna h1 { max-width: 20ch; }
.hero__marca { width: clamp(72px, 10vw, 112px); margin-bottom: 1.75rem; }
@media (max-width: 860px) {
  .hero__grade { grid-template-columns: 1fr; }
  .hero__texto { padding-bottom: 0; }
  .hero__foto img { max-width: 380px; margin: 0 auto; }
}

/* ---------- 7. Grades ---------- */
.grade { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.75rem); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade--3, .grade--2 { grid-template-columns: 1fr; } }
.dividido { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.dividido--foto-menor { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 860px) { .dividido, .dividido--foto-menor { grid-template-columns: 1fr; } }

/* ---------- 8. Cartão "olhar" (três olhares do método) ---------- */
.olhar { border-top: 2px solid var(--mt-petroleo); padding-top: 1.5rem; }
.secao--petroleo .olhar { border-top-color: var(--mt-gelo); }
.olhar__num { font-size: var(--mt-rotulo); font-weight: 500; letter-spacing: .2em; color: var(--mt-texto-suave); margin-bottom: 1.25rem; display: block; }
.secao--petroleo .olhar__num { color: var(--mt-gelo); }
.olhar__area { font-size: var(--mt-pequeno); font-weight: 600; color: var(--mt-texto-suave); margin-bottom: .75rem; }
.secao--petroleo .olhar__area { color: var(--mt-gelo); }
.olhar p:last-child { margin-bottom: 0; }

/* ---------- 9. Lista com marcador ---------- */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .875rem; }
.lista li { position: relative; padding-left: 1.75rem; }
.lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: .75rem; height: 2px; background: var(--mt-petroleo); }
.secao--petroleo .lista li::before { background: var(--mt-gelo); }

/* ---------- 10. Aviso (curso livre / limites) ---------- */
.aviso {
  display: flex; gap: .875rem; align-items: flex-start;
  background: var(--mt-nevoa);
  border-left: 3px solid var(--mt-petroleo);
  padding: 1rem 1.25rem;
  font-size: var(--mt-pequeno);
  color: var(--mt-texto);
  border-radius: var(--mt-raio-pequeno);
}
.aviso svg { flex: none; width: 20px; height: 20px; margin-top: .1em; }
.aviso p { margin: 0; }
.secao--nevoa .aviso { background: var(--mt-branco); }

/* ---------- 11. Cartão de curso ---------- */
.curso {
  display: flex; flex-direction: column;
  background: var(--mt-branco);
  border: 1px solid var(--mt-linha);
  border-radius: var(--mt-raio);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.curso:hover { box-shadow: var(--mt-sombra); transform: translateY(-2px); }
.curso__faixa {
  background: var(--mt-petroleo); color: var(--mt-gelo);
  padding: 1.25rem 1.5rem 1.1rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.curso__faixa--gelo { background: var(--mt-gelo); color: var(--mt-petroleo); }
.curso__tema { font-size: var(--mt-rotulo); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.curso__num { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.curso__corpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.curso__corpo h3 { margin-bottom: .6rem; }
.curso__desc { color: var(--mt-texto-suave); font-size: var(--mt-pequeno); }
.curso__meta { font-size: .8125rem; font-weight: 500; color: var(--mt-texto-suave); margin: auto 0 1rem; padding-top: .75rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.curso__preco { border-top: 1px solid var(--mt-linha); padding-top: 1rem; margin-bottom: 1rem; }
.curso__preco strong { display: block; font-size: 1.375rem; font-weight: 700; }
.curso__preco span { font-size: .8125rem; color: var(--mt-texto-suave); }
.curso__acoes { display: grid; gap: .5rem; }
.curso__acoes .btn { width: 100%; }
.curso__nota { font-size: .75rem; color: var(--mt-texto-suave); margin: .875rem 0 0; line-height: 1.4; }

/* ---------- 12. Filtro de temas ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtro {
  font: 500 .875rem/1 var(--mt-fonte);
  padding: .7rem 1rem; min-height: 42px;
  border: 1px solid var(--mt-linha); border-radius: var(--mt-raio-botao);
  background: var(--mt-branco); color: var(--mt-petroleo); cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--mt-petroleo); color: var(--mt-branco); border-color: var(--mt-petroleo); }
.curso[hidden] { display: none; }

/* ---------- 13. Citação e depoimento ---------- */
.citacao { margin: 0; }
.citacao blockquote { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 600; line-height: 1.35; }
.citacao figcaption { font-size: var(--mt-pequeno); font-weight: 500; color: var(--mt-texto-suave); }
.secao--petroleo .citacao figcaption { color: var(--mt-gelo); }
.depo { background: var(--mt-branco); border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); padding: 1.75rem; margin: 0; display: flex; flex-direction: column; }
.depo blockquote { margin: 0 0 1.25rem; font-size: 1rem; flex: 1; }
.depo blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .8; font-weight: 700; color: var(--mt-gelo); margin-bottom: .25rem; }
.depo figcaption { font-size: .875rem; font-weight: 600; }
.depo figcaption span { display: block; font-weight: 400; color: var(--mt-texto-suave); font-size: .8125rem; }

/* ---------- 14. Foto com moldura ---------- */
.foto { position: relative; }
.foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--mt-raio); position: relative; z-index: 1; }
.foto::after { content: ""; position: absolute; inset: auto -12px -12px auto; width: 45%; height: 45%; background: var(--mt-gelo); z-index: -1; border-radius: var(--mt-raio); }
.foto { z-index: 0; }

/* ---------- 15. Passos (como funciona) ---------- */
.passos { counter-reset: passo; display: grid; gap: 0; }
.passo { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--mt-linha); }
.passo:last-child { border-bottom: 1px solid var(--mt-linha); }
.passo::before { counter-increment: passo; content: "0" counter(passo); font-size: 2rem; font-weight: 700; color: var(--mt-petroleo); line-height: 1; }
.passo h3 { margin-bottom: .4rem; }
.passo p { margin: 0; color: var(--mt-texto-suave); }

/* ---------- 16. Faixa de chamada ---------- */
.faixa { background: var(--mt-gelo); color: var(--mt-petroleo); }
.faixa__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0; }
.faixa h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: 0 0 .35rem; }
.faixa p { margin: 0; }

/* ---------- 17. Perguntas ---------- */
.faq { border-top: 1px solid var(--mt-linha); }
.faq details { border-bottom: 1px solid var(--mt-linha); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.25rem; color: var(--mt-texto-suave); max-width: 70ch; }
.faq details > div p:last-child { margin: 0; }

/* ---------- 18. Rodapé ---------- */
.rodape { background: var(--mt-preto); color: rgba(255,255,255,.72); font-size: var(--mt-pequeno); padding: 4rem 0 2rem; }
.rodape a { color: var(--mt-branco); text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.rodape__logo { height: 52px; width: auto; margin-bottom: 1.25rem; }
.rodape h3 { color: var(--mt-branco); font-size: var(--mt-rotulo); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.rodape__base { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; font-size: .8125rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }
.rodape__base p { margin: 0; }
@media (max-width: 760px) { .rodape__grade { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- 19. Botão flutuante do WhatsApp ---------- */
.whats {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--mt-petroleo); color: var(--mt-branco);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  border: 2px solid var(--mt-gelo);
}
.whats svg { width: 26px; height: 26px; }

/* ---------- 20. Utilitários ---------- */
.centro { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.espaco-topo { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curso, .btn { transition: none; }
  .curso:hover { transform: none; }
}

/* ---------- 21. Ajustes de contexto ---------- */
.secao--gelo .rotulo, .secao--gelo .citacao figcaption { color: var(--mt-petroleo); }
.citacao--destaque { max-width: 860px; margin: 0 auto; }
.aviso--topo { margin-bottom: 2rem; }
.aviso a { font-weight: 600; }

/* ---------- 22. Cantos arredondados ---------- */
.curso__faixa { border-radius: 0; }
.ds-demo, .depo, .olhar { border-radius: var(--mt-raio); }
.olhar { background: var(--mt-branco); border: 1px solid var(--mt-linha); padding: 1.5rem; }
.olhar__num::before { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--mt-petroleo); margin-bottom: 1rem; }
.secao--petroleo .olhar__num::before { background: var(--mt-gelo); }
.secao--petroleo .olhar { background: rgba(255,255,255,.04); border-color: var(--mt-linha-escura); }
.passos { background: var(--mt-branco); border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); padding: 0 1.5rem; }
.passo:first-child { border-top: 0; }
.passo:last-child { border-bottom: 0; }
.faq { border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); background: var(--mt-branco); padding: 0 1.5rem; }
.faq details:last-child { border-bottom: 0; }
.menu-toggle { border-radius: var(--mt-raio-pequeno); }
.whats { border-radius: 50%; }

/* =========================================================
   23. Movimento e visual (v2, 07/11): ilustrações, revelação na rolagem,
   prints em carrossel, vídeos, linha do tempo. Tudo some com prefers-reduced-motion.
   ========================================================= */

/* 23.1 Barra de progresso de leitura e cabeçalho que encolhe */
.progresso { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: var(--mt-gelo); transform-origin: 0 50%; transform: scaleX(0); }
.topo { transition: box-shadow .3s, min-height .3s; }
.topo.rolou { box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.topo.rolou .topo__in { min-height: 60px; }
.topo__in, .topo__logo img { transition: min-height .3s, height .3s; }
.topo.rolou .topo__logo img { height: 38px; }

/* 23.2 Revelação ao rolar (só com JS ativo: html.js) */
.js .revela { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--atraso, 0s); }
.js .revela--esq { transform: translateX(-36px); }
.js .revela--dir { transform: translateX(36px); }
.js .revela--zoom { transform: scale(.94); }
.js .revela.visivel { opacity: 1; transform: none; }

/* 23.3 Ilustrações em traço que se desenham */
.ilu { width: 100%; height: auto; display: block; overflow: visible; }
.ilu .tracejado { stroke-dasharray: .03 .03; }
.js .desenho .ilu path, .js .desenho .ilu circle, .js .desenho .ilu ellipse, .js .desenho .ilu rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.2,1); }
.js .desenho.visivel .ilu path, .js .desenho.visivel .ilu circle, .js .desenho.visivel .ilu ellipse, .js .desenho.visivel .ilu rect { stroke-dashoffset: 0; }
.js .desenho.visivel .ilu .tracejado { stroke-dasharray: .03 .03; stroke-dashoffset: 0; }

/* 23.4 Hero: anéis animados atrás da foto e chamada para rolar */
.hero { position: relative; isolation: isolate; }
.aneis { position: absolute; z-index: -1; right: -8%; top: 50%; width: min(70vw, 820px); aspect-ratio: 1; transform: translateY(-45%); pointer-events: none; }
.aneis circle { fill: none; stroke: var(--mt-gelo); stroke-width: .6; opacity: .22; transform-origin: 50% 50%; }
.aneis circle:nth-child(2) { opacity: .14; stroke-dasharray: 2 6; animation: gira 60s linear infinite; }
.aneis circle:nth-child(3) { opacity: .1; stroke-dasharray: 1 10; animation: gira 90s linear infinite reverse; }
@keyframes gira { to { transform: rotate(360deg); } }
.hero__foto img { transition: transform .1s linear; will-change: transform; }
.hero h1 .palavra { display: inline-block; }
.js .hero h1 .palavra { opacity: 0; transform: translateY(.5em); animation: sobe .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + .1s); }
@keyframes sobe { to { opacity: 1; transform: none; } }
.js .hero .entra { opacity: 0; animation: sobe .8s .7s cubic-bezier(.2,.7,.2,1) forwards; transform: translateY(16px); }
.js .hero .entra--2 { animation-delay: .85s; }
.js .hero__foto { opacity: 0; animation: aparece 1.2s .2s ease forwards; }
@keyframes aparece { to { opacity: 1; } }
.selos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.selo { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--mt-gelo); border: 1px solid var(--mt-linha-escura); border-radius: var(--mt-raio-botao); padding: .45rem .9rem; }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mt-gelo); }

/* 23.5 Faixa de temas que corre */
.letreiro { background: var(--mt-gelo); color: var(--mt-petroleo); overflow: hidden; padding: 1.1rem 0; white-space: nowrap; }
.letreiro__trilho { display: inline-flex; gap: 2.5rem; animation: corre 40s linear infinite; padding-left: 2.5rem; }
.letreiro span { font-size: clamp(1rem, .9rem + .6vw, 1.375rem); font-weight: 700; display: inline-flex; align-items: center; gap: 2.5rem; }
.letreiro span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mt-petroleo); }
@keyframes corre { to { transform: translateX(-50%); } }

/* 23.6 Cartões com ilustração */
.cartao-ilu { background: var(--mt-branco); border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); padding: 1.75rem; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; height: 100%; }
.cartao-ilu:hover { transform: translateY(-6px); box-shadow: var(--mt-sombra); }
.cartao-ilu__ilu { width: 96px; height: 96px; padding: 14px; border-radius: 24px; background: var(--mt-nevoa); color: var(--mt-petroleo); margin-bottom: 1.25rem; }
.secao--petroleo .cartao-ilu { background: rgba(255,255,255,.05); border-color: var(--mt-linha-escura); }
.secao--petroleo .cartao-ilu__ilu { background: rgba(170,205,219,.12); color: var(--mt-gelo); }
.cartao-ilu h3 { margin-bottom: .35rem; }
.cartao-ilu p { margin: 0; font-size: var(--mt-pequeno); color: var(--mt-texto-suave); }
.secao--petroleo .cartao-ilu p { color: var(--mt-gelo-texto); }
.cartao-ilu__area { display: block; font-size: var(--mt-rotulo); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--mt-texto-suave); margin-bottom: .5rem; }
.secao--petroleo .cartao-ilu__area { color: var(--mt-gelo); }

/* 23.7 "Para quem é": blocos com ícone, em grade 5 */
.grade--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grade--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grade--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pilula-ilu { text-align: center; padding: 1.5rem 1rem; }
.pilula-ilu .cartao-ilu__ilu { margin: 0 auto 1rem; width: 80px; height: 80px; border-radius: 50%; }
.pilula-ilu h3 { font-size: 1rem; margin: 0; }

/* 23.8 Carrossel horizontal de cursos (home) */
.carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--mt-gutter) 1.5rem; margin: 0 calc(-1 * var(--mt-gutter)); scrollbar-width: thin; scroll-padding: 0 var(--mt-gutter); }
.carrossel > * { scroll-snap-align: start; }
.carrossel-nav { display: flex; gap: .5rem; }
.carrossel-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--mt-linha); background: var(--mt-branco); color: var(--mt-petroleo); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.carrossel-nav button:hover { background: var(--mt-petroleo); color: var(--mt-branco); }
.cabeca-linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cabeca-linha .cabeca-secao { margin-bottom: 0; }

/* 23.9 Cartão de curso com ilustração na faixa */
.curso__faixa { position: relative; min-height: 150px; align-items: flex-start; overflow: hidden; }
.curso__faixa .ilu { position: absolute; right: 14px; bottom: -6px; width: 118px; height: 118px; opacity: .95; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.curso:hover .curso__faixa .ilu { transform: translateY(-6px) rotate(-4deg) scale(1.05); }
.curso__faixa .curso__num { position: absolute; left: 1.5rem; bottom: 1rem; font-size: 2.5rem; opacity: .9; }

/* 23.10 Linha do tempo (compreender, ressignificar, reorganizar) */
.linha-tempo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.linha-tempo::before { content: ""; position: absolute; top: 48px; left: 8%; right: 8%; height: 2px; background: var(--mt-linha); }
.linha-tempo__barra { position: absolute; top: 48px; left: 8%; height: 2px; width: 84%; background: var(--mt-petroleo); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.6,.1,.2,1); }
.visivel .linha-tempo__barra, .linha-tempo.visivel .linha-tempo__barra { transform: scaleX(1); }
.etapa { text-align: center; position: relative; }
.etapa__circ { width: 96px; height: 96px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--mt-branco); border: 2px solid var(--mt-petroleo); padding: 18px; color: var(--mt-petroleo); position: relative; z-index: 1; }
.etapa h3 { margin-bottom: .35rem; }
.etapa p { color: var(--mt-texto-suave); font-size: var(--mt-pequeno); max-width: 30ch; margin: 0 auto; }
@media (max-width: 760px) {
  .linha-tempo { grid-template-columns: 1fr; gap: 2rem; }
  .linha-tempo::before, .linha-tempo__barra { top: 0; bottom: 0; left: 47px; right: auto; width: 2px; height: auto; }
  .linha-tempo__barra { transform-origin: 50% 0; transform: scaleY(0); }
  .visivel .linha-tempo__barra { transform: scaleY(1); }
  .etapa { display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; text-align: left; align-items: center; }
  .etapa__circ { margin: 0; }
  .etapa p { margin: 0; }
}

/* 23.11 Mural de prints (dois trilhos em sentidos opostos) */
.mural { overflow: hidden; display: grid; gap: 1.25rem; padding: .5rem 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.mural__trilho { display: flex; gap: 1.25rem; width: max-content; animation: corre 70s linear infinite; }
.mural__trilho--volta { animation-direction: reverse; animation-duration: 80s; }
.mural:hover .mural__trilho { animation-play-state: paused; }
.print { margin: 0; flex: none; }
.print button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--mt-raio); overflow: hidden; box-shadow: 0 2px 4px rgba(17,53,64,.08), 0 12px 28px rgba(17,53,64,.12); transition: transform .3s; }
.print button:hover { transform: translateY(-4px) rotate(-.6deg); }
.print img { height: calc(var(--h, 200px) * var(--escala-print, 1)); width: auto; max-width: none; }
.mural__trilho { align-items: center; }
@media (max-width: 760px) { .mural { --escala-print: .72; } }
.print figcaption { font-size: .8125rem; font-weight: 600; margin-top: .6rem; padding-left: .25rem; }
.print figcaption span { font-weight: 400; color: var(--mt-texto-suave); }

/* 23.12 Vídeos de depoimento */
.videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1100px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .videos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; } .videos > * { scroll-snap-align: start; } }
.video { margin: 0; border-radius: var(--mt-raio); overflow: hidden; background: var(--mt-petroleo-90); border: 1px solid var(--mt-linha-escura); }
.video__tela { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video__tela video, .video__tela img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(17,53,64,.55), rgba(17,53,64,.05)); border: 0; cursor: pointer; color: var(--mt-branco); transition: background .3s; }
.video__play:hover { background: linear-gradient(to top, rgba(17,53,64,.35), rgba(17,53,64,0)); }
.video__play span { width: 64px; height: 64px; border-radius: 50%; background: var(--mt-gelo); color: var(--mt-petroleo); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(170,205,219,.6); animation: pulsa 2.4s infinite; }
.video__play svg { width: 26px; height: 26px; margin-left: 4px; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(170,205,219,.55); } 70% { box-shadow: 0 0 0 18px rgba(170,205,219,0); } 100% { box-shadow: 0 0 0 0 rgba(170,205,219,0); } }
.video figcaption { padding: 1rem 1.25rem 1.25rem; }
.video figcaption q { display: block; font-weight: 600; color: var(--mt-branco); quotes: "“" "”"; line-height: 1.35; margin-bottom: .4rem; }
.video figcaption span { font-size: .8125rem; color: var(--mt-gelo); }

/* 23.13 Visualizador de prints */
.lupa { position: fixed; inset: 0; z-index: 90; background: rgba(10,25,30,.88); display: none; place-items: center; padding: 1.5rem; cursor: zoom-out; }
.lupa.aberta { display: grid; animation: aparece .25s ease forwards; opacity: 0; }
.lupa img { max-width: min(900px, 100%); max-height: 86vh; width: auto; height: auto; border-radius: var(--mt-raio); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lupa button { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--mt-gelo); color: var(--mt-petroleo); font-size: 1.5rem; cursor: pointer; }

/* 23.14 Mosaico de fotos e selo ao vivo */
.ao-vivo { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; background: var(--mt-petroleo); color: var(--mt-branco); padding: .4rem .8rem; border-radius: var(--mt-raio-botao); margin-bottom: .75rem; }
.ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: pisca 1.4s infinite; }
@keyframes pisca { 50% { opacity: .25; } }
.faixa__ilu { width: 88px; height: 88px; color: var(--mt-petroleo); flex: none; }
.faixa__in > div:first-child { display: flex; align-items: center; gap: 1.5rem; }
@media (max-width: 560px) { .faixa__ilu { display: none; } }

/* 23.15 Frase grande */
.frase-grande { font-size: clamp(1.6rem, 1rem + 2.8vw, 3.25rem); font-weight: 700; line-height: 1.2; max-width: 22ch; margin: 0 auto; text-align: center; letter-spacing: -.01em; }
.frase-grande em { font-style: normal; color: var(--mt-gelo); }
.secao--gelo .frase-grande em { color: var(--mt-branco); }

/* 23.16 Botão com seta que anda */
.btn .seta { transition: transform .25s; }
.btn:hover .seta { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .js .revela, .js .hero h1 .palavra, .js .hero .entra, .js .hero__foto { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .desenho .ilu * { stroke-dashoffset: 0 !important; transition: none !important; }
  .letreiro__trilho, .mural__trilho, .aneis circle, .video__play span, .ao-vivo::before { animation: none !important; }
  .mural { overflow-x: auto; }
  .linha-tempo__barra { transform: none !important; transition: none !important; }
}
.carrossel .curso__corpo h3 { min-height: 2.6em; }
.carrossel .curso__corpo .btn { margin-top: auto; }
main { overflow-x: clip; }
@media (max-width: 860px) { .js .revela--esq, .js .revela--dir { transform: translateY(28px); } }
@media (max-width: 860px) { .hero:not(.hero--interna) .aneis { top: auto; bottom: -6%; right: 50%; width: 130vw; transform: translateX(50%); } }

/* 24. Cartão com ícone ao lado do título (pedido do Jonathas, 07/11) */
.cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) { display: grid; grid-template-columns: 72px 1fr; column-gap: 1.1rem; align-items: center; align-content: start; }
.cartao-ilu:not(.pilula-ilu) > .cartao-ilu__ilu { grid-row: span 2; width: 72px; height: 72px; padding: 10px; border-radius: 18px; margin: 0; }
.cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) > .cartao-ilu__area { align-self: end; margin-bottom: .15rem; }
.cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) > h3 { align-self: start; margin: 0; }
.cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) > p, .cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) > ul { grid-column: 1 / -1; margin-top: 1.1rem; }
/* card só com h3 + area (sem rótulo) */
.cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu):not(:has(> .cartao-ilu__area)) > h3 { grid-row: span 2; align-self: center; }

/* 25. Página da Andreia: números, história em linha vertical, formação, mundo */
.hero__foto--recorte img { max-width: 470px; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.numero { text-align: center; padding: 1.75rem 1rem; border-radius: var(--mt-raio); background: var(--mt-branco); border: 1px solid var(--mt-linha); }
.numero strong { display: block; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 700; line-height: 1; color: var(--mt-petroleo); margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.numero span { font-size: var(--mt-pequeno); color: var(--mt-texto-suave); }
@media (max-width: 640px) { .numeros { grid-template-columns: 1fr; } }
.historia { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.5rem; }
.historia::before { content: ""; position: absolute; left: 35px; top: 8px; bottom: 8px; width: 2px; background: var(--mt-linha-escura); }
.historia li { display: grid; grid-template-columns: 72px 1fr; gap: 1.25rem; align-items: start; position: relative; }
.historia .etapa__circ { width: 72px; height: 72px; padding: 12px; margin: 0; background: var(--mt-petroleo); border-color: var(--mt-gelo); color: var(--mt-gelo); }
.historia h3 { margin: .9rem 0 .3rem; color: var(--mt-branco); }
.historia p { margin: 0; color: var(--mt-gelo-texto); }
.lista-formacao { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.lista-formacao li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--mt-linha); font-size: var(--mt-pequeno); }
.lista-formacao li:last-child { border-bottom: 0; }
.chip { flex: none; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--mt-raio-botao); background: var(--mt-gelo); color: var(--mt-petroleo); }
.chip--feito { background: var(--mt-nevoa); color: var(--mt-texto-suave); }
.mundo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 960px) { .mundo { grid-template-columns: 1fr; } }
.regiao { border-radius: var(--mt-raio); overflow: hidden; background: var(--mt-branco); border: 1px solid var(--mt-linha); display: flex; flex-direction: column; }
.regiao img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.regiao:hover img { transform: scale(1.05); }
.regiao__foto { overflow: hidden; }
.regiao__corpo { padding: 1.5rem; }
.regiao__corpo h3 { margin-bottom: .2rem; }
.regiao__lugar { font-size: .8125rem; font-weight: 500; color: var(--mt-texto-suave); display: block; margin-bottom: 1rem; }
.regiao .lista { gap: .5rem; font-size: var(--mt-pequeno); }
.regiao__sem-foto { aspect-ratio: 3 / 2; background: var(--mt-petroleo); color: var(--mt-gelo); display: grid; place-items: center; }
.regiao__sem-foto .ilu { width: 120px; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chips span { padding: .6rem 1rem; border-radius: var(--mt-raio-botao); border: 1px solid var(--mt-linha-escura); color: var(--mt-branco); font-size: .875rem; font-weight: 500; transition: background .2s, color .2s; }
.chips span:hover { background: var(--mt-gelo); color: var(--mt-petroleo); }
figure.foto { margin-left: 0; margin-right: 0; margin-bottom: 0; }

/* 26. Hero v3 (07/11): três blocos (topo, foto, base) que se reorganizam.
   Computador: texto à esquerda (topo + base), Andreia à direita ocupando a altura toda.
   Celular: título curto → Andreia → selos com ícone logo abaixo dela → botões. */
.hero__grade { grid-template-columns: 1.05fr .95fr; grid-template-areas: "topo foto" "base foto"; align-items: end; column-gap: clamp(1.5rem, 1rem + 3vw, 4rem); row-gap: 0; }
.hero__topo { grid-area: topo; padding-top: clamp(3.5rem, 2rem + 6vw, 7rem); align-self: end; }
.hero__foto { grid-area: foto; }
.hero__base { grid-area: base; padding: 2rem 0 clamp(3.5rem, 2rem + 6vw, 7rem); align-self: start; }
.hero__topo h1 { color: var(--mt-branco); max-width: 15ch; }
.hero__topo .lead { margin-bottom: 0; }
.selos-ico { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.selos-ico li { display: inline-flex; align-items: center; gap: .55rem; font-size: .8125rem; font-weight: 500; color: var(--mt-gelo-texto); border: 1px solid var(--mt-linha-escura); border-radius: var(--mt-raio-botao); padding: .45rem .9rem .45rem .55rem; background: rgba(255,255,255,.03); }
.ico-selo { width: 22px; height: 22px; flex: none; color: var(--mt-gelo); stroke-width: 7; }
.hero--interna .hero__grade { display: block; }

@media (max-width: 860px) {
  .hero__grade { grid-template-columns: 1fr; grid-template-areas: "topo" "foto" "base"; }
  .hero__topo { padding-top: 2.25rem; text-align: center; }
  .hero__topo h1 { max-width: 13ch; margin-left: auto; margin-right: auto; font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); margin-bottom: .6rem; }
  .hero__topo .rotulo { margin-bottom: .75rem; }
  .hero__lead { font-size: 1rem; max-width: 32ch; margin-left: auto; margin-right: auto; }
  .hero__foto { margin-top: 1rem; }
  .hero__foto img, .hero__foto--recorte img { max-width: none; width: auto; height: min(46vh, 400px); margin: 0 auto; }
  .hero__foto::before { left: 10%; right: 10%; height: 92%; }
  /* selos encostam na base da foto, como uma faixa sobre o colo da Andreia */
  .hero__base { padding: 0 0 2.25rem; margin-top: -2.4rem; position: relative; z-index: 2; }
  .selos-ico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: rgba(17,53,64,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--mt-linha-escura); border-radius: var(--mt-raio); padding: .9rem .5rem; margin-bottom: 1.25rem; }
  .selos-ico--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .9rem; }
  .selos-ico li { flex-direction: column; justify-content: flex-start; text-align: center; gap: .4rem; border: 0; background: none; padding: 0 .35rem; border-radius: 0; font-size: .75rem; line-height: 1.3; color: var(--mt-branco); }
  .selos-ico:not(.selos-ico--4) li + li { border-left: 1px solid var(--mt-linha-escura); }
  .ico-selo { width: 26px; height: 26px; }
  .hero__base .botoes { flex-direction: column; }
  .hero__base .btn { width: 100%; }
  .hero__base .btn--contorno { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
  .aneis { display: none; }
  .hero:not(.hero--interna) .hero__foto::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 0; width: min(88vw, 360px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(170,205,219,.25); }
}
@media (max-width: 860px) {
  .hero:not(.hero--interna) .hero__topo { padding-top: 1.5rem; }
  .hero:not(.hero--interna) .hero__topo .rotulo { display: none; }
  .hero__topo h1 { font-size: clamp(1.75rem, 1.1rem + 3.6vw, 2.4rem); }
  .hero__lead { font-size: .9375rem; }
  .hero__foto { margin-top: .5rem; }
  .hero__foto img, .hero__foto--recorte img { height: min(38vh, 330px); }
  .hero__base { margin-top: -1.9rem; padding-bottom: 2rem; }
  .selos-ico { padding: .75rem .4rem; margin-bottom: 1rem; }
  .whats { width: 50px; height: 50px; right: 12px; bottom: 12px; }
}

/* 27. Três olhares (físico, mental, espiritual) com as bases de cada um */
.grade--olhares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grade--olhares { grid-template-columns: 1fr; } }
.olhar-card h3 { font-size: 1.25rem; }
.bases { grid-column: 1 / -1; list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--mt-linha); display: flex; flex-wrap: wrap; gap: .4rem; }
.bases::before { content: "Com base em"; width: 100%; font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--mt-texto-suave); margin-bottom: .2rem; }
.bases li { font-size: .8125rem; font-weight: 500; padding: .3rem .7rem; border-radius: var(--mt-raio-botao); background: var(--mt-nevoa); color: var(--mt-petroleo); }
.secao--petroleo .bases { border-top-color: var(--mt-linha-escura); }
.secao--petroleo .bases::before { color: var(--mt-gelo); }
.secao--petroleo .bases li { background: rgba(170,205,219,.14); color: var(--mt-branco); }
.cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) > p { margin-top: 1rem; }

/* 28. Lives: pop-up, formulário e página */
.sem-rolagem { overflow: hidden; }
.popup { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; }
.popup[hidden] { display: none; }
.popup__fundo { position: absolute; inset: 0; background: rgba(8, 24, 29, .62); opacity: 0; transition: opacity .25s ease; }
.popup__caixa { position: relative; width: min(760px, 100%); display: grid; grid-template-columns: .85fr 1.15fr; background: var(--mt-petroleo); color: var(--mt-branco); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); transform: translateY(16px) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.popup.aberto .popup__fundo { opacity: 1; }
.popup.aberto .popup__caixa { transform: none; opacity: 1; }
.popup__foto { width: 100%; height: 100%; max-height: 420px; object-fit: contain; object-position: 50% 100%; align-self: end; background: radial-gradient(closest-side at 50% 70%, rgba(170,205,219,.3), rgba(170,205,219,0)); padding-top: 1.5rem; }
.popup__texto { padding: 2.25rem 2rem 1.75rem 0; display: flex; flex-direction: column; justify-content: center; }
.popup__texto h2 { color: var(--mt-branco); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: .6rem; }
.popup__texto p { color: var(--mt-gelo-texto); margin-bottom: 1.5rem; }
.popup__texto .btn--primario { background: var(--mt-gelo); color: var(--mt-petroleo); }
.popup__depois { background: none; border: 0; color: var(--mt-gelo-texto); font: 500 .875rem var(--mt-fonte); margin-top: .75rem; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.popup__x { position: absolute; top: .75rem; right: .75rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: var(--mt-branco); font-size: 1.5rem; cursor: pointer; z-index: 2; }
.popup__x:hover { background: rgba(255,255,255,.2); }
.btn--largo { width: 100%; }
@media (max-width: 640px) {
  .popup { align-items: end; padding: 0; }
  .popup__caixa { grid-template-columns: 1fr; border-radius: 20px 20px 0 0; transform: translateY(40px); }
  .popup__foto { max-height: 210px; padding-top: 1rem; }
  .popup__texto { padding: 1rem 1.25rem 1.5rem; text-align: center; }
  .popup__texto .ao-vivo { align-self: center; }
}
.hero--lives .ao-vivo { background: rgba(255,255,255,.08); border: 1px solid var(--mt-linha-escura); margin-bottom: 1.25rem; }
.passos-lives { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; }
.passos-lives li { display: flex; align-items: center; gap: .9rem; font-weight: 600; }
.passos-lives span { width: 40px; height: 40px; border-radius: 50%; background: var(--mt-petroleo); color: var(--mt-gelo); display: grid; place-items: center; font-weight: 700; flex: none; }
.cartao-form { background: var(--mt-branco); border: 1px solid var(--mt-linha); border-radius: 20px; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); box-shadow: var(--mt-sombra); }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .4rem; }
.campo input { width: 100%; min-height: 50px; padding: .75rem 1rem; font: 400 1rem var(--mt-fonte); color: var(--mt-petroleo); border: 1.5px solid var(--mt-linha); border-radius: 12px; background: var(--mt-branco); transition: border-color .2s, box-shadow .2s; }
.campo input:focus { outline: none; border-color: var(--mt-petroleo); box-shadow: 0 0 0 4px rgba(170,205,219,.45); }
.campo input[aria-invalid="true"] { border-color: #B42318; }
.campo__ajuda { font-size: .8125rem; color: var(--mt-texto-suave); margin: .35rem 0 0; }
.campo__erro { font-size: .8125rem; color: #B42318; margin: .3rem 0 0; min-height: 0; }
.campo__erro:empty { display: none; }
.opcional { font-weight: 400; color: var(--mt-texto-suave); }
.consentimento { display: flex; gap: .7rem; align-items: flex-start; font-size: .875rem; color: var(--mt-texto-suave); margin: .5rem 0 .25rem; cursor: pointer; }
.consentimento input { width: 22px; height: 22px; flex: none; margin-top: .1rem; accent-color: var(--mt-petroleo); }
#form-lives .btn { margin-top: 1rem; }
.form-msg { font-size: .875rem; color: #B42318; margin: .75rem 0 0; }
.form-msg:empty { display: none; }
.form-ok { text-align: center; outline: none; }
.form-ok__ico { width: 72px; height: 72px; margin: 0 auto 1rem; padding: 12px; border-radius: 50%; background: var(--mt-nevoa); color: var(--mt-petroleo); }
.form-ok__teste { font-size: .75rem; color: var(--mt-texto-suave); margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .popup__fundo, .popup__caixa { transition: none; } }
.faixa--lives { background: var(--mt-nevoa); border-bottom: 1px solid var(--mt-linha); }
section[id], [id="inscricao"] { scroll-margin-top: 84px; }

/* 29. Cabeçalho v2: "Começar agora" sempre visível (também no celular) e "Entrar na plataforma" */
.topo__in { gap: 1.25rem; }
.menu { order: 2; margin-left: auto; }
.topo__acoes { order: 3; display: flex; align-items: center; gap: .5rem; }
.btn--topo { min-height: 42px; padding: .55rem 1.15rem; font-size: .875rem; color: var(--mt-petroleo); }
.btn--topo:hover { background: var(--mt-branco); color: var(--mt-petroleo); }
.menu .menu__entrar { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; min-height: 42px; border: 1px solid var(--mt-linha-escura); border-radius: var(--mt-raio-botao); color: var(--mt-gelo); font-size: .875rem; }
.menu .menu__entrar:hover { border-color: var(--mt-gelo); border-bottom-color: var(--mt-gelo); background: rgba(170,205,219,.1); }
.menu__entrar svg { width: 18px; height: 18px; }
@media (max-width: 1100px) and (min-width: 861px) { .menu { gap: 1rem; } .menu a { font-size: .875rem; } .menu .menu__entrar span { display: none; } .menu .menu__entrar { padding: .5rem .7rem; } }
@media (max-width: 860px) {
  .topo__in { gap: .5rem; }
  .menu { margin-left: 0; }
  .btn--topo { min-height: 40px; padding: .45rem .95rem; font-size: .8125rem; }
  .menu .menu__entrar { margin-top: 1rem; justify-content: center; border: 1px solid var(--mt-linha-escura); border-radius: var(--mt-raio-botao); padding: .85rem 1rem; color: var(--mt-gelo); }
  .menu .menu__entrar span { display: inline; }
}
@media (max-width: 360px) { .topo__logo img { height: 32px; } .btn--topo { padding: .45rem .7rem; } }

/* 30. Leitura no celular (auditoria UX): nada de texto de cartão abaixo de 14-16 px */
@media (max-width: 860px) {
  .curso__desc, .cartao-ilu p, .olhar p, .etapa p, .regiao .lista, .depo blockquote { font-size: 1rem; }
  .curso__meta, .curso__preco span, .curso__nota, .print figcaption, .video figcaption span, .bases li, .lista-formacao li, .numero span, .selos-ico li { font-size: .875rem; }
  .curso__tema, .cartao-ilu__area, .rotulo { font-size: .8125rem; }
}

/* =========================================================
   31. Vida e profundidade (v4, 07/11): cor de destaque kraft (do próprio manual,
   aplicações monocromáticas) e terracota "só em detalhes" (plano da ADIN),
   sombras em camadas, fundos com degradê e textos secundários mais fortes.
   Regra: kraft é destaque, não fundo. Até ~10% da tela.
   ========================================================= */
:root {
  --mt-kraft: #D9B07A;          /* destaque sobre petróleo (6,5:1); petróleo sobre kraft também 6,5:1 */
  --mt-kraft-escuro: #8A5A2B;   /* destaque em texto sobre fundo claro (5,9:1) */
  --mt-kraft-claro: #F6ECDD;    /* fundo de selos e chips de destaque */
  --mt-texto-suave: rgba(17, 53, 64, .86);
  --mt-petroleo-fundo: #0C2830;
  --mt-sombra-1: 0 1px 2px rgba(12,40,48,.06), 0 6px 16px -4px rgba(12,40,48,.10);
  --mt-sombra-2: 0 2px 6px rgba(12,40,48,.08), 0 22px 44px -12px rgba(12,40,48,.28);
  --mt-sombra-3: 0 30px 80px -10px rgba(0,0,0,.5);
  --mt-sombra-btn: 0 10px 24px -8px rgba(12,40,48,.45);
  --mt-sombra-btn-kraft: 0 10px 26px -8px rgba(217,176,122,.55);
}

/* Fundos com profundidade */
.hero, .secao--petroleo {
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(170,205,219,.16), transparent 62%),
    radial-gradient(700px 480px at 0% 100%, rgba(217,176,122,.08), transparent 60%),
    linear-gradient(180deg, var(--mt-petroleo) 0%, var(--mt-petroleo-fundo) 100%);
}
.secao--nevoa { background: linear-gradient(180deg, #F7FAFB 0%, #EAF2F5 100%); }
.secao--gelo { background: linear-gradient(135deg, #B9D6E2 0%, var(--mt-gelo) 55%, #9CC2D2 100%); }
.faixa { background: linear-gradient(120deg, #B9D6E2 0%, var(--mt-gelo) 60%, #9CC2D2 100%); }
.faixa--lives { background: linear-gradient(120deg, #FBF6EE 0%, var(--mt-kraft-claro) 100%); border-bottom: 1px solid rgba(138,90,43,.15); }
.letreiro { background: var(--mt-petroleo-fundo); color: var(--mt-gelo); border-top: 1px solid var(--mt-linha-escura); }
.letreiro span::after { border-color: var(--mt-kraft); background: var(--mt-kraft); width: 8px; height: 8px; }

/* Rótulos (eyebrows) com traço de destaque */
.rotulo { display: inline-flex; align-items: center; gap: .6rem; color: var(--mt-kraft-escuro); font-weight: 600; }
.rotulo::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.secao--petroleo .rotulo, .hero .rotulo { color: var(--mt-kraft); }
.secao--gelo .rotulo { color: var(--mt-petroleo); }
.cabeca-secao--centro .rotulo::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

/* Palavra em destaque */
.frase-grande em, .secao--petroleo .frase-grande em { color: var(--mt-kraft); }
.secao--gelo .frase-grande em { color: var(--mt-kraft-escuro); }
.capitulo { color: var(--mt-kraft); opacity: .9; }
.secao--gelo .capitulo { color: var(--mt-kraft-escuro); }

/* Botões: o principal sobre fundo escuro vira kraft (o que mais chama no conjunto) */
.btn { box-shadow: none; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn--primario { box-shadow: var(--mt-sombra-btn); }
.btn--primario:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(12,40,48,.55); }
.hero .btn--gelo, .secao--petroleo .btn--gelo, .popup .btn--primario, .popup__texto .btn--primario, .btn--topo {
  background: var(--mt-kraft); color: var(--mt-petroleo); box-shadow: var(--mt-sombra-btn-kraft);
}
.hero .btn--gelo:hover, .secao--petroleo .btn--gelo:hover, .popup__texto .btn--primario:hover, .btn--topo:hover {
  background: #E6C394; color: var(--mt-petroleo); transform: translateY(-2px);
}
.faixa .btn--primario, .faixa--lives .btn--primario { box-shadow: var(--mt-sombra-btn); }
.btn:active { transform: translateY(0) scale(.98); }

/* Cartões com elevação */
.cartao-ilu, .curso, .regiao, .numero, .depo, .cartao-form, .faq, .passos { box-shadow: var(--mt-sombra-1); border-color: rgba(17,53,64,.08); }
.cartao-ilu:hover, .curso:hover, .regiao:hover { box-shadow: var(--mt-sombra-2); transform: translateY(-6px); }
.secao--petroleo .cartao-ilu { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 40px -18px rgba(0,0,0,.5); }
.cartao-ilu__ilu { background: linear-gradient(145deg, #F2F7F9, #DCEBF1); box-shadow: 0 1px 0 #fff inset, 0 6px 14px -6px rgba(12,40,48,.25); }
.secao--petroleo .cartao-ilu__ilu { background: linear-gradient(145deg, rgba(170,205,219,.22), rgba(170,205,219,.08)); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset; color: var(--mt-kraft); }
.olhar-card .cartao-ilu__area { color: var(--mt-kraft-escuro); font-weight: 600; }
.secao--petroleo .olhar-card .cartao-ilu__area { color: var(--mt-kraft); }

/* Cursos: faixa com degradê e número em kraft */
.curso__faixa { background: linear-gradient(135deg, var(--mt-petroleo) 0%, #1D4A57 100%); }
.curso__faixa--gelo { background: linear-gradient(135deg, #B9D6E2 0%, #94BCCD 100%); }
.curso__faixa .curso__num { color: var(--mt-kraft); }
.curso__faixa--gelo .curso__num { color: var(--mt-petroleo); }
.curso__preco strong { color: var(--mt-petroleo); }
.curso__preco strong::first-letter { color: var(--mt-kraft-escuro); }

/* Selos e chips */
.ico-selo { color: var(--mt-kraft); }
.selos-ico li { border-color: rgba(217,176,122,.28); }
.selo::before { background: var(--mt-kraft); }
.chip { background: var(--mt-kraft-claro); color: var(--mt-kraft-escuro); }
.bases li { background: linear-gradient(145deg, #F2F7F9, #E3EEF2); }
.ao-vivo { color: var(--mt-kraft); }
.faixa--lives .ao-vivo { background: var(--mt-petroleo); color: var(--mt-kraft); }

/* Números e destaques da página da Andreia */
.numero { background: linear-gradient(160deg, #FFFFFF, #F4F8F9); }
.numero strong { background: linear-gradient(180deg, var(--mt-petroleo), #2A5866); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numero strong::after { content: ""; display: block; width: 32px; height: 3px; border-radius: 3px; background: var(--mt-kraft); margin: .7rem auto 0; }

/* Fotos com sombra e moldura viva */
.foto img { box-shadow: var(--mt-sombra-2); }
.foto::after { background: linear-gradient(135deg, var(--mt-kraft), #C79A62); opacity: .9; }
.hero__foto::before { background: radial-gradient(closest-side, rgba(170,205,219,.32), rgba(217,176,122,.10) 60%, rgba(170,205,219,0)); }
.video, .print button { box-shadow: 0 20px 40px -18px rgba(0,0,0,.55); }
.video:hover { transform: translateY(-4px); transition: transform .3s; }
.video figcaption q { color: var(--mt-branco); }
.video__play span { background: var(--mt-kraft); }

/* Linhas finas um pouco mais presentes */
:root { --mt-linha: rgba(17, 53, 64, .16); }

/* Cabeçalho com leve vidro ao rolar */
.topo.rolou { background: rgba(17,53,64,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

@media (prefers-reduced-motion: reduce) { .cartao-ilu:hover, .curso:hover, .regiao:hover, .btn--primario:hover, .video:hover { transform: none; } }

/* 32. Correções da revisão do Jonathas (07/11)
   a) quadrado do ícone visível: fundo gelo de verdade, borda e sombra própria */
.cartao-ilu__ilu, .cartao-ilu:not(.pilula-ilu) > .cartao-ilu__ilu {
  background: linear-gradient(145deg, #DCEBF1 0%, #B9D6E2 100%);
  border: 1px solid rgba(17,53,64,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 20px -10px rgba(12,40,48,.45);
  color: var(--mt-petroleo);
}
.cartao-ilu__ilu .ilu { stroke-width: 3.6; }
.secao--petroleo .cartao-ilu__ilu, .secao--petroleo .cartao-ilu:not(.pilula-ilu) > .cartao-ilu__ilu {
  background: linear-gradient(145deg, rgba(217,176,122,.28), rgba(217,176,122,.10));
  border-color: rgba(217,176,122,.35); color: var(--mt-kraft);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.6);
}
.etapa__circ { box-shadow: 0 10px 22px -12px rgba(12,40,48,.45); background: linear-gradient(145deg, #FFFFFF, #E6F0F4); }
.historia .etapa__circ { background: var(--mt-petroleo); }

/* b) tablet (561–860 px): foto da Andreia proporcional à tela e título contido */
@media (min-width: 561px) and (max-width: 860px) {
  .hero__topo h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 2.9rem); max-width: 16ch; }
  .hero__lead { font-size: 1.0625rem; max-width: 44ch; }
  .hero__foto img, .hero__foto--recorte img { height: min(56vh, 560px); }
  .hero:not(.hero--interna) .hero__foto::after { width: min(70vw, 520px); }
  .hero__base { max-width: 560px; margin-left: auto; margin-right: auto; }
  .hero__base .botoes { flex-direction: row; justify-content: center; }
  .hero__base .btn { width: auto; }
}

/* 33. Movimento enxuto (07/11): só entradas suaves de uma vez e carrosséis de conteúdo (com pausa).
   Sem loops decorativos: anéis parados, play sem pulso, ponto "ao vivo" fixo. */
.aneis circle:nth-child(2), .aneis circle:nth-child(3) { animation: none; }
.video__play span { animation: none; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); }
.ao-vivo::before { animation: none; }
.letreiro:hover .letreiro__trilho, .letreiro:focus-within .letreiro__trilho, .mural:focus-within .mural__trilho { animation-play-state: paused; }

/* =========================================================
   34. Correções da auditoria fina (07/11) — numeração = item do relatório
   ========================================================= */
/* C1 faixas: manter o recuo lateral do .container */
.faixa__in { padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--mt-gutter); }
/* C2 cabeçalho em uma linha só */
.menu a, .btn--topo { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1360px) { .menu .menu__entrar span { display: none; } .menu .menu__entrar { padding: .5rem .7rem; } }
@media (min-width: 861px) and (max-width: 1100px) { .menu { gap: .9rem; } .menu a { font-size: .875rem; } .topo__logo img { height: 40px; } }

/* A3 WhatsApp flutuante some quando há botão na faixa de baixo (classe via JS) */
.whats { transition: opacity .2s, transform .2s; }
.whats.escondido { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* A4 foco visível em qualquer fundo */
:focus-visible { outline: 3px solid var(--mt-petroleo); outline-offset: 3px; }
.hero :focus-visible, .secao--petroleo :focus-visible, .topo :focus-visible, .rodape :focus-visible, .popup :focus-visible, .letreiro :focus-visible { outline-color: var(--mt-kraft); }

/* A5 só o que é clicável levanta no hover */
.cartao-ilu:hover, .regiao:hover { transform: none; box-shadow: var(--mt-sombra-1); }
.regiao:hover img { transform: none; }
.chips span:hover { background: transparent; color: var(--mt-branco); }

/* A9 quadrado do ícone: contorno interno para separar do cartão */
.cartao-ilu__ilu, .cartao-ilu:not(.pilula-ilu) > .cartao-ilu__ilu { background: linear-gradient(145deg, #D3E6EE 0%, #AFCFDC 100%); box-shadow: 0 0 0 1px rgba(17,53,64,.14) inset, 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 20px -10px rgba(12,40,48,.5); border: 0; }
.secao--petroleo .cartao-ilu__ilu, .secao--petroleo .cartao-ilu:not(.pilula-ilu) > .cartao-ilu__ilu { background: linear-gradient(145deg, rgba(217,176,122,.34), rgba(217,176,122,.14)); box-shadow: 0 0 0 1px rgba(217,176,122,.45) inset, 0 10px 22px -12px rgba(0,0,0,.6); }

/* A10 filtros e setas com borda visível + M alvos de toque ≥ 44 px */
.filtro, .carrossel-nav button { border: 1.5px solid rgba(17,53,64,.45); min-height: 44px; }
.carrossel-nav button { width: 48px; height: 48px; }
.btn--topo { min-height: 44px; }
.rodape ul a { display: inline-block; padding: .35rem 0; }
.rodape ul { gap: .15rem; }

/* M "Para quem é": sem sobra na grade */
@media (max-width: 1100px) { .grade--5 { display: flex; flex-wrap: wrap; justify-content: center; } .grade--5 > * { flex: 0 1 calc(33.333% - 1.2rem); } }
@media (max-width: 640px) {
  .grade--5 { flex-direction: column; flex-wrap: nowrap; }
  .grade--5 > * { flex: none; }
  .pilula-ilu { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.25rem; }
  .pilula-ilu .cartao-ilu__ilu { margin: 0; width: 56px; height: 56px; flex: none; padding: 9px; }
}
/* M três olhares: "Com base em" na mesma altura */
.olhar-card { grid-template-rows: auto auto 1fr auto; }
.olhar-card > p { align-self: start; }
/* M carrossel de cursos vai até a borda da tela */
@media (min-width: 861px) { .carrossel { margin-left: 0; margin-right: calc(50% - 50vw); padding-left: 0; padding-right: max(var(--mt-gutter), calc(50vw - 50%)); scroll-padding-left: 0; } }
/* M hero interno com metade direita ocupada (trio de ilustrações) */
.hero--interna .container { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; }
.hero__trio { display: grid; gap: 1rem; justify-items: end; }
.hero__trio span { display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.4rem .9rem .9rem; border-radius: var(--mt-raio-botao); background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(217,176,122,.3); color: var(--mt-branco); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.hero__trio span:nth-child(2) { margin-right: 3rem; }
.hero__trio .ilu { width: 56px; height: 56px; padding: 8px; border-radius: 50%; background: rgba(217,176,122,.16); color: var(--mt-kraft); stroke-width: 4; }
.hero__trio b { font-size: 1.125rem; font-weight: 600; }
@media (max-width: 860px) { .hero--interna .container { display: block; } .hero__trio { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding-bottom: 2.5rem; } .hero__trio span { padding: .5rem .9rem .5rem .5rem; } .hero__trio span:nth-child(2) { margin-right: 0; } .hero__trio .ilu { width: 36px; height: 36px; padding: 5px; } .hero__trio b { font-size: .9375rem; } .hero--interna .hero__texto { padding-bottom: 1.5rem; } }
/* M /cursos/ mais curto no celular e filtros fixos */
@media (max-width: 860px) {
  .curso__faixa { min-height: 96px; padding: 1rem 1.25rem; }
  .curso__faixa .ilu { width: 84px; height: 84px; right: 10px; bottom: -4px; }
  .curso__faixa .curso__num { font-size: 1.75rem; bottom: .75rem; left: 1.25rem; }
  .filtros { position: sticky; top: 72px; z-index: 20; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin: 0 calc(-1 * var(--mt-gutter)) 1.25rem; padding: .6rem var(--mt-gutter); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; }
}
/* M tablet retrato: hero cabe na tela */
@media (min-width: 561px) and (max-width: 860px) { .hero__foto img, .hero__foto--recorte img { height: min(50vh, 500px); } .hero__base { padding-bottom: 1.75rem; } }
/* M FAQ em coluna única */
.estreito { max-width: 860px; }
/* M selos do hero em uma linha a partir de 861 px */
@media (min-width: 861px) and (max-width: 1180px) { .selos-ico { flex-wrap: nowrap; gap: .35rem; } .selos-ico li { font-size: .75rem; padding: .4rem .7rem .4rem .45rem; } .ico-selo { width: 18px; height: 18px; } }
/* M mural no celular: sem movimento, arrasta com o dedo (cópias escondidas) */
@media (max-width: 760px) {
  .mural { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding: .5rem var(--mt-gutter) 1rem; }
  .mural__trilho { animation: none; }
  .mural__trilho > [aria-hidden="true"] { display: none; }
  .print { scroll-snap-align: center; }
}
/* B baixos */
@media (max-width: 860px) { .hero__lead, .aviso { font-size: 1rem; } }
.chip, .bases::before { font-size: .75rem; }
.frase-grande, .lead, .cabeca-secao h2 { text-wrap: balance; }
.aviso p { max-width: 82ch; }
.curso__preco strong::first-letter { color: inherit; }
.popup__caixa { border-top: 3px solid var(--mt-kraft); }
.secao--citacao .citacao blockquote { color: var(--mt-petroleo); }
.topo__logo { display: inline-flex; align-items: center; min-height: 48px; }
@media (min-width: 901px) { @supports (grid-template-rows: subgrid) {
  .grade--olhares { grid-template-rows: auto auto auto auto; row-gap: 0; }
  .olhar-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
} }
.olhar-card > .bases, .olhar-card > p { align-self: start; }
/* vídeos de depoimento em 3 colunas */
.videos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .videos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .videos--3 { grid-template-columns: none; } }

/* =========================================================
   35. Correções da 2ª auditoria (07/11) — N = item do relatório 2
   ========================================================= */
/* N1 mural no celular: cada print cabe na tela */
@media (max-width: 760px) {
  .mural__trilho { align-items: start; gap: 1rem; }
  .print { width: calc(100vw - 2 * var(--mt-gutter) - 1.5rem); scroll-snap-align: start; }
  .print button { width: 100%; }
  .print img { width: 100%; height: auto; max-width: 100%; }
}
/* N2 lupa: no celular a imagem aparece no tamanho natural, com rolagem */
@media (max-width: 760px) { .lupa { overflow: auto; place-items: start center; padding: 4.5rem 1rem 2rem; } .lupa img { max-width: none; width: min(900px, 160vw); max-height: none; } }
/* N3 vídeo: play no canto, sem cobrir o rosto; janela grande para assistir */
.video__play { place-items: end start; padding: .9rem; background: linear-gradient(to top, rgba(12,40,48,.55), rgba(12,40,48,0) 55%); }
.video__play span { width: 52px; height: 52px; }
.video__play svg { width: 22px; height: 22px; }
.modal-video { position: fixed; inset: 0; z-index: 96; background: rgba(8,24,29,.88); display: grid; place-items: center; padding: 1rem; }
.modal-video[hidden] { display: none; }
.modal-video__caixa { position: relative; width: min(960px, 100%); }
.modal-video__palco video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--mt-raio); display: block; box-shadow: var(--mt-sombra-3); }
.modal-video__legenda { color: var(--mt-gelo-texto); margin: .9rem 0 0; text-align: center; font-weight: 500; }
.modal-video__x { position: absolute; top: -3.25rem; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--mt-kraft); color: var(--mt-petroleo); font-size: 1.5rem; cursor: pointer; }
/* N5 bordas de campos e filtros do blog ≥ 3:1 */
.campo input { border: 1.5px solid rgba(17,53,64,.45); }
/* N7 grade de duas colunas só no hero interno que tem o trio de ilustrações */
.hero--interna .container { display: block; }
@media (min-width: 861px) { .hero--interna:has(.hero__trio) .container { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; } }
/* N8 4 selos da Andreia em 2 colunas no notebook */
@media (min-width: 861px) and (max-width: 1180px) { .selos-ico--4 { display: grid; grid-template-columns: repeat(2, max-content); gap: .4rem; } .selos-ico--4 li { white-space: nowrap; } }
/* N10 vídeos em 3 colunas a partir de 561 px */
@media (min-width: 561px) { .videos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 860px) { .videos--3 { gap: .75rem; } .videos--3 .video figcaption { padding: .75rem; } .videos--3 .video figcaption q { font-size: .9375rem; } }
/* N12 artigo: largura de leitura e item ativo no sumário */
.blog-texto { max-width: 66ch; }
.blog-sumario a[aria-current="true"] { color: var(--mt-petroleo); font-weight: 600; border-left-color: var(--mt-kraft); }
/* N14 rodapé: alvos de 44 px e aviso legível */
.rodape ul a { padding: .7rem 0; min-height: 44px; display: inline-flex; align-items: center; }
.rodape__base a { display: inline-block; padding: .65rem 0; }
.rodape__base p { font-size: .875rem; }
.rodape__titulo { color: var(--mt-branco); font-size: var(--mt-rotulo); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .5rem; }
/* N15 chips de projetos com cara de etiqueta, não de botão */
.chips span { border: 0; background: rgba(170,205,219,.12); border-radius: 8px; color: var(--mt-gelo-texto); font-weight: 500; }
/* N19 barra do carrossel visível */
.carrossel { scrollbar-color: var(--mt-petroleo) rgba(17,53,64,.12); }
.carrossel::-webkit-scrollbar { height: 6px; }
.carrossel::-webkit-scrollbar-thumb { background: var(--mt-petroleo); border-radius: 6px; }
.carrossel::-webkit-scrollbar-track { background: rgba(17,53,64,.12); border-radius: 6px; }
/* B "Entrar na plataforma" com texto a partir de 1200 px; ponto "ao vivo" mais claro; borda da faixa kraft */
@media (min-width: 1200px) and (max-width: 1360px) { .menu .menu__entrar span { display: inline; } .menu .menu__entrar { padding: .5rem .95rem; } .menu { gap: 1.1rem; } }
.ao-vivo::before { background: #FF7B7B; }
.faixa--lives { border-bottom-color: rgba(138,90,43,.3); }
.faixa--fecho { background: linear-gradient(120deg, #FBF6EE 0%, var(--mt-kraft-claro) 100%); }

/* 36. Heros internos sempre com visual: trio de temas (blog) e ilustração do tema (artigo) */
@media (min-width: 861px) { .hero--interna:has(.hero__ilu) .container { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; } .hero__ilu { order: 2; } }
.hero__trio a { display: inline-flex; align-items: center; gap: 1rem; padding: .9rem 1.4rem .9rem .9rem; border-radius: var(--mt-raio-botao); background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(217,176,122,.3); color: var(--mt-branco); text-decoration: none; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); transition: border-color .2s, background .2s, transform .2s; }
.hero__trio a:hover { border-color: var(--mt-kraft); background: linear-gradient(145deg, rgba(217,176,122,.18), rgba(255,255,255,.04)); transform: translateX(-4px); }
.hero__trio--4 a:nth-child(2), .hero__trio--4 a:nth-child(4) { margin-right: 3rem; }
.hero__ilu { position: relative; justify-self: center; display: grid; place-items: center; width: clamp(200px, 22vw, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(217,176,122,.22), rgba(255,255,255,.04) 70%); border: 1px solid rgba(217,176,122,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), inset 0 0 0 10px rgba(255,255,255,.03); }
.hero__ilu .ilu { width: 52%; height: 52%; color: var(--mt-kraft); stroke-width: 3; }
.hero__ilu span { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .4rem .9rem; border-radius: var(--mt-raio-botao); background: var(--mt-kraft); color: var(--mt-preto); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
@media (max-width: 860px) {
  .hero__trio a { padding: .5rem .9rem .5rem .5rem; min-height: 44px; }
  .hero__trio--4 a:nth-child(2), .hero__trio--4 a:nth-child(4) { margin-right: 0; }
  .hero__ilu { width: 120px; margin: 1.75rem 0 -1rem; justify-self: start; }
  .hero__ilu .ilu { width: 56%; height: 56%; }
  .hero__ilu span { display: none; }
}
@media (max-width: 860px) { .hero__trio--4 { justify-content: flex-start; } .hero__trio--4 b { font-size: .875rem; } }
@media (min-width: 861px) { .hero__trio--4 { gap: .75rem; padding-block: 2.5rem; } }

/* 37. Selos do hero: uma linha só, canto suave */
@media (min-width: 861px) { .selos-ico li { white-space: nowrap; border-radius: 10px; } }
@media (max-width: 860px) {
  .selos-ico li { flex-direction: row; justify-content: center; text-align: left; white-space: nowrap; gap: .5rem; font-size: .8125rem; line-height: 1.2; }
  .ico-selo { width: 22px; height: 22px; }
}
@media (max-width: 560px) {
  .selos-ico, .selos-ico--4 { grid-template-columns: 1fr; row-gap: .6rem; padding: .9rem 1.1rem; }
  .selos-ico li { justify-content: flex-start; padding: 0; }
  .selos-ico:not(.selos-ico--4) li + li { border-left: 0; }
}

/* 38. Faixas com ícone: quando o botão desce, ele fica alinhado ao texto, não ao ícone (3ª auditoria, T1) */
@media (max-width: 1100px) {
  .faixa__in { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.25rem; }
  .faixa__in:has(> div:first-child .faixa__ilu) > .btn { margin-left: calc(88px + 1.5rem); }
}
@media (max-width: 560px) { .faixa__in:has(> div:first-child .faixa__ilu) > .btn { margin-left: 0; } }

/* 39. 3ª auditoria: mural, lupa, vídeo, tablet e detalhes */
/* T5 mural arrastável no tablet e em qualquer tela de toque (sem movimento sozinho) */
@media (max-width: 860px), (hover: none) {
  .mural { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding: .5rem var(--mt-gutter) 1rem; scroll-padding-inline: var(--mt-gutter); }
  .mural__trilho { animation: none; align-items: start; }
  .mural__trilho > [aria-hidden="true"] { display: none; }
  .print { scroll-snap-align: start; }
}
@media (min-width: 761px) and (max-width: 860px) { .print { width: 460px; } .print button { width: 100%; } .print img { width: 100%; height: auto; max-width: 100%; } }
/* T3 lupa: imagem na largura da tela, centralizada, com o texto do comentário embaixo */
.lupa__fig { margin: 0; display: grid; justify-items: center; gap: 1rem; max-width: min(900px, 100%); }
.lupa__texto { color: var(--mt-branco); font-size: 1rem; line-height: 1.5; text-align: center; max-width: 40rem; }
.lupa__texto:empty { display: none; }
@media (max-width: 760px) { .lupa { overflow: auto; place-items: center; padding: 4.5rem 1rem 2rem; } .lupa img { width: 100%; max-width: 100%; max-height: none; } }
/* T6 barra de filtros colada ao cabeçalho (normal 73 px, encolhido 61 px) */
:root { --topo-h: 73px; }
html:has(.topo.rolou) { --topo-h: 61px; }
@media (max-width: 860px) { .filtros { top: calc(var(--topo-h) - 1px); transition: top .2s; } }
/* T7 trio do hero interno alinhado ao texto no celular e no tablet */
@media (max-width: 860px) { .hero__trio { justify-content: flex-start; } }
/* T8 títulos longos dentro dos cartões com ícone ao lado (861–1180) */
@media (min-width: 861px) and (max-width: 1180px) { .cartao-ilu h3 { font-size: 1.0625rem; overflow-wrap: anywhere; hyphens: auto; } }
/* T9 fotos dos blocos divididos no tablet: tamanho contido e centralizado */
@media (min-width: 561px) and (max-width: 860px) {
  .dividido .foto { max-width: 440px; width: 100%; margin-inline: auto; }
  .dividido .foto img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
}
/* T10 tablet: cartão de uma coluna fica compacto (ícone à esquerda, título e texto juntos à direita) */
@media (min-width: 600px) and (max-width: 860px) {
  .cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) { grid-template-columns: 72px 1fr; column-gap: 1.5rem; }
  .cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu) > p { grid-column: 2; margin-top: .4rem; }
  .cartao-ilu:not(.pilula-ilu) > .cartao-ilu__ilu { grid-row: 1 / span 3; align-self: start; }
  .cartao-ilu:not(.pilula-ilu):has(> .cartao-ilu__ilu):not(:has(> .cartao-ilu__area)) > h3 { grid-row: auto; align-self: end; }
  .grade--3:has(> .cartao-ilu), .grade--olhares { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
/* T12 cartões da mesma linha com a mesma altura */
@media (max-width: 1100px) and (min-width: 561px) { .grade--5 { align-items: stretch; } .grade--5 > * { display: flex; flex-direction: column; justify-content: center; } }
/* T14 título e texto juntos nos blocos empilhados */
@media (max-width: 860px) { .dividido { row-gap: 1.25rem; } .dividido--foto-menor, .dividido:has(> .foto) { row-gap: 2rem; } }
/* T15 base do rodapé: links legais em linha, sem "·" solto */
.rodape__legal { display: grid; gap: .25rem; }
.rodape__legal nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.rodape__legal nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
/* T16 aviso com linha confortável */
.aviso p { max-width: 42rem; }
/* T18 bloco kraft atrás da foto sem encostar na borda do celular */
@media (max-width: 560px) { .foto::after { right: -6px; bottom: -6px; } }
/* T19 menu do celular: ícone vira ×, véu escurece a página e trava a rolagem */
.menu-toggle .ico-fecha { display: none; }
.menu-toggle[aria-expanded="true"] .ico-abre { display: none; }
.menu-toggle[aria-expanded="true"] .ico-fecha { display: block; }
@media (max-width: 860px) {
  html.menu-aberto body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(8,24,29,.6); animation: aparece .2s ease forwards; opacity: 0; }
  html.menu-aberto .topo { z-index: 60; }
}
/* T20 notas legais dos cursos legíveis */
.curso__nota, .blog-curso__nota { font-size: .875rem; }
/* M6 alvos de toque da trilha e do sumário do artigo */
.blog-trilha a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 860px) { html.menu-aberto .whats { display: none; } }

/* 40. Selo "Ao vivo" nas cores do YouTube (vermelho #CC0000 + branco: 5,9:1) */
.ao-vivo, .faixa--lives .ao-vivo, .hero--lives .ao-vivo { background: #CC0000; color: #FFFFFF; border: 0; box-shadow: 0 8px 20px -10px rgba(204,0,0,.7); }
.ao-vivo::before { background: #FFFFFF; animation: vivo-pulsa 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
@keyframes vivo-pulsa { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .ao-vivo::before { animation: none; } }

/* 41. Ícones: caixa entra com um pulo enquanto o traço se desenha */
.js .desenho .ilu-caixa { opacity: 0; transform: translateY(10px) scale(.82) rotate(-6deg); transition: opacity .5s ease, transform .7s cubic-bezier(.34,1.56,.64,1); }
.js .desenho.visivel .ilu-caixa { opacity: 1; transform: none; }
.js .desenho.visivel:hover .ilu-caixa { transform: translateY(-3px) rotate(-4deg); }

/* 42. Frase grande: as palavras se acendem conforme a leitura */
.frase-grande.lendo { opacity: 1 !important; transform: none !important; }
.frase-grande .le { opacity: .18; transition: opacity .35s ease, color .35s ease; }
.frase-grande .le.lida { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .desenho .ilu-caixa { opacity: 1; transform: none; } }

/* 43. "Para você que quer…": todos os cartões com a mesma altura em qualquer linha (título reserva 2 linhas) */
.pilula-ilu h3 { line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 560px) { .pilula-ilu h3 { justify-content: flex-start; text-align: left; } }

/* 44. Botão de play no formato do YouTube: retângulo arredondado vermelho com triângulo branco */
.video__play span { width: 48px; height: 34px; border-radius: 10px; background: #FF0033; color: #FFFFFF; box-shadow: 0 10px 24px -8px rgba(0,0,0,.55); animation: none; transition: background .2s, transform .2s; }
.video__play svg { width: 18px; height: 18px; margin-left: 2px; }
.video__play:hover span, .video__play:focus-visible span { background: #CC0000; transform: scale(1.06); }
@media (max-width: 560px) { .video__play span { width: 44px; height: 31px; border-radius: 9px; } .video__play svg { width: 16px; height: 16px; } }

/* 45. Trio do hero (o-método, cursos, blog): todos os itens com a mesma largura e altura, sem escada */
.hero__trio > span, .hero__trio > a { box-sizing: border-box; margin-right: 0 !important; white-space: nowrap; }
@media (min-width: 861px) {
  .hero__trio { display: grid; grid-template-columns: minmax(0, 300px); justify-content: end; justify-items: stretch; gap: .75rem; }
  .hero__trio > span, .hero__trio > a { width: 100%; }
}
@media (max-width: 860px) {
  .hero__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; justify-content: stretch; }
  .hero__trio--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__trio > span, .hero__trio > a { width: 100%; justify-content: center; }
}
@media (max-width: 700px) { .hero__trio--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .hero__trio > span, .hero__trio > a { flex-direction: column; gap: .4rem; padding: .7rem .4rem; text-align: center; }
  .hero__trio b { font-size: .875rem; }
}

/* 46. Regra de irmãos iguais: elementos lado a lado ou empilhados no mesmo grupo têm a mesma largura e altura */
/* Pares de botões: as duas colunas com a largura do maior; empilhados no celular, os dois na largura toda */
.botoes { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .75rem; max-width: 100%; }
.botoes > .btn { width: 100%; }
@media (max-width: 560px) { .botoes, .hero__base .botoes { display: grid; grid-auto-flow: row; grid-auto-columns: auto; width: 100%; } }
@media (min-width: 561px) and (max-width: 860px) { .hero__base .botoes { display: inline-grid; grid-auto-flow: column; justify-self: center; } .hero__base { display: grid; } }

/* Selos do hero: painel com colunas iguais (ícone em cima, texto embaixo), igual ao celular */
@media (min-width: 561px) {
  .selos-ico, .selos-ico--4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; flex-wrap: nowrap; background: rgba(255,255,255,.04); border: 1px solid rgba(217,176,122,.28); border-radius: var(--mt-raio); padding: .9rem .5rem; }
  .selos-ico--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .9rem; }
  .selos-ico li, .selos-ico--4 li { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: .45rem; border: 0; background: none; border-radius: 0; padding: 0 .5rem; white-space: nowrap; font-size: .8125rem; line-height: 1.25; color: var(--mt-branco); }
  .selos-ico:not(.selos-ico--4) li + li { border-left: 1px solid var(--mt-linha-escura); }
  .selos-ico--4 li:nth-child(even) { border-left: 1px solid var(--mt-linha-escura); }
  .ico-selo { width: 24px; height: 24px; }
}
@media (min-width: 861px) { .selos-ico { max-width: 34rem; } }

/* Bases dos três olhares: lista de linhas com a mesma largura, não etiquetas de tamanhos soltos */
.bases { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.bases li { display: flex; align-items: center; gap: .55rem; }
.bases li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--mt-kraft); }

/* Projetos missionários: etiquetas em colunas iguais */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .6rem; }
.chips span { display: flex; align-items: center; min-height: 44px; }

/* Filtros de temas: larguras iguais quando cabem numa linha (no celular viram faixa que rola) */
.filtros, .blog-filtros { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; gap: .5rem; max-width: 60rem; flex-wrap: nowrap; }
.filtros .filtro, .blog-filtros .blog-filtro { width: 100%; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 960px) {
  .filtros, .blog-filtros { grid-auto-columns: 172px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--mt-gutter)); padding-inline: var(--mt-gutter); max-width: none; }
  .filtros::-webkit-scrollbar, .blog-filtros::-webkit-scrollbar { display: none; }
}

/* 47. Parcerias (ADIN e Clínica Sentido): cartões iguais, logo numa área fixa, botão no pé */
.parceiros { align-items: stretch; grid-auto-rows: 1fr; max-width: 60rem; margin-inline: auto; }
.parceiro { display: flex; flex-direction: column; gap: 1rem; height: 100%; background: var(--mt-branco); border: 1px solid var(--mt-linha); border-radius: var(--mt-raio); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); box-shadow: var(--mt-sombra-2, 0 18px 40px -24px rgba(17,53,64,.35)); }
.parceiro__logo { display: grid; place-items: center; height: 140px; border-radius: var(--mt-raio-pequeno); background: linear-gradient(145deg, #FFFFFF, var(--mt-nevoa)); box-shadow: 0 0 0 1px rgba(17,53,64,.08) inset; }
.parceiro__logo img { max-height: 64px; max-width: 72%; width: auto; height: auto; }
.parceiro__tag { align-self: flex-start; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-kraft-escuro); }
.parceiro p { margin: 0; color: var(--mt-texto-suave); }
.parceiro .btn { margin-top: auto; width: 100%; }
@media (max-width: 640px) { .parceiro__logo { height: 112px; } .parceiro__logo img { max-height: 52px; } }

/* 48. Parcerias: área do logo com constelação de partículas (canvas) e selo "Parceiro" do Método Tuller */
.parceiro__logo--particulas { position: relative; overflow: hidden; height: 170px; }
.parceiro__logo--particulas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.parceiro__logo--particulas > img { position: relative; z-index: 1; max-height: 60px; filter: drop-shadow(0 6px 14px rgba(255,255,255,.95)); }
.parceiro__selo { position: absolute; z-index: 1; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-petroleo); background: rgba(255,255,255,.88); padding: .3rem .55rem .3rem .4rem; border-radius: 8px; box-shadow: 0 0 0 1px rgba(17,53,64,.1); }
.parceiro__selo img { width: 20px; height: auto; }
@media (max-width: 640px) { .parceiro__logo--particulas { height: 140px; } .parceiro__logo--particulas > img { max-height: 52px; } }

/* 49. Mural: print muito alto aparece cortado no topo com esmaecido; inteiro na lupa */
.print--alto button { position: relative; }
.print--alto button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, rgba(242,246,247,0), rgba(242,246,247,.95)); pointer-events: none; }
@media (max-width: 860px) { .print--alto img { max-height: 240px !important; object-fit: cover; object-position: top; } }
@media (min-width: 861px) { .print--alto img { max-height: 280px; object-fit: cover; object-position: top; width: auto; } }

/* 50. Tablet: foto do hero maior, cortada na cintura (o corte some num esmaecido atrás dos selos) */
@media (min-width: 561px) and (max-width: 860px) {
  .hero:not(.hero--interna) .hero__foto img, .hero:not(.hero--interna) .hero__foto--recorte img {
    height: min(68vh, 640px); margin-bottom: calc(min(68vh, 640px) * -.24);
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 76%); mask-image: linear-gradient(to bottom, #000 66%, transparent 76%);
  }
}
.btn { white-space: nowrap; }
.curso__acoes .btn { padding-inline: 1rem; min-width: 0; }
.campo__ajuda { font-size: .875rem; }
/* B7: entre 861 e 1199 px o botão mostra "Entrar" (antes ficava só o ícone) */
.menu .menu__entrar .entrar__curto { display: none; }
@media (min-width: 861px) and (max-width: 1199px) {
  .menu .menu__entrar .entrar__longo { display: none; }
  .menu .menu__entrar .entrar__curto { display: inline; }
  .menu .menu__entrar { padding: .5rem .8rem; }
}
@media (max-width: 860px) { .menu .menu__entrar .entrar__longo { display: inline; } .menu .menu__entrar .entrar__curto { display: none; } }