/* ============================================================
   Site Robson Santos (TEAMRS)
   Paleta extraida do logo real (assets/img/logo.png):
   amarelo #FFCC05, preto #1E1C20, cinza #888B89
   Mobile first. Breakpoints: 640, 900, 1200
   Regra do cliente: texto nunca sobre a foto do Robson.
   Fotos ficam em bloco próprio.
   ============================================================ */

/* Fontes self-hosted (woff2 variavel, subset latin), sem Google Fonts
   em runtime. Um arquivo por familia cobre toda a faixa de pesos. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
}

:root {
  --amarelo: #FFCC05;
  --preto: #1E1C20;
  --cinza: #888B89;
  --fundo-claro: #FAF6EC;
  --cinza-texto: #5C5952;
  --fonte-titulo: "Bricolage Grotesque", sans-serif;
  --fonte-texto: "Instrument Sans", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-texto);
  background: var(--fundo-claro);
  color: var(--preto);
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* So existem os pesos 600 e 800 da Bricolage e 400, 500 e 600
   da Instrument. Nada pede 700 para nao cair em sintese do navegador. */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.2rem; }

b, strong { font-weight: 600; }

p { margin: 0; max-width: 62ch; }

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

ul, ol { list-style: none; }

a { color: inherit; }

[id] { scroll-margin-top: 5rem; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Placeholder de pendencia ---------- */

.pendente {
  display: inline-block;
  background: var(--amarelo);
  color: var(--preto);
  border: 1px dashed var(--preto);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 220px;
  border-radius: 12px;
  padding: 1rem;
}

.foto-robson {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ---------- Botoes (alvo de toque minimo de 48px) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.88; }

.btn-destaque {
  background: var(--amarelo);
  color: var(--preto);
}

.btn-contorno {
  background: transparent;
  color: var(--preto);
  border-color: var(--preto);
}

.secao-escura .btn-contorno,
.hero-escuro .btn-contorno,
.pagina-obrigado .btn-contorno,
.plano-destacado .btn-contorno {
  color: var(--fundo-claro);
  border-color: var(--fundo-claro);
}

.btn-bloco {
  width: 100%;
}

/* Foco em amarelo; o anel preto de 1px garante visibilidade no fundo claro */
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--preto);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Header ---------- */

/* No celular o header e enxuto (ate 64px) e nao fica fixo.
   A partir de 900px volta a ser sticky, com logo 44px e nome visivel. */

.topo {
  background: var(--fundo-claro);
  box-shadow: 0 1px 0 rgba(30, 28, 32, 0.12);
  position: static;
  z-index: 50;
}

.topo-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  max-height: 64px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-height: 48px;
}

.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}

.marca-sub {
  display: inline;
  margin-left: 0.5rem;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cinza-texto);
}

.marca img {
  width: 36px;
  height: 36px;
}

/* Nome da marca so para leitores de tela no celular */
@media (max-width: 899.98px) {
  .marca-nome {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
}

.menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.6rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.menu .btn {
  min-height: 48px;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
}

/* No celular o header mostra so a marca e o botao de acao.
   Links de ancora aparecem a partir de 900px. */
@media (max-width: 899.98px) {
  .menu a[href^="#"]:not(.btn),
  .pagina-consultoria .menu a:not(.btn) {
    display: none;
  }
}

/* ---------- Secoes ---------- */

.secao {
  padding: 3.5rem 0;
}

.secao-escura {
  background: var(--preto);
  color: var(--fundo-claro);
}

.kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--preto);
  margin-bottom: 0.75rem;
}

.secao-escura .kicker,
.hero-escuro .kicker,
.porta-consultoria .kicker,
.plano-destacado .kicker,
.bloco-metodo-destacado .bloco-rotulo {
  color: var(--amarelo);
}

.titulo-secao {
  margin-bottom: 1rem;
  max-width: 24ch;
}

.texto-apoio {
  margin-top: 0.75rem;
}

.nota {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

.secao-escura .nota,
.hero-escuro .nota,
.secao-aplicacao .nota,
.pagina-obrigado .nota {
  color: rgba(250, 246, 236, 0.75);
}

/* ---------- Heros ---------- */

.hero h1,
.hero-escuro h1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  max-width: 14em;
}

