/* ==========================================================================
   ESTILO DA PÁGINA
   Você quase nunca precisa mexer aqui. As cores e as fontes vêm do
   Manual de Marca (extensão cursos). Para trocar uma cor em todo o site,
   mude só o valor nas quatro linhas abaixo.
   ========================================================================== */

:root {
  --preto: #000000;
  --grafite: #191919;
  --branco: #ffffff;
  --ambar: #f3ab5f;

  --texto: rgba(255, 255, 255, 0.84);
  --suave: rgba(255, 255, 255, 0.6);
  --linha: rgba(255, 255, 255, 0.16);

  --titulo: "League Gothic", "Oswald", "Arial Narrow", Impact, sans-serif;
  --corpo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --largura: 70rem;
  --leitura: 40rem;
  --margem: clamp(1.25rem, 5vw, 3rem);
  --respiro: clamp(4rem, 11vw, 7.5rem);
}

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

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

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--corpo);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

strong,
b {
  font-weight: 500;
  color: var(--branco);
}

p {
  margin: 0 0 1.15em;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
}

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

/* ---------- Títulos ---------- */

h1,
h2,
.numero-grande {
  font-family: var(--titulo);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--branco);
  letter-spacing: 0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.1rem, 13.5vw, 7rem);
  line-height: 0.92;
}

h2 {
  font-size: clamp(2.5rem, 8.5vw, 4.25rem);
  line-height: 0.96;
  margin-bottom: 0.55em;
}

h3 {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--branco);
  margin: 0 0 0.4em;
}

/* ---------- Estrutura ---------- */

.miolo {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.leitura {
  max-width: var(--leitura);
}

.bloco {
  padding-block: var(--respiro);
}

.bloco--grafite {
  background: var(--grafite);
}

.destaque-texto {
  font-size: clamp(1.2rem, 3.6vw, 1.5rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--branco);
}

/* ---------- Topo ---------- */

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.marca {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--branco);
  text-decoration: none;
}

.marca span {
  font-weight: 300;
  color: var(--suave);
}

/* Logotipo oficial: símbolo no topo, versão principal no rodapé */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.marca-simbolo {
  width: auto;
  height: 1.75rem;
  flex: none;
}

.marca span {
  margin-left: -0.3rem;
}

.rodape-logo {
  width: 8.5rem;
  height: auto;
  margin-bottom: 1.5rem;
}

.link-topo {
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ambar);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.topo {
  padding-block: clamp(1.5rem, 5vw, 3.5rem) var(--respiro);
}

.topo-grade {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
}

.topo-texto {
  display: grid;
  gap: 1.75rem;
}

.topo-sub {
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  line-height: 1.6;
  max-width: 34rem;
  margin: 0;
}

/* A sequência da peça: decalque, finalizada, cicatrizada */

.sequencia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 0 calc(var(--margem) * -1);
}

.sequencia figure,
.par figure,
.galeria figure,
.foto {
  margin: 0;
  position: relative;
}

.sequencia img {
  width: 100%;
  aspect-ratio: 3 / 5;
  object-fit: cover;
  background: var(--grafite);
}

.sequencia figcaption {
  padding: 0.7rem 0.6rem 0 var(--margem);
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--branco);
}

.sequencia figure + figure figcaption {
  padding-left: 0.6rem;
}

.sequencia time,
.par time {
  display: block;
  font-weight: 300;
  color: var(--ambar);
}

.sequencia-nota {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  color: var(--suave);
}

.chamada {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.chamada-nota {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--suave);
  max-width: 26rem;
}

.chamada-nota strong {
  font-weight: 500;
}

/* ---------- Botão ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.9rem 2.2rem;
  background: var(--ambar);
  color: var(--preto);
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.botao:hover {
  background: #ffc078;
}

.botao--largo {
  width: 100%;
  max-width: 24rem;
}

/* ---------- Credenciais ---------- */

.credenciais {
  border-block: 1px solid var(--linha);
}

.credenciais ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.credenciais li {
  padding: 1.15rem 1rem 1.15rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--linha);
}

.credenciais li:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--linha);
}

.credenciais li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.credenciais strong {
  display: block;
}

/* ---------- Para quem é ---------- */

.para-quem {
  display: grid;
  gap: 2.5rem;
}

.para-quem > div {
  border-top: 2px solid var(--ambar);
  padding-top: 1.25rem;
}

.para-quem > div + div {
  border-top-color: var(--linha);
}

.para-quem p {
  margin: 0;
}

/* ---------- Listas numeradas (causas e princípios) ---------- */

.numerada {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: item;
  display: grid;
  gap: 2.25rem;
}

.numerada li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 0.75rem;
  align-items: start;
  max-width: 44rem;
}

.numerada li::before {
  content: counter(item);
  font-family: var(--titulo);
  font-size: 4.25rem;
  line-height: 0.82;
  color: var(--ambar);
}

.numerada p {
  margin: 0;
}

.apos-lista {
  margin: 2.5rem 0 0;
}

/* ---------- Vídeos (quando forem ligados) ---------- */

.video-curto {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin-top: 2rem;
  background: var(--preto);
}

