/* ==========================================================================
   O Quadrante — página de captura (marca pessoal · Avatar A)
   Identidade: identidade/design-guide.md (Evorion escuro, Sora + Inter,
   borda 1px rgba(255,255,255,.10), raio 20px, CTA em pílula azul→ciano).
   A marca pessoal não tem logo: o nome escrito "Gabriel Guzzo" é a marca.

   EIXO ÚNICO (pedido do fundador, 10/10): todo conteúdo vive no mesmo
   container (.wrap, 1120px + respiro lateral igual), centralizado. Texto
   corrido em coluna de leitura (--leitura). Cartões em grade de colunas
   iguais. Mesmo ritmo vertical em todas as dobras (--secao, --gap-*).

   PALETA COMPLETA (pedido do fundador, 12/10): a página não pode ser toda
   da mesma cor. As seções se alternam entre escuro (--noite), claro
   (.secao--clara), painel (.secao--painel), índigo (a ordem) e azul vívido
   (o fechamento). Numa seção clara as variáveis de cor são redefinidas,
   então os componentes se adaptam sozinhos.
   ========================================================================== */

:root {
  --noite: #0B0F19;
  --fundo: #0B0F19;          /* fundo da seção atual: os marcadores de quadrante "recortam" com ele */
  --painel: #131826;
  --painel-2: #171D2E;
  --tinta: #F5F9FF;
  --nevoa: #A8B3C7;
  --nevoa-2: #C9D2E1;
  --eletrico: #1E8FFF;
  --ciano: #7FD6FF;
  --violeta: #9D7BFF;
  --violeta-claro: #CDBEFF;
  --vivido: #0027D4;
  --linha: rgba(255, 255, 255, 0.10);
  --linha-forte: rgba(255, 255, 255, 0.16);
  --raio: 20px;
  --gradiente: linear-gradient(120deg, var(--eletrico), var(--ciano));
  --topo-h: 64px;
  --ease: cubic-bezier(.65, 0, .25, 1);

  --container: 1120px;
  --respiro: 20px;
  --leitura: 42rem;          /* ~672px: coluna de leitura do texto corrido */
  --coluna: 760px;           /* listas (aulas, FAQ) */
  --secao: 88px;             /* respiro vertical de cada dobra */
  --gap-titulo: 20px;        /* título → texto */
  --gap-bloco: 44px;         /* texto → bloco visual (cartões, tabela, foto) */
  --gap-cta: 32px;           /* conteúdo → botão */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--tinta);
  font: 400 1rem/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-aberto { overflow: hidden; }

h1, h2, h3 {
  font-family: 'Sora', system-ui, sans-serif;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.18rem + 2.2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h3 { font-weight: 700; line-height: 1.25; }

p { margin: 0 0 1em; color: var(--nevoa); }
p:last-child { margin-bottom: 0; }
strong { color: var(--tinta); font-weight: 600; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- o eixo */

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--respiro));
  margin-inline: auto;
  padding-inline: var(--respiro);
}

.centro { text-align: center; }
.centro > h1,
.centro > h2 { max-width: 18em; margin-inline: auto; margin-bottom: var(--gap-titulo); }
.centro > p { max-width: var(--leitura); margin-inline: auto; font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7; }
.centro > .btn { margin-top: var(--gap-cta); }

.coluna {
  max-width: var(--coluna);
  margin: var(--gap-bloco) auto 0;
  text-align: left;
}

/* --------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .9em 1.6em;
  border: 0;
  border-radius: 999px;
  font: 600 1rem/1.2 'Inter', system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--primario {
  background: var(--gradiente);
  color: #04122B;
  box-shadow: 0 12px 34px -12px rgba(30, 143, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn--primario:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 42px -12px rgba(30, 143, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn--primario:active { transform: translateY(0); }
.btn--primario[disabled] { cursor: progress; filter: saturate(.7) brightness(.95); transform: none; }

.btn--claro {
  background: var(--tinta);
  color: var(--vivido);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55);
}
.btn--claro:hover { transform: translateY(-1px); background: #fff; }
.btn--claro:focus-visible { outline-color: #fff; }

.btn--grande { width: 100%; min-height: 58px; padding: 1em 1.2em; font-size: 1.02rem; font-weight: 700; }
.btn--pequeno { min-height: 42px; padding: .6em 1.15em; font-size: .88rem; }
.btn--cheio { width: 100%; }

/* "Privacidade e segurança 100%" */
.seguro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--nevoa-2);
  font-size: .86rem;
  font-weight: 500;
  text-decoration: none;
}
.seguro:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.seguro__cadeado {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--ciano);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.centro > .seguro { display: flex; width: fit-content; margin-inline: auto; }

/* --------------------------------------------------------------- topo e o nome */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 15, 25, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo__dentro {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--topo-h);
}
.topo__cta { display: none; }

.nome {
  color: var(--tinta);
  font: 700 1.08rem/1 'Sora', sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* --------------------------------------------------------------- D1 hero
   Duas colunas no desktop (texto | foto), coluna única no celular.
   Única dobra alinhada à esquerda: é a composição que o fundador aprovou. */

.hero {
  position: relative;
  padding: 32px 0 var(--secao);
  overflow: hidden;
  isolation: isolate;
}
.hero__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 28rem at 88% 8%, rgba(30, 143, 255, .20), transparent 70%),
    radial-gradient(30rem 24rem at 0% 100%, rgba(157, 123, 255, .10), transparent 70%);
}

.hero__grade {
  display: grid;
  gap: 36px;
  grid-template-areas: "texto" "foto";
}
.hero__texto { grid-area: texto; }
.hero__visual { grid-area: foto; }

/* etiquetas (VGR) */
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.etiquetas li {
  padding: .4em .85em;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--nevoa-2);
  font-size: .84rem;
  font-weight: 500;
}