.hero .btn {
  margin-top: 1.5rem;
}

/* Palavra chave em amarelo, usada apenas sobre fundo preto */
.destaque-amarelo {
  color: var(--amarelo);
}

/* Marcacao amarela com texto preto, usada no hero claro */
.marcado {
  background: var(--amarelo);
  color: var(--preto);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Hero escuro (Home e mentoria): foto como fundo com overlay no
   celular; a partir de 900px a foto sangra na lateral direita. */

/* Hero escuro (Home e mentoria): fundo preto liso, texto em bloco
   proprio e a foto em bloco separado, nunca atras do texto.
   No celular a foto entra inteira abaixo do texto; a partir de 900px
   vira grade de duas colunas com folga minima de 48px entre elas. */

.hero-escuro {
  background: var(--preto);
  color: var(--fundo-claro);
  padding: 3.5rem 0 2.5rem;
}

.hero-dividido {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-escuro .hero-foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
}

/* No celular, o hero da mentoria usa o corte 4 por 3 ja aprovado */
@media (max-width: 899.98px) {
  .pagina-mentoria .hero-escuro .hero-foto {
    aspect-ratio: 4 / 3;
  }
}

/* Hero claro (consultoria): foto acima do titulo no celular */

.hero-claro {
  padding: 1.5rem 0 3rem;
}

/* No celular o texto e o botao vem antes da foto,
   para o CTA caber na primeira tela */
.hero-claro .hero-grade {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-claro .foto-robson {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
}

/* Grade generica de texto e midia */

.hero-grade {
  display: grid;
  gap: 2rem;
}

/* ---------- Chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- Numeros ---------- */

.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 2.25rem;
}

.numero strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.05;
}

.numero span {
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

.numeros-nota {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

.hero-escuro .numeros-nota,
.faixa-numeros .numeros-nota {
  color: rgba(250, 246, 236, 0.8);
}

.faixa-numeros .numeros-nota {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.hero-escuro .numero strong {
  color: var(--amarelo);
}

.hero-escuro .numero span {
  color: rgba(250, 246, 236, 0.8);
}

/* Faixa preta fina com numeros em amarelo (consultoria) */

.faixa-numeros {
  background: var(--preto);
  color: var(--fundo-claro);
  padding: 1rem 0;
}

.faixa-numeros .numeros {
  margin-top: 0;
  align-items: baseline;
  gap: 1rem 2.5rem;
}

.faixa-numeros .numero {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.faixa-numeros .numero strong {
  font-size: 1.5rem;
  color: var(--amarelo);
}

.faixa-numeros .numero span {
  color: rgba(250, 246, 236, 0.8);
}

/* ---------- Duas portas (Home) ---------- */

.portas {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.porta {
  border-radius: 12px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.porta h2 { max-width: 16ch; }

.porta .btn { margin-top: 1rem; }

/* A foto do card da consultoria e uma faixa 16 por 9 no topo,
   com o texto abaixo sobre preto liso, nunca por cima da foto */
.porta-consultoria {
  background: var(--preto);
  color: var(--fundo-claro);
}

.porta-foto {
  width: calc(100% + 3.5rem);
  max-width: calc(100% + 3.5rem);
  height: auto;
  margin: -2rem -1.75rem 0.75rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* o topo da foto original e fundo vazio; 15 por cento centraliza o rosto */
  object-position: 50% 15%;
  border-radius: 12px 12px 0 0;
}

.porta-mentoria {
  border: 2px solid var(--preto);
}

/* ---------- Depoimentos: carrossel no celular, colunas no desktop ---------- */

.carrossel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0 1rem;
  margin-top: 1.75rem;
  -webkit-overflow-scrolling: touch;
}

.carrossel > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.carrossel img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.carrossel img:nth-child(odd) { transform: rotate(0.6deg); }
.carrossel img:nth-child(even) { transform: rotate(-0.6deg); }

/* ---------- Frases das alunas (consultoria) ---------- */

.frases {
  margin-top: 1.75rem;
  border-bottom: 1px solid rgba(30, 28, 32, 0.15);
}

.frases li {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding: 1rem 0;
  border-top: 1px solid rgba(30, 28, 32, 0.15);
  max-width: 62ch;
}

.aspa {
  color: var(--amarelo);
}

.frases-fecho {
  margin-top: 1.75rem;
  font-size: 1.15rem;
}

.frases-cta {
  margin-top: 0.75rem;
  font-weight: 600;
}

.frases-cta a {
  text-underline-offset: 0.2em;
}

/* ---------- Etapas e listas numeradas ---------- */

/* O numero grande amarelo e decorativo: vem de um pseudo-elemento
   com contador CSS, fora da arvore de acessibilidade */
.etapas-lista {
  margin-top: 1.75rem;
  border-bottom: 1px solid rgba(30, 28, 32, 0.15);
  counter-reset: etapa;
}

.etapas-lista li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(30, 28, 32, 0.15);
  counter-increment: etapa;
}

.etapas-lista li::before {
  content: counter(etapa, decimal-leading-zero);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem);
  line-height: 1;
  color: var(--amarelo);
}

/* Texto alternativo vazio: leitores de tela nao anunciam o numero
   decorativo, que duplicaria a numeracao do proprio ol */
@supports (content: "a" / "b") {
  .etapas-lista li::before {
    content: counter(etapa, decimal-leading-zero) / "";
  }
}

.etapas-lista h3 {
  margin-bottom: 0.35rem;
}

.etapas-lista p {
  max-width: 54ch;
}

/* ---------- Listas com marcador ---------- */

.lista-itens {
  display: grid;
  gap: 0.5rem 2.5rem;
  margin-top: 1.75rem;
}

.lista-itens li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.6rem;
}

.lista-itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--amarelo);
}