.video-moldura {
  position: relative;
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  max-width: 56rem;
  background: var(--preto);
}

.video-moldura iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Prova ---------- */

.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 2rem calc(var(--margem) * -1) 2.25rem;
}

.par img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--grafite);
}

.par figcaption {
  padding: 0.8rem 0.6rem 0 var(--margem);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--branco);
}

.par figure + figure figcaption {
  padding-left: 0.6rem;
}

.ampliar {
  display: block;
  cursor: zoom-in;
}

/* ---------- O que você aprende sobre a sombra ---------- */

.pontos {
  margin: 2.5rem 0 0;
  display: grid;
  gap: 2rem 3rem;
}

.pontos div {
  border-top: 1px solid var(--linha);
  padding-top: 1.25rem;
}

.pontos dt {
  font-family: var(--titulo);
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.012em;
  color: var(--branco);
  margin-bottom: 0.5rem;
}

.pontos dd {
  margin: 0;
}

.foto-larga {
  margin: 2.75rem 0 0;
  position: relative;
}

.foto-larga img {
  width: 100%;
  max-width: 46rem;
  object-fit: cover;
  background: var(--grafite);
}

/* ---------- Como é o curso por dentro ---------- */

.barra-aulas {
  display: flex;
  gap: 3px;
  margin: 2.25rem 0 0.75rem;
  height: 0.9rem;
}

.barra-aulas span {
  background: var(--ambar);
}

.barra-aulas span:nth-child(1) { flex: 5; opacity: 0.4; }
.barra-aulas span:nth-child(2) { flex: 8; opacity: 0.6; }
.barra-aulas span:nth-child(3) { flex: 21; }
.barra-aulas span:nth-child(4) { flex: 3; opacity: 0.75; }

.barra-legenda {
  margin: 0 0 2.5rem;
  font-size: 0.875rem;
  color: var(--suave);
}

.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
}

.etapas li {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linha);
}

.etapas .aulas {
  font-size: 0.875rem;
  color: var(--ambar);
}

.etapas p {
  margin: 0;
  font-size: 0.9688rem;
}

.galeria {
  display: grid;
  gap: 3px;
  margin: 2.75rem calc(var(--margem) * -1) 0;
}

.galeria img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: var(--grafite);
}

.galeria figcaption,
.foto-larga figcaption,
.foto figcaption {
  padding: 0.6rem var(--margem) 0;
  font-size: 0.8125rem;
  color: var(--suave);
}

.foto-larga figcaption,
.foto figcaption {
  padding-inline: 0;
}

.ficha {
  margin: 3.5rem 0 0;
  border-top: 1px solid var(--linha);
}

.ficha div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9375rem;
}

.ficha dt {
  color: var(--suave);
}

.ficha dd {
  margin: 0;
  color: var(--branco);
  font-weight: 400;
}

/* ---------- Tudo que você recebe e preço ---------- */

.oferta {
  display: grid;
  gap: 3rem;
}

.incluido {
  list-style: none;
  margin: 0;
  padding: 0;
}

.incluido li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.75rem;
  border-bottom: 1px solid var(--linha);
}

.incluido li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.65rem;
  width: 0.85rem;
  height: 2px;
  background: var(--ambar);
}

.vagas {
  margin: 2rem 0 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--ambar);
  color: var(--branco);
  font-weight: 400;
}

.vagas p {
  margin: 0;
}

.vagas p + p {
  margin-top: 0.5rem;
}

.vagas strong {
  font-weight: 500;
}

.preco {
  border-top: 2px solid var(--ambar);
  padding-top: 1.5rem;
}

.preco .numero-grande {
  font-size: clamp(5.5rem, 26vw, 9.5rem);
  line-height: 0.85;
  margin: 0 0 0.75rem;
}

.preco .numero-grande small {
  font-size: 0.34em;
  vertical-align: 0.95em;
  margin-right: 0.12em;
  color: var(--suave);
}

.preco .forma {
  font-size: 1.125rem;
  color: var(--branco);
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.preco .garantia {
  margin: 1.5rem 0 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
}

/* ---------- Quem ensina ---------- */

.professor {
  display: grid;
  gap: 2.5rem;
}

.professor .foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--preto);
}

.trajetoria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 2rem 0 0;
}

.trajetoria figure {
  margin: 0;
  position: relative;
}

.trajetoria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.trajetoria figcaption {
  padding-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--suave);
}

.dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 3px 0 0;
}

.dupla figure {
  margin: 0;
}

.dupla img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dupla figcaption {
  padding-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--suave);
}

/* ---------- Galeria de trabalhos ---------- */

.trabalhos {
  columns: 2;
  column-gap: 3px;
  margin: 2.75rem calc(var(--margem) * -1) 0;
}

.trabalhos figure {
  margin: 0 0 3px;
  break-inside: avoid;
}

.trabalhos img {
  width: 100%;
  background: var(--grafite);
}

@media (min-width: 60rem) {
  .trabalhos {
    columns: 3;
    column-gap: 6px;
    margin-inline: 0;
  }

  .trabalhos figure {
    margin-bottom: 6px;
  }
}