/* selo: no celular é uma etiqueta com filete (quebra em 2 linhas sem virar pílula gigante);
   a partir de 560px vira pílula de uma linha só */
.selo {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--violeta);
  color: var(--violeta-claro);
  font: 600 .7rem/1.5 'Inter', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.1rem, 1.25rem + 3.4vw, 3.4rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
  max-width: 15em;
}

.hero__sub {
  margin: 20px 0 0;
  max-width: 36em;
  font-size: clamp(1.03rem, .97rem + .3vw, 1.16rem);
  line-height: 1.65;
}
.hero__virada {
  color: var(--ciano);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

.hero__acao { margin-top: 28px; }
.hero__acao .seguro { display: flex; width: fit-content; }

.hero__visual {
  position: relative;
  width: min(100%, 460px);
  margin-inline: auto;
}

/* --------------------------------------------------------------- visual do topo: o Claude conectado ao time de agentes
   Modelado das referências do fundador (hub com agentes em volta). SVG único: escala igual no celular.
   Um sinal sai do centro para cada agente, um depois do outro; o agente acende quando o sinal chega. */

.rede {
  position: relative;
  margin: 0;
}
.rede::before {
  /* a luz por trás do conjunto */
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 143, 255, .22), transparent);
  filter: blur(10px);
}
.rede__svg { display: block; width: 100%; height: auto; overflow: visible; }

.rede__fio { stroke: rgba(168, 179, 199, .30); stroke-width: 1.5; }
.rede__pulso {
  stroke: var(--ciano);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 420;
  stroke-dashoffset: 10;
  filter: drop-shadow(0 0 4px rgba(127, 214, 255, .9));
  animation: rede-pulso 3.3s var(--d, 0s) ease-in infinite;
}

.rede__no {
  fill: #121A2E;
  stroke: rgba(127, 214, 255, .30);
  stroke-width: 1.5;
  animation: rede-acende 3.3s var(--d, 0s) infinite;
}
.rede__olho { fill: var(--ciano); }
.rede__rotulo {
  fill: var(--nevoa-2);
  font: 600 12.5px 'Inter', system-ui, sans-serif;
  text-anchor: middle;
}

.rede__aura { animation: rede-aura 3.3s ease-in-out infinite; transform-origin: 200px 205px; }
.rede__centro { filter: drop-shadow(0 10px 26px rgba(217, 119, 87, .55)); }
.rede__selo rect { fill: #0D1222; stroke: rgba(217, 119, 87, .55); stroke-width: 1; }
.rede__selo text { fill: #F2B49C; font: 700 11.5px 'Sora', system-ui, sans-serif; text-anchor: middle; }

@keyframes rede-pulso {
  0% { stroke-dashoffset: 10; opacity: 1; }
  45% { stroke-dashoffset: -150; opacity: 1; }
  46%, 100% { stroke-dashoffset: -150; opacity: 0; }
}
@keyframes rede-acende {
  0%, 38% { stroke: rgba(127, 214, 255, .30); fill: #121A2E; }
  46%, 70% { stroke: var(--ciano); fill: #15284A; }
  100% { stroke: rgba(127, 214, 255, .30); fill: #121A2E; }
}
@keyframes rede-aura { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rede__pulso { display: none; }
  .rede__no, .rede__aura { animation: none !important; }
}

/* --------------------------------------------------------------- cartões (grade de colunas iguais) */

.cartoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 960px;
  margin: var(--gap-bloco) auto 0;
}
.cartoes--4 { grid-template-columns: 1fr 1fr; }

.cartoes > li {
  position: relative;
  padding: 22px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--nevoa-2);
  text-align: center;
  line-height: 1.55;
}

/* marcador próprio: um quadrante (4 quadrados), centrado no topo do cartão */
.cartoes > li::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto 12px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 7px, var(--painel) 7px 9px, transparent 9px),
    linear-gradient(180deg, transparent 7px, var(--painel) 7px 9px, transparent 9px),
    var(--gradiente);
}
.cartoes--4 > li { padding: 18px 14px; font-size: .94rem; }

/* --------------------------------------------------------------- retrato (com e sem foto) */

.retrato {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(30, 143, 255, .30), transparent 62%),
    linear-gradient(180deg, #161D30, #0B0F19 78%);
}

/* sem foto: os eixos do quadrante e um anel de medida — o lugar já com a cara da página */
.retrato__vazio {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .09) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(180deg, transparent calc(44% - .5px), rgba(255, 255, 255, .09) calc(44% - .5px) calc(44% + .5px), transparent calc(44% + .5px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 32px);
}
.retrato__vazio::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 56%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(127, 214, 255, .3);
  box-shadow: 0 0 0 18px rgba(30, 143, 255, .04), 0 0 80px rgba(30, 143, 255, .18) inset;
}
.retrato__vazio::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ciano);
  box-shadow: 0 0 0 7px rgba(127, 214, 255, .16), 0 0 28px var(--ciano);
}

.retrato__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.retrato::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(11, 15, 25, .92), transparent);
  pointer-events: none;
}