.lista-itens h3 {
  margin-bottom: 0.25rem;
}

/* ---------- Formacao ---------- */

.formacao-titulo {
  margin-top: 1.25rem;
  font-size: 1rem;
}

.formacao-lista {
  margin-top: 0.5rem;
}

.formacao-lista li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.formacao-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--preto);
}

/* ---------- Listas sim e nao ---------- */

.sim-nao {
  display: grid;
  gap: 2rem;
  margin-top: 1.75rem;
}

.lista-checagem h3 {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--preto);
}

.lista-checagem li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
}

.lista-checagem li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--preto);
}

.lista-nao li::before {
  background: transparent;
  border: 2px solid rgba(30, 28, 32, 0.4);
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}

/* ---------- Planos (consultoria) ---------- */

.planos {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.plano {
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  border: 2px solid var(--preto);
}

.plano-destacado {
  background: var(--preto);
  color: var(--fundo-claro);
  border-color: var(--preto);
}

.selo {
  position: absolute;
  top: -0.9rem;
  left: 1.5rem;
  background: var(--amarelo);
  color: var(--preto);
  border-radius: 999px;
  padding: 0.2rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.plano-periodo {
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

.plano-destacado .plano-periodo {
  color: rgba(250, 246, 236, 0.75);
}

.plano-preco {
  font-family: var(--fonte-titulo);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.plano-equivalencia {
  font-size: 0.95rem;
}

.plano ul {
  margin: 0.5rem 0;
}

.plano li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.plano li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--preto);
}

.plano-destacado li::before {
  background: var(--amarelo);
}

.plano .btn { margin-top: auto; }

/* ---------- Formatos da mentoria ---------- */

.formatos {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.formato {
  background: #FFFFFF;
  border: 1px solid rgba(30, 28, 32, 0.15);
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}

.formato-recomendado {
  border: 2px solid var(--amarelo);
}

.formato-frequencia {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cinza-texto);
}

.formato-preco {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 600;
}

.formato .btn { margin-top: auto; }

/* ---------- Blocos do metodo (mentoria) ---------- */

.blocos-metodo {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.bloco-metodo {
  background: #FFFFFF;
  border: 1px solid rgba(30, 28, 32, 0.15);
  border-radius: 12px;
  padding: 1.75rem;
}

.bloco-metodo-destacado {
  background: var(--preto);
  color: var(--fundo-claro);
  border-color: var(--preto);
}

.bloco-rotulo {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--preto);
}

.bloco-metodo h3 {
  margin-bottom: 0.5rem;
}

.frentes {
  margin-top: 1rem;
}

.frentes li {
  padding: 0.4rem 0;
  border-top: 1px solid rgba(30, 28, 32, 0.12);
  font-size: 0.95rem;
}

.bloco-metodo-destacado .frentes li {
  border-top-color: rgba(250, 246, 236, 0.25);
}

.frentes .num-frente {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  margin-right: 0.5rem;
}

/* ---------- Encontros (mentoria) ---------- */

.encontros {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.encontro {
  border-top: 2px solid var(--preto);
  padding-top: 1rem;
}

.encontro h3 {
  margin-bottom: 0.35rem;
}

/* ---------- Linha das 10 semanas ---------- */

.linha-semanas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.semana {
  border: 1px solid rgba(30, 28, 32, 0.25);
  border-radius: 8px;
  padding: 0.55rem 0.25rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.semana .pontos {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.semana .ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--preto);
}

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

.faq {
  margin-top: 1.75rem;
  border-bottom: 1px solid rgba(30, 28, 32, 0.15);
}

.faq details {
  border-top: 1px solid rgba(30, 28, 32, 0.15);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.9rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .resposta {
  padding: 0 0 1.1rem;
}

/* ---------- CTA final ---------- */

.cta-final {
  text-align: center;
}

.cta-final h2 {
  margin-bottom: 0.75rem;
  margin-inline: auto;
  max-width: 20ch;
}

.cta-final p {
  margin-inline: auto;
}

.cta-final .btn {
  margin-top: 1.5rem;
}

/* ---------- Formulario de aplicacao (secao preta) ---------- */

.secao-aplicacao {
  background: var(--preto);
  color: var(--fundo-claro);
}

.formulario {
  margin-top: 2rem;
  background: var(--fundo-claro);
  color: var(--preto);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: grid;
  gap: 1.4rem;
}

.campo label,
.campo > .campo-rotulo,
.campo legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.campo fieldset,
fieldset.campo {
  border: 0;
}

.campo input[type="text"],
.campo input[type="tel"],
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(30, 28, 32, 0.35);
  border-radius: 8px;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  background: #FFFFFF;
  color: var(--preto);
}

.campo textarea {
  min-height: 110px;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--amarelo);
  outline-offset: 1px;
  border-color: var(--preto);
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.opcoes label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(30, 28, 32, 0.35);
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
  background: #FFFFFF;
}

.opcoes input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--preto);
}