/* ---------- Depoimentos ---------- */

.depoimentos {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.depoimentos blockquote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ambar);
  color: var(--branco);
  font-weight: 400;
}

.depoimentos cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--suave);
}

/* ---------- Perguntas frequentes ---------- */

.perguntas {
  margin-top: 2rem;
  border-top: 1px solid var(--linha);
  max-width: 46rem;
}

.perguntas details {
  border-bottom: 1px solid var(--linha);
}

.perguntas summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.2rem 0;
  font-weight: 500;
  color: var(--branco);
  line-height: 1.4;
}

.perguntas summary::-webkit-details-marker {
  display: none;
}

.perguntas summary::after {
  content: "+";
  font-family: var(--titulo);
  font-size: 2rem;
  line-height: 0.75;
  color: var(--ambar);
  transition: transform 0.2s ease;
}

.perguntas details[open] summary::after {
  transform: rotate(45deg);
}

.perguntas details > p {
  margin: 0;
  padding: 0 2.5rem 1.4rem 0;
}

/* ---------- Fecho ---------- */

.fecho p {
  margin-bottom: 2rem;
}

/* ---------- Rodapé ---------- */

.rodape {
  border-top: 1px solid var(--linha);
  padding-block: 2.5rem 7rem;
  font-size: 0.875rem;
  color: var(--suave);
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1.25rem 0;
}

.rodape a,
.rodape button {
  color: var(--texto);
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape p {
  margin: 0;
}

/* ---------- Barra fixa de compra (aparece depois de rolar) ---------- */

.barra-fixa {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--margem);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--preto);
  border-top: 1px solid var(--linha);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.barra-fixa.visivel {
  transform: none;
}

.barra-fixa p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--suave);
}

.barra-fixa p strong {
  display: block;
  font-family: var(--titulo);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.012em;
}

.barra-fixa .botao {
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
}

/* ---------- Aviso de cookies ---------- */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  background: var(--grafite);
  border-top: 1px solid var(--ambar);
  padding: 1.1rem var(--margem);
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
}

.cookies[hidden] {
  display: none;
}

.cookies p {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 46rem;
}

.cookies div {
  display: flex;
  gap: 0.75rem;
}

.cookies button {
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.4rem;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--branco);
  background: transparent;
  color: var(--branco);
}

.cookies button[data-cookies="sim"] {
  background: var(--branco);
  color: var(--preto);
}

/* ---------- Foto ampliada ---------- */

.ampliada {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
}

.ampliada::backdrop {
  background: rgba(0, 0, 0, 0.94);
}

.ampliada img {
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}

.ampliada button {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--preto);
  color: var(--branco);
  font-size: 1.25rem;
  cursor: pointer;
}

/* ---------- Marcador de foto que ainda falta (some quando o atributo é apagado) ---------- */

[data-pendente]::after {
  content: "Foto pendente: " attr(data-pendente);
  position: absolute;
  inset: 0 0 auto 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--preto);
  background: var(--ambar);
}

/* ---------- Página de privacidade ---------- */

.documento h1 {
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  margin-bottom: 0.5em;
}

.documento h2 {
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  margin-top: 1.6em;
}

.documento ul {
  padding-left: 1.2rem;
}

.preencher {
  background: var(--ambar);
  color: var(--preto);
  font-weight: 500;
  padding: 0 0.3em;
}

/* ==========================================================================
   Telas maiores
   ========================================================================== */

@media (min-width: 40rem) {
  .credenciais ul {
    grid-template-columns: repeat(4, 1fr);
  }

  .credenciais li,
  .credenciais li:nth-child(even) {
    padding: 1.4rem 1.25rem;
    border-bottom: 0;
    border-left: 1px solid var(--linha);
  }

  .credenciais li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .para-quem {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

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

  .etapas li {
    grid-template-columns: 15rem 1fr;
  }

  .galeria {
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 0;
  }

  .galeria figcaption {
    padding-inline: 0;
  }

  .par,
  .sequencia {
    margin-inline: 0;
  }

  .par figcaption,
  .sequencia figcaption {
    padding-left: 0;
  }

  .par figure + figure figcaption,
  .sequencia figure + figure figcaption {
    padding-left: 0;
  }

  .par {
    max-width: 52rem;
  }
}

@media (min-width: 60rem) {
  body {
    font-size: 1.125rem;
  }

  .topo-grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "titulo fotos"
      "texto  fotos";
    column-gap: 4rem;
    align-items: start;
  }

  .topo-grade h1 {
    grid-area: titulo;
    font-size: clamp(3.75rem, 5vw, 4.5rem);
  }

  .topo-texto {
    grid-area: texto;
    gap: 2.25rem;
  }

  .topo-fotos {
    grid-area: fotos;
  }

  .oferta {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 5rem;
    align-items: start;
  }

  .preco {
    position: sticky;
    top: 2rem;
  }

  .professor {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 4.5rem;
    align-items: start;
  }

  .depoimentos {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
  }

  .barra-fixa {
    justify-content: center;
    gap: 2rem;
  }

  .rodape {
    padding-bottom: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}