.retrato__legenda {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.retrato__legenda strong { font: 700 1.02rem/1.3 'Sora', sans-serif; }
.retrato__legenda span { color: var(--nevoa); font-size: .82rem; }



/* --------------------------------------------------------------- seções */

.secao { padding: var(--secao) 0; }
.secao + .secao { border-top: 1px solid rgba(255, 255, 255, .06); }

/* D2 espelho */
.centro > .espelho__virada {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid rgba(30, 143, 255, .35);
  border-radius: var(--raio);
  background: rgba(30, 143, 255, .06);
  color: var(--nevoa-2);
}

/* --------------------------------------------------------------- D3 a ordem invertida */

.ordem {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(50rem 30rem at 50% 45%, rgba(157, 123, 255, .10), transparent 70%),
    linear-gradient(180deg, var(--noite), #110F27 22%, #110F27 78%, var(--noite));
}
.ordem__abre { padding-top: var(--secao); }
.centro > .ordem__estatico { color: var(--nevoa-2); }

.ordem__palco {
  position: relative;
  padding: 44px 0 36px;
}
.ordem__palco::before {
  /* a planta: grade fina de arquiteto, apagando nas bordas (só o fundo, nunca o conteúdo) */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(127, 214, 255, .045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(180deg, rgba(127, 214, 255, .045) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.ordem__palco > .wrap { position: relative; }

.ordem__cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  text-align: center;
}
.ordem__estado {
  display: grid;
  margin: 0;
  font: 700 1.08rem/1.3 'Sora', sans-serif;
}
.ordem__estado > span { grid-area: 1 / 1; transition: opacity .45s ease; }
.ordem__estado-errado { color: var(--violeta-claro); opacity: 0; }
.ordem__estado-certo { color: var(--ciano); }
.ordem__dica { display: none; margin: 0; font-size: .86rem; color: var(--nevoa); }

.ordem__blocos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 480px;
  margin-inline: auto;
}

.bloco {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 16px 16px 18px;
  border: 1px solid rgba(127, 214, 255, .42);
  border-radius: var(--raio);
  background: var(--painel);
  box-shadow: 0 0 0 1px rgba(127, 214, 255, .10), 0 18px 50px -26px rgba(30, 143, 255, .65);
}
.bloco__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradiente);
  color: #04122B;
  font: 800 .95rem/1 'Sora', sans-serif;
}
.bloco__nome { margin: 4px 0 4px; font-size: 1.2rem; }
.bloco__texto { display: grid; }
.bloco__pergunta { margin: 0; color: var(--tinta); font: 600 1rem/1.4 'Sora', sans-serif; }
.bloco__sintoma { margin: 6px 0 0; color: var(--violeta-claro); font-size: .94rem; line-height: 1.45; }
.bloco__sintoma .sr { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; color: var(--nevoa); }

.ordem__legenda {
  display: grid;
  margin: 26px 0 0;
  text-align: center;
  font: 600 1.02rem/1.4 'Sora', sans-serif;
}
.ordem__legenda > span { grid-area: 1 / 1; transition: opacity .5s ease .5s; }
.ordem__legenda-errado { display: none; color: var(--violeta-claro); }
.ordem__legenda-certo { color: var(--tinta); }

/* o elo entre esferas (vertical no celular) */
.elo {
  position: relative;
  height: 26px;
  width: 2px;
  margin-left: 33px;
  background: var(--gradiente);
}
.elo__pulso, .gota { display: none; }

/* ---- com animação (JS e movimento liberado) ---- */
.ordem-anima .ordem__estatico { display: none; }
.ordem-anima .ordem__trilho { height: 200vh; height: 200svh; }
.ordem-anima .ordem__palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: calc(var(--topo-h) + 4vh) 0 24px;
}
.ordem-anima .ordem__palco > .wrap { width: 100%; }
.ordem-anima .ordem__dica { display: block; transition: opacity .4s ease; }
.ordem-anima .ordem__legenda-errado { display: block; opacity: 0; }
.ordem-anima .is-errado .ordem__legenda-errado { opacity: 1; transition-delay: 0s; }
.ordem-anima .is-errado .ordem__legenda-certo { opacity: 0; transition-delay: 0s; }
.ordem-anima .bloco__sintoma .sr { position: absolute !important; width: 1px; height: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
.ordem-anima .bloco__texto > p { grid-area: 1 / 1; margin: 0; transition: opacity .5s ease .25s; }
.ordem-anima .bloco__sintoma { opacity: 0; }
.ordem-anima .bloco {
  transition:
    transform 1s var(--ease) var(--atraso, 0ms),
    border-color .6s ease .3s,
    box-shadow .6s ease .3s,
    background-color .6s ease .3s;
  will-change: transform;
}
.ordem-anima .bloco__num { transition: background .5s ease .35s, color .5s ease .35s, box-shadow .5s ease .35s; }
.ordem-anima .elo__pulso {
  display: block;
  position: absolute;
  left: -3px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--ciano);
  animation: pulso-v 1.8s linear infinite;
}

/* estado: fora de ordem */
.ordem-anima .is-errado .ordem__estado-errado { opacity: 1; }
.ordem-anima .is-errado .ordem__estado-certo { opacity: 0; }
.ordem-anima .is-certo .ordem__dica { opacity: 0; }
.ordem-anima .is-errado .bloco {
  transform: translate(calc(var(--dx, 0px) + var(--y, 0px) * .45), var(--dy, 0px)) rotate(calc(var(--rot, 0deg) * .4));
  border-color: rgba(157, 123, 255, .34);
  background-color: #121524;
  box-shadow: none;
}
.ordem-anima .is-errado .bloco__num {
  background: transparent;
  color: var(--violeta-claro);
  box-shadow: inset 0 0 0 1px rgba(157, 123, 255, .6);
}
.ordem-anima .is-errado .bloco__pergunta { opacity: 0; transition-delay: 0s; }
.ordem-anima .is-errado .bloco__sintoma { opacity: 1; }
.ordem-anima .is-errado .elo {
  background: repeating-linear-gradient(180deg, rgba(157, 123, 255, .55) 0 4px, transparent 4px 9px);
}
.ordem-anima .is-errado .elo__pulso { display: none; }
.ordem-anima .is-errado .gota {
  display: block;
  position: absolute;
  left: 8px;
  top: 6px;
  color: var(--violeta-claro);
  font: 800 .85rem/1 'Sora', sans-serif;
  text-shadow: 0 0 10px rgba(157, 123, 255, .7);
  opacity: 0;
  animation: vaza-lado 2.6s ease-in infinite;
}
.ordem-anima .is-errado .gota:nth-of-type(3) { animation-delay: .85s; top: 2px; }
.ordem-anima .is-errado .gota:nth-of-type(4) { animation-delay: 1.7s; top: 10px; }