.opcoes label:has(input:checked) {
  border: 2px solid var(--preto);
  font-weight: 600;
}

/* Campo anti-spam: fica fora da tela, invisivel para pessoas.
   Nao usa display none para continuar "visivel" para robos de spam. */
.campo-site {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.erro-campo {
  display: none;
  color: #9B1C1C;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  font-weight: 600;
}

.campo.invalido .erro-campo { display: block; }

.campo.invalido input {
  border-color: #9B1C1C;
}

.aviso-form {
  display: none;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.aviso-form.visivel { display: block; }

.aviso-form.alerta {
  background: var(--amarelo);
  color: var(--preto);
  border: 1px dashed var(--preto);
}

.aviso-form.erro {
  background: #FBDCDC;
  color: #9B1C1C;
}

.nota-consentimento {
  font-size: 0.9rem;
  color: var(--cinza-texto);
}

.nota-consentimento a {
  text-underline-offset: 0.2em;
}

/* ---------- Pagina de privacidade ---------- */

.texto-legal h1 {
  margin-bottom: 1rem;
}

.texto-legal h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.25rem;
}

.texto-legal p {
  margin-top: 0.75rem;
}

.texto-legal a {
  text-underline-offset: 0.2em;
}

/* ---------- Cadastro rapido da consultoria (dialog) ---------- */

.dialogo-lead {
  border: 0;
  border-radius: 12px;
  background: var(--fundo-claro);
  color: var(--preto);
  padding: 1.5rem 1.25rem;
  width: min(92vw, 420px);
  margin: auto;
}

.dialogo-lead::backdrop {
  background: rgba(22, 20, 24, 0.6);
}

.dialogo-lead form {
  display: grid;
  gap: 1rem;
}

.dialogo-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.dialogo-topo h2 {
  font-size: 1.35rem;
}

.dialogo-fechar {
  background: transparent;
  border: 0;
  border-radius: 999px;
  min-width: 48px;
  min-height: 48px;
  margin: -0.5rem -0.5rem 0 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--preto);
  cursor: pointer;
}