@keyframes vaza-lado {
  0% { transform: translate(0, 0); opacity: 0; }
  18% { opacity: .95; }
  100% { transform: translate(78px, 20px); opacity: 0; }
}
@keyframes vaza-baixo {
  0% { transform: translate(-50%, 0); opacity: 0; }
  18% { opacity: .95; }
  100% { transform: translate(-50%, 110px); opacity: 0; }
}
@keyframes pulso-v {
  from { transform: translateY(-4px); opacity: 0; }
  20%, 80% { opacity: 1; }
  to { transform: translateY(26px); opacity: 0; }
}
@keyframes pulso-h {
  from { transform: translateX(-4px); opacity: 0; }
  20%, 80% { opacity: 1; }
  to { transform: translateX(calc(100% + 52px)); opacity: 0; }
}

.ordem__fecho { padding-top: 28px; padding-bottom: var(--secao); }
.centro.ordem__fecho > p { color: var(--nevoa-2); }

/* --------------------------------------------------------------- 4 visão do futuro (tabela comparativa)
   Desktop: duas colunas que leem como dois cartões (Hoje · Com método e um time de IA).
   Celular: cada par vira um cartão, hoje em cima, com método embaixo. */

.futuro__tabela {
  width: 100%;
  max-width: 992px;
  margin: var(--gap-bloco) auto 0;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.futuro__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.futuro__tabela tbody, .futuro__tabela tr, .futuro__tabela td { display: block; }
.futuro__tabela tr {
  margin-bottom: 12px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  overflow: hidden;
}
.futuro__tabela td { padding: 14px 18px 16px; line-height: 1.5; }
.futuro__tabela td::before {
  content: attr(data-rotulo);
  display: block;
  margin-bottom: 4px;
  font: 600 .78rem/1.3 'Sora', sans-serif;
}
td.futuro__hoje { background: rgba(255, 255, 255, .025); color: var(--nevoa); }
td.futuro__hoje::before { color: var(--nevoa); }
td.futuro__depois { background: rgba(30, 143, 255, .10); color: var(--tinta); border-top: 1px solid rgba(127, 214, 255, .22); }
td.futuro__depois::before { color: var(--ciano); }
.centro > .futuro__fecho { margin-top: var(--gap-bloco); color: var(--nevoa-2); }

/* --------------------------------------------------------------- 5 o que você aprende (texto · grade 2×2) */

.aprende__grade {
  display: grid;
  gap: 28px;
  grid-template-areas: "texto" "esferas" "fim";
}
.aprende__texto { grid-area: texto; }
.esferas { grid-area: esferas; }
.aprende__fim { grid-area: fim; }

.aprende__texto h2 { margin-bottom: var(--gap-titulo); font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.3rem); }
.aprende__texto p { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7; }

.esferas { display: grid; gap: 14px; }
.esfera {
  padding: 22px 22px 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
}
.esfera__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradiente);
  color: #04122B;
  font: 800 .9rem/1 'Sora', sans-serif;
}
.esfera h3 { margin: 14px 0 8px; font-size: 1.22rem; }
.esfera h3 span { display: block; margin-top: 4px; color: var(--ciano); font-size: .95rem; font-weight: 600; }
.esfera p { margin: 0; color: var(--nevoa-2); font-size: .96rem; line-height: 1.6; }

.ia-faixa {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(127, 214, 255, .35);
  border-radius: 16px;
  background: rgba(30, 143, 255, .08);
  color: var(--nevoa-2);
  line-height: 1.6;
}
.aprende__fim { display: flex; flex-direction: column; align-items: center; }
.aprende__fim .ia-faixa { align-self: stretch; }
.aprende__fim .btn { margin-top: var(--gap-cta); }
.aprende__fim .seguro { display: flex; width: fit-content; }

/* --------------------------------------------------------------- 6 as 3 aulas (miniatura · texto) */

.aulas__lista {
  display: grid;
  gap: 16px;
  max-width: 992px;
  margin: var(--gap-bloco) auto 0;
  text-align: left;
}
.aula {
  display: grid;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--painel);
  overflow: hidden;
}
.aula__texto { padding: 22px 22px 26px; }
.aula__meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.aula h3 { margin-bottom: 14px; font-size: clamp(1.14rem, 1.04rem + .45vw, 1.4rem); }
.aula__texto li {
  position: relative;
  padding: 6px 0 6px 26px;
  color: var(--nevoa-2);
  line-height: 1.55;
}
.aula__texto li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(6px + .45em);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ciano);
}

/* miniatura provisória: cartão escuro com a aula e o Quadrante em destaque */
.miniatura {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--linha);
  background:
    repeating-linear-gradient(90deg, rgba(127, 214, 255, .05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(127, 214, 255, .05) 0 1px, transparent 1px 28px),
    radial-gradient(80% 90% at 50% 40%, rgba(30, 143, 255, .30), transparent 70%),
    #0D1220;
}
.miniatura__rotulo {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: .35em .8em;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: rgba(11, 15, 25, .75);
  color: var(--tinta);
  font: 600 .76rem/1.3 'Sora', sans-serif;
}
/* botão de play: lê como vídeo */
.miniatura::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.miniatura::before {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 25px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent rgba(255, 255, 255, .85);
}
.miniatura__quadrante {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 104px;
  aspect-ratio: 1;
  border: 1.5px solid rgba(127, 214, 255, .55);
  border-radius: 12px;
  overflow: visible;
}
.miniatura__quadrante i {
  display: grid;
  place-items: center;
  color: var(--nevoa);
  font: 800 .85rem/1 'Sora', sans-serif;
  font-style: normal;
}
.miniatura__quadrante i:nth-of-type(odd) { border-right: 1.5px solid rgba(127, 214, 255, .55); }
.miniatura__quadrante i:nth-of-type(-n+2) { border-bottom: 1.5px solid rgba(127, 214, 255, .55); }
/* aula 1: a ordem começa pela 1 · aula 2: as 4 esferas acesas · aula 3: a IA no centro das quatro */
.miniatura--1 .miniatura__quadrante i:nth-of-type(1) { color: #04122B; background: var(--gradiente); border-top-left-radius: 10px; }
.miniatura--2 .miniatura__quadrante i { color: var(--tinta); background: rgba(30, 143, 255, .22); }
.miniatura--2 .miniatura__quadrante i:nth-of-type(1) { border-top-left-radius: 10px; }
.miniatura--2 .miniatura__quadrante i:nth-of-type(2) { border-top-right-radius: 10px; }
.miniatura--2 .miniatura__quadrante i:nth-of-type(3) { border-bottom-left-radius: 10px; }
.miniatura--2 .miniatura__quadrante i:nth-of-type(4) { border-bottom-right-radius: 10px; }
.miniatura--3 .miniatura__quadrante b {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gradiente);
  color: #04122B;
  font: 800 .8rem/1 'Sora', sans-serif;
  box-shadow: 0 0 0 6px rgba(127, 214, 255, .16), 0 0 28px rgba(127, 214, 255, .7);
}

/* --------------------------------------------------------------- D6 filtro */

.filtro__grade {
  display: grid;
  gap: 14px;
  max-width: 960px;
  margin: var(--gap-bloco) auto 0;
  text-align: left;
}
.filtro__card {
  padding: 26px 22px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
/* "É pra você": borda de luz girando + brilho — o cartão que diz "é você" */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.filtro__sim {
  position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, #16203A, var(--painel) 55%) padding-box,
    conic-gradient(from var(--giro), rgba(127, 214, 255, .25) 0deg, var(--violeta) 90deg, var(--ciano) 160deg, var(--eletrico) 220deg, rgba(127, 214, 255, .25) 300deg) border-box;
  box-shadow: 0 0 0 6px rgba(30, 143, 255, .06), 0 26px 70px -28px rgba(30, 143, 255, .75), 0 0 70px -24px rgba(157, 123, 255, .55);
  animation: giro 5s linear infinite;
}
@keyframes giro { to { --giro: 360deg; } }
.filtro__sim h3 { color: var(--ciano); }
.filtro__nao { background: rgba(255, 255, 255, .02); opacity: .82; }
.centro > .filtro__chamada {
  margin-top: var(--gap-bloco);
  color: var(--tinta);
  font: 600 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.45 'Sora', sans-serif;
}
.filtro h3 { margin-bottom: 14px; font-size: 1.12rem; }
.filtro__sim li {
  position: relative;
  padding: 8px 0 8px 32px;
  color: var(--nevoa-2);
}
.filtro__sim li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(8px + .2em);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(127, 214, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(127, 214, 255, .45);
}
.filtro__sim li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(8px + .2em + 5px);
  width: 6px;
  height: 9px;
  border: solid var(--ciano);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filtro__nao h3 { color: var(--nevoa-2); }
.filtro__nao p:first-of-type { color: var(--nevoa-2); }

/* --------------------------------------------------------------- blocos com visual: duas colunas
   Regra do fundador (10/10): bloco com visual = dois containers (visual | texto) no desktop;
   bloco só de texto = centralizado. No celular empilha: visual, depois texto. */

.duas-colunas {
  display: grid;
  gap: 36px;
  align-items: center;
}
.duas-colunas__texto h2 { margin-bottom: var(--gap-titulo); }
.duas-colunas__texto > p {
  max-width: 36em;
  font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem);
  line-height: 1.7;
}
.duas-colunas__texto > .btn { margin-top: var(--gap-cta); }

/* --------------------------------------------------------------- D7 autor */

.retrato--autor { width: min(100%, 360px); margin: 0 auto; }
.autor__grade .retrato--autor { order: 2; }

.credenciais {
  margin: 26px 0;
  max-width: 36em;
  border-top: 1px solid var(--linha);
}
.credenciais li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--linha);
  color: var(--nevoa);
}
.credenciais li::before {
  /* o mesmo marcador de quadrante da página */
  content: "";
  position: absolute;
  left: 1px;
  top: calc(14px + .42em);
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 5.5px, var(--fundo) 5.5px 7.5px, transparent 7.5px),
    linear-gradient(180deg, transparent 5.5px, var(--fundo) 5.5px 7.5px, transparent 7.5px),
    var(--gradiente);
}
.duas-colunas__texto > .autor__fecho { color: var(--nevoa-2); }

/* --------------------------------------------------------------- D8 FAQ */

.faq__lista { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  position: relative;
  padding: 20px 48px 20px 4px;
  color: var(--tinta);
  font: 600 1.04rem/1.4 'Sora', sans-serif;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--ciano);
  transition: transform .25s ease;
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: #fff; }
.faq details p { padding: 0 4px 22px; }

/* --------------------------------------------------------------- 10 fechamento (Quadrante · texto; P.S. centralizado) */