/* ---------- Aviso flutuante (links nao configurados) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  background: var(--preto);
  color: var(--fundo-claro);
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: calc(100% - 2.5rem);
  text-align: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.toast.visivel {
  opacity: 1;
}

/* ---------- Footer ---------- */

.rodape {
  background: var(--preto);
  color: var(--fundo-claro);
  padding: 2.5rem 0;
}

.rodape-conteudo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-size: 0.95rem;
}

/* ---------- CTA fixo no mobile ---------- */

.cta-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--fundo-claro);
  border-top: 1px solid rgba(30, 28, 32, 0.15);
}

.cta-fixa .btn {
  width: 100%;
}

body.tem-cta-fixa {
  padding-bottom: 4.6rem;
}

/* ---------- Pagina obrigado ---------- */

.pagina-obrigado {
  background: var(--preto);
  color: var(--fundo-claro);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.obrigado-conteudo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 0;
}

.obrigado-caixa {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.obrigado-caixa p {
  margin-inline: auto;
}

.icone-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--amarelo);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icone-check svg {
  width: 36px;
  height: 36px;
  stroke: var(--amarelo);
}

.obrigado-botoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
}

/* ============================================================
   Telas a partir de 640px
   ============================================================ */

@media (min-width: 640px) {
  .secao { padding: 4.5rem 0; }

  .sim-nao { grid-template-columns: 1fr 1fr; }
  .encontros { grid-template-columns: 1fr 1fr; }
  .lista-itens { grid-template-columns: 1fr 1fr; }
  .linha-semanas { grid-template-columns: repeat(10, 1fr); }

  .obrigado-botoes {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
   Telas a partir de 900px
   ============================================================ */

@media (min-width: 900px) {
  .secao { padding: 6rem 0; }

  .cta-fixa { display: none; }
  body.tem-cta-fixa { padding-bottom: 0; }

  .topo {
    position: sticky;
    top: 0;
  }

  .marca img {
    width: 44px;
    height: 44px;
  }

  /* Hero escuro: texto a esquerda, foto em coluna propria a direita,
     sem sobreposicao em nenhuma largura */
  .hero-escuro {
    padding: 5rem 0;
  }

  .hero-dividido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    column-gap: 3rem;
    align-items: center;
  }

  .hero-escuro .hero-foto {
    max-height: 620px;
  }

  /* Hero claro: grade 6 por 6 */
  .hero-claro { padding: 4rem 0 4.5rem; }

  .hero-claro .hero-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }

  .hero-claro .foto-robson {
    aspect-ratio: 4 / 5;
    max-height: 640px;
  }

  .hero-grade {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 3rem;
  }

  /* Portas: consultoria com 7 colunas, mentoria com 5 */
  .portas {
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
  }

  .porta-consultoria { grid-column: span 7; }
  .porta-mentoria { grid-column: span 5; justify-content: center; }

  /* Fotos de apoio nas secoes de texto: corta para 4 por 5 e limita a altura */
  .hero-grade > .foto-robson {
    aspect-ratio: 4 / 5;
    max-height: 620px;
    object-fit: cover;
    object-position: 50% 15%;
  }

  /* Depoimentos em colunas tipo masonry */
  .carrossel {
    display: block;
    columns: 2;
    column-gap: 1.5rem;
    overflow: visible;
    padding: 0.5rem 0 0;
  }

  .carrossel > * {
    break-inside: avoid;
    margin-bottom: 1.5rem;
  }

  .planos { grid-template-columns: 1fr 1fr; }
  .formatos { grid-template-columns: repeat(3, 1fr); }
  .blocos-metodo { grid-template-columns: repeat(3, 1fr); }
  .lista-itens { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Telas a partir de 1200px
   ============================================================ */

@media (min-width: 1200px) {
  .carrossel { columns: 3; }

  .formulario {
    padding: 2.5rem;
    max-width: 760px;
  }
}