.final {
  position: relative;
  padding: var(--secao) 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 16px),
    radial-gradient(60rem 30rem at 50% 0%, rgba(127, 214, 255, .26), transparent 65%),
    var(--vivido);
  color: #fff;
}
.final h2 { color: #fff; margin-bottom: var(--gap-titulo); }
.final p { color: rgba(255, 255, 255, .88); }

.final__grade {
  display: grid;
  gap: 40px;
  grid-template-areas: "texto" "visual";
  align-items: center;
}
.final__texto { grid-area: texto; }
.final__quadrante { grid-area: visual; }
.final__texto > p:not(.libera__titulo) { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7; max-width: 36em; }

.final .libera__titulo { margin: 26px 0 10px; color: #fff; font: 700 1.02rem/1.4 'Sora', sans-serif; }
.libera li {
  position: relative;
  padding: 7px 0 7px 34px;
  color: rgba(255, 255, 255, .9);
  line-height: 1.5;
}
.libera li strong { color: #fff; }
.libera li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(7px + .1em);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}
.libera li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(7px + .1em + 5px);
  width: 6px;
  height: 10px;
  border: solid var(--vivido);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.final__texto .btn { margin-top: 28px; }
.final__texto .seguro { display: flex; width: fit-content; }
.seguro--claro { color: rgba(255, 255, 255, .88); }
.seguro--claro:hover { color: #fff; }
.seguro--claro .seguro__cadeado { stroke: #fff; }

.final .final__ps {
  max-width: 46rem;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  text-align: center;
  font-size: .96rem;
  color: rgba(255, 255, 255, .86);
}
.final__ps strong { color: #fff; }

.final__quadrante {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 240px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 18px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .04);
  text-align: left;
}
.final__quadrante::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .18), 0 0 20px #fff;
}
.final__quadrante span {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
  color: #fff;
  font: 700 .95rem/1.1 'Sora', sans-serif;
}
.final__quadrante span:nth-child(odd) { border-right: 1.5px solid rgba(255, 255, 255, .6); }
.final__quadrante span:nth-child(-n+2) { border-bottom: 1.5px solid rgba(255, 255, 255, .6); }
.final__quadrante i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .7);
  font: 800 .78rem/1 'Sora', sans-serif;
  font-style: normal;
}

/* --------------------------------------------------------------- rodapé e barra */

.rodape { padding: 36px 0 calc(36px + 76px); border-top: 1px solid var(--linha); }
.rodape__dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.rodape p { margin: 0; font-size: .85rem; }
.rodape a { color: var(--nevoa-2); text-underline-offset: 2px; }
.nome--rodape { font-size: 1rem; }

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 15, 25, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.barra.is-on { transform: none; }

/* --------------------------------------------------------------- pop-up de captura */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.modal.is-open,
.modal:target { display: flex; }

.modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 14, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: aparece .25s ease;
}

.modal__caixa {
  position: relative;
  width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 20px calc(22px + env(safe-area-inset-bottom));
  border: 1px solid var(--linha-forte);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #192034, var(--painel) 60%);
  box-shadow: 0 -20px 80px -20px rgba(30, 143, 255, .45);
  text-align: center;
  animation: sobe .32s var(--ease);
}
.modal__caixa::before {
  /* alça de folha (celular) */
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
}

.modal__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--nevoa);
  transition: background .2s ease, color .2s ease;
}
.modal__fechar:hover { background: rgba(255, 255, 255, .06); color: var(--tinta); }
.modal__fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.modal__titulo {
  max-width: 14em;
  margin: 0 auto 8px;
  font-weight: 800;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.modal__sub { margin: 0 auto 22px; color: var(--nevoa); }

.cadastro { display: grid; gap: 14px; text-align: left; }

.campo label {
  display: block;
  margin-bottom: 6px;
  color: var(--nevoa-2);
  font-size: .88rem;
  font-weight: 500;
}
.campo input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: var(--noite);
  color: var(--tinta);
  font: 400 16px/1 'Inter', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: #7D889C; }
.campo input:hover { border-color: rgba(255, 255, 255, .26); }
.campo input:focus {
  outline: none;
  border-color: var(--ciano);
  box-shadow: 0 0 0 3px rgba(127, 214, 255, .25);
}
.campo input[aria-invalid="true"] {
  border-color: #FF9C9C;
  box-shadow: 0 0 0 3px rgba(255, 156, 156, .18);
}
.campo--isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cadastro__erro { display: none; margin: 0; color: #FFB8B8; font-size: .92rem; }
.cadastro__erro.is-on { display: block; }
.cadastro .btn { margin-top: 4px; }
.cadastro .seguro { margin-top: 2px; justify-self: center; }

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes entra { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ======================================================================
   A partir de 560px
   ====================================================================== */
@media (min-width: 560px) {
  .selo {
    display: inline-block;
    padding: .55em 1em;
    border: 1px solid rgba(157, 123, 255, .45);
    border-radius: 999px;
    background: rgba(157, 123, 255, .08);
    letter-spacing: .12em;
  }
  .hero__acao .btn--grande { width: auto; }
  .btn--grande { width: auto; padding: 1em 2em; font-size: 1.05rem; }
  .cadastro .btn--grande { width: 100%; }

  .modal { align-items: center; padding: 24px; }
  .modal__caixa {
    width: min(100%, 460px);
    max-height: calc(100dvh - 48px);
    padding: 40px 32px 28px;
    border-bottom: 1px solid var(--linha-forte);
    border-radius: 24px;
    box-shadow: 0 40px 120px -30px rgba(30, 143, 255, .55);
    animation-name: entra;
  }
  .modal__caixa::before { display: none; }

  .cartoes--4 > li { padding: 22px 18px; font-size: 1rem; }
}

/* ======================================================================
   A partir de 760px (tablet)
   ====================================================================== */
@media (min-width: 760px) {
  :root {
    --respiro: 32px;
    --secao: 112px;
    --gap-bloco: 52px;
  }
  .topo__dentro { justify-content: space-between; }
  .topo__cta { display: inline-flex; }
  .barra { display: none; }
  .rodape { padding-bottom: 36px; }



  .cartoes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtro__grade { grid-template-columns: 1fr 1fr; }

  .futuro__tabela { display: table; border-spacing: 16px 0; table-layout: fixed; }
  .futuro__tabela thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .futuro__tabela tbody { display: table-row-group; }
  .futuro__tabela tr { display: table-row; margin: 0; border: 0; }
  .futuro__tabela th,
  .futuro__tabela td { display: table-cell; vertical-align: top; border-left: 1px solid; border-right: 1px solid; }
  .futuro__tabela td::before { display: none; }
  .futuro__tabela th { padding: 22px 26px 12px; border-top: 1px solid; border-radius: 20px 20px 0 0; font: 700 1.1rem/1.3 'Sora', sans-serif; text-align: left; }
  .futuro__tabela td { padding: 14px 26px; border-top: 1px solid rgba(255, 255, 255, .06) !important; }
  .futuro__tabela tbody tr:last-child td { padding-bottom: 26px; border-bottom: 1px solid; border-radius: 0 0 20px 20px; }
  .futuro__hoje { border-color: var(--linha); background: rgba(255, 255, 255, .025); color: var(--nevoa); }
  .futuro__depois { border-color: rgba(127, 214, 255, .32); background: rgba(30, 143, 255, .10); color: var(--tinta); }
  th.futuro__hoje { color: var(--nevoa-2); }
  th.futuro__depois { color: var(--ciano); }

  .esferas { grid-template-columns: 1fr 1fr; }

  .aula { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .miniatura { aspect-ratio: auto; min-height: 210px; border-bottom: 0; border-right: 1px solid var(--linha); }
  .aula__texto { padding: 28px 30px 30px; align-self: center; }
  .filtro__card { padding: 32px 30px; }


}

/* D3 lado a lado só a partir de 1024px: abaixo disso as 4 esferas ficam estreitas demais */
@media (min-width: 1024px) {
  /* D3: as 4 esferas lado a lado */
  .ordem__blocos {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: stretch;
  }
  .bloco {
    display: flex;
    flex-direction: column;
    min-height: 236px;
    padding: 20px 18px 22px;
  }
  .bloco__nome { margin: 20px 0 10px; font-size: 1.35rem; }
  .bloco__pergunta { font-size: 1.06rem; line-height: 1.35; }
  .bloco__sintoma { font-size: .96rem; }
  .elo {
    align-self: center;
    width: auto;
    height: 2px;
    margin: 0 4px;
  }
  .ordem-anima .elo__pulso { top: -3px; left: 0; animation-name: pulso-h; }
  .ordem-anima .ordem__palco { align-items: center; padding-top: var(--topo-h); }
  .ordem-anima .is-errado .bloco {
    transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--y, 0px))) rotate(var(--rot, 0deg));
  }
  .ordem-anima .is-errado .elo {
    background: repeating-linear-gradient(90deg, rgba(157, 123, 255, .55) 0 5px, transparent 5px 11px);
  }
  .ordem-anima .is-errado .gota { left: 50%; top: 8px; animation-name: vaza-baixo; }
  .ordem-anima .is-errado .gota:nth-of-type(3) { left: 30%; }
  .ordem-anima .is-errado .gota:nth-of-type(4) { left: 70%; }
  .ordem__cabeca { margin-bottom: 40px; }
  .ordem__estado { font-size: 1.25rem; }
  .ordem__legenda { margin-top: 44px; font-size: 1.2rem; }
}

/* ======================================================================
   A partir de 1024px (desktop)
   ====================================================================== */
@media (min-width: 1024px) {
  .hero { padding-top: 56px; }
  .hero__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "texto foto";
    column-gap: 64px;
    row-gap: 36px;
    align-items: start;
  }
  .hero__visual { width: 100%; max-width: 420px; margin: 0; align-self: center; justify-self: center; }

  .duas-colunas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .retrato--autor { width: 100%; max-width: 440px; }
  .autor__grade .retrato--autor { order: 0; }

  .aprende__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "texto esferas" "fim esferas";
    column-gap: 64px;
    row-gap: 0;
  }
  .esferas { align-self: center; }
  .aprende__texto { align-self: end; }
  .aprende__fim { align-self: start; padding-top: 28px; }

  .final__grade {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    grid-template-areas: "visual texto";
    column-gap: 72px;
  }
  .final__quadrante { width: min(100%, 320px); }
  .final__quadrante span { gap: 10px; padding: 20px; font-size: 1.15rem; }
  .final__quadrante i { width: 30px; height: 30px; font-size: .85rem; }
  .final__quadrante::after { width: 14px; height: 14px; }

  .cartoes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bloco { padding: 22px 22px 24px; }
  .bloco__nome { font-size: 1.55rem; }
  .bloco__pergunta { font-size: 1.16rem; }
  .elo { margin: 0 6px; }
  .ordem__blocos { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr); }
}

/* ======================================================================
   Paleta completa: seções claras e de painel
   As variáveis de cor são redefinidas dentro da seção — título, texto,
   borda, cartão e marcador se adaptam sem regra nova em cada componente.
   ====================================================================== */
.secao--clara {
  --tinta: #0B0F19;
  --nevoa: #4A556B;
  --nevoa-2: #2C3547;
  --linha: rgba(11, 15, 25, .10);
  --linha-forte: rgba(11, 15, 25, .16);
  --painel: #FFFFFF;
  --fundo: #F3F6FC;
  background:
    radial-gradient(48rem 22rem at 50% 0%, rgba(30, 143, 255, .07), transparent 70%),
    var(--fundo);
  color: var(--tinta);
}
.secao--clara + .secao,
.secao + .secao--clara,
.hero + .secao--clara { border-top: 0; }
.secao--clara :focus-visible { outline-color: var(--vivido); }
.secao--clara .seguro__cadeado { stroke: var(--vivido); }
.secao--clara .btn--primario {
  background: linear-gradient(120deg, var(--vivido), var(--eletrico) 75%, #46A8FF);
  color: #fff;
  box-shadow: 0 14px 34px -14px rgba(0, 39, 212, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.secao--clara .btn--primario:hover { box-shadow: 0 18px 42px -14px rgba(0, 39, 212, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* o que fica escuro dentro de uma seção clara (vídeo, foto) volta para as cores do escuro */
.secao--clara .miniatura,
.secao--clara .retrato {
  --tinta: #F5F9FF;
  --nevoa: #A8B3C7;
  --linha: rgba(255, 255, 255, .10);
  --linha-forte: rgba(255, 255, 255, .16);
}
.secao--clara .retrato { box-shadow: 0 30px 70px -36px rgba(11, 15, 25, .55); }

.secao--painel {
  --fundo: #121726;
  background: var(--fundo);
}

/* ---- 1b o que você leva (cartões de desejo) ---- */
.sobretitulo {
  display: block;
  width: fit-content;
  margin: 0 auto 14px !important;
  padding: .45em 1em;
  border-radius: 999px;
  background: rgba(107, 78, 230, .10);
  color: #5B3FD9 !important;
  font: 700 .74rem/1.4 'Inter', sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ganhos {
  display: grid;
  gap: 16px;
  max-width: 1040px;
  margin: var(--gap-bloco) auto 0;
  text-align: left;
  counter-reset: ganho;
}
.ganho {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  box-shadow: 0 22px 50px -32px rgba(11, 15, 25, .35);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ganho::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--vivido), var(--eletrico), var(--violeta));
}
.ganho:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -32px rgba(0, 39, 212, .4); }
.ganho__num {
  color: transparent;
  background: linear-gradient(120deg, var(--vivido), var(--violeta));
  -webkit-background-clip: text;
  background-clip: text;
  font: 800 2.2rem/1 'Sora', sans-serif;
  letter-spacing: -0.03em;
}
.ganho h3 { margin: 14px 0 10px; font-size: 1.22rem; }
.ganho p { color: var(--nevoa); font-size: .98rem; line-height: 1.65; }
.ganho .ganho__virada {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  color: var(--vivido);
  font: 700 .98rem/1.4 'Sora', sans-serif;
}
.ganho p:not(.ganho__virada) { margin-bottom: 18px; }
.centro > .leva__fecho { margin-top: var(--gap-bloco); color: var(--nevoa-2); }

/* ---- 4 visão do futuro no claro: "Hoje" em branco, "Com método" no escuro ---- */
.secao--clara td.futuro__hoje { background: #fff; color: var(--nevoa); }
.secao--clara td.futuro__depois {
  background: linear-gradient(160deg, #0E1630, #0B0F19);
  color: #F5F9FF;
  border-top: 1px solid rgba(127, 214, 255, .25);
}
.secao--clara td.futuro__depois::before { color: var(--ciano); }
.secao--clara .futuro__tabela tr { box-shadow: 0 18px 40px -30px rgba(11, 15, 25, .4); }

/* ---- 6 aulas no claro ---- */
.secao--clara .aula { box-shadow: 0 22px 50px -34px rgba(11, 15, 25, .38); }
.secao--clara .aula__texto li::before { border-color: var(--vivido); }

@media (min-width: 760px) {
  .ganhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ganho { padding: 34px 28px 28px; }

  .secao--clara .futuro__tabela tr { box-shadow: none; }
  .secao--clara .futuro__hoje { border-color: var(--linha); background: #fff; color: var(--nevoa); }
  .secao--clara th.futuro__hoje { color: var(--tinta); }
  .secao--clara .futuro__depois {
    border-color: #0B0F19;
    background: #0E1426;
    color: #F5F9FF;
  }
  .secao--clara th.futuro__depois { color: var(--ciano); background: linear-gradient(180deg, #13204A, #0E1426); }
  .secao--clara .futuro__tabela td.futuro__hoje { border-top-color: rgba(11, 15, 25, .07) !important; }
  .secao--clara .futuro__tabela td.futuro__depois { border-top-color: rgba(255, 255, 255, .07) !important; }
  .secao--clara .futuro__tabela tbody tr:last-child td.futuro__hoje { border-bottom-color: var(--linha); }
  .secao--clara .futuro__tabela tbody tr:last-child td.futuro__depois { border-bottom-color: #0B0F19; }
  .secao--clara .futuro__tabela tbody tr:last-child td.futuro__hoje { box-shadow: 0 30px 50px -40px rgba(11, 15, 25, .5); }
  .secao--clara .futuro__tabela tbody tr:last-child td.futuro__depois { box-shadow: 0 34px 60px -34px rgba(0, 39, 212, .7); }
}

/* ======================================================================
   Movimento reduzido: nada se move sozinho
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}

@media print {
  .topo, .barra, .modal, .btn { display: none !important; }
  .ordem__trilho { height: auto !important; }
  .ordem__palco { position: static !important; height: auto !important; }
}

/* --------------------------------------------------------------- aviso "em breve" (22/10/2026)
   Faixa acima do topo enquanto as aulas ainda estão sendo gravadas. */
.aviso-breve {
  background: linear-gradient(120deg, var(--eletrico), var(--vivido));
  color: #fff;
  text-align: center;
  padding: 10px var(--respiro);
  font: 600 .88rem/1.4 'Inter', sans-serif;
}
.aviso-breve strong {
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 6px;
}
.aviso-breve a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }