/* ===========================================================================
   SaviThie Capital — estilos dos componentes proprios.
   base.css carrega o sistema existente (nao editar a mao: e gerado).
   Este arquivo e onde mora tudo que escrevemos.
   =========================================================================== */

:root {
  /* Paleta institucional */
  --navy: #020920;         /* Azul Marinho */
  --off-white: #f5f3ee;    /* Off-White */
  --champagne: #bba06a;    /* Champagne Fosco */
  --grafite: #2b2e35;      /* Grafite */
  --cinza-pedra: #d9d3c7;  /* Cinza Pedra */

  --fonte-institucional: Cinzel, "Cormorant Garamond", Georgia, serif;

  /* Champagne para uso sobre fundo claro.
     O champagne da marca rende 2,27:1 sobre off-white, abaixo do minimo
     legivel (4,5:1). Este tom fechado mantem a familia e chega a 5,00:1.
     Sobre navy o champagne original vai a 7,86:1 e continua sendo usado. */
  --champagne-escuro: #7d6538;

  /* O cinza de apoio herdado rendia 4,41:1 sobre off-white, logo abaixo do
     minimo. Fechado o suficiente para passar sem virar preto. */
  --text-muted: #5f6269;
}

/* O cabecalho fixo nao pode cobrir o topo da secao ao rolar por ancora. */
section { scroll-margin-top: 96px; }

/* ---------------------------------------------------------------------------
   Corpo de texto: minimo 16px no desktop e 17px no celular.
   O sistema herdado usava 14px (.text-sm) para prosa, pequeno demais para
   leitura corrida. Rotulos em caixa alta com entreletra (eyebrow, numeros,
   credenciais) seguem menores de proposito: sao etiquetas, nao leitura.
   --------------------------------------------------------------------------- */
.text-sm,
.text-base { font-size: 1rem; }

.text-sm { line-height: 1.8; }

/* ---------------------------------------------------------------------------
   Bloco de numeros
   O texto e mais longo que o "+R$ 200M" anterior, entao a variante reduz o
   corpo e empilha no celular em vez de espremer tres colunas.
   --------------------------------------------------------------------------- */
.numeros-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* respiro maior entre os tres numeros, sobretudo empilhados */
  gap: 3rem 2rem;
}

.stat-number--texto {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  text-wrap: balance;
}

.credenciais {
  margin-top: 4rem;
  font-family: var(--fonte-institucional);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-align: center;
  color: var(--champagne);
  opacity: .85;
}

@media (max-width: 640px) {
  .numeros-grid { grid-template-columns: 1fr; gap: 3.75rem; }
  .credenciais { margin-top: 3.25rem; font-size: .72rem; letter-spacing: .14em; }
}

/* ---------------------------------------------------------------------------
   Esteira de instituicoes
   Monocromatica, movimento lento, fade nas bordas para o navy.
   Os nomes sao tipografia, nao logo: ainda nao ha autorizacao de uso de marca.
   --------------------------------------------------------------------------- */
.esteira-secao {
  background: var(--navy);
  padding: 3.5rem 0 3rem;
  overflow: hidden;
}

.esteira-rotulo {
  font-family: var(--fonte-institucional);
  font-size: .62rem;
  letter-spacing: .3em;
  text-align: center;
  color: var(--champagne);
  /* .5 rendia 2,7:1; abaixo do minimo mesmo para rotulo */
  opacity: .85;
  margin: 0 0 2rem;
}

.esteira {
  position: relative;
  overflow: hidden;
  /* fade lateral dissolvendo no navy */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.esteira__faixa {
  display: flex;
  width: max-content;
  animation: esteira-desliza var(--esteira-duracao, 40s) linear infinite;
}

.esteira:hover .esteira__faixa,
.esteira:focus-within .esteira__faixa {
  animation-play-state: paused;
}

.esteira__item {
  flex: 0 0 auto;
  padding: 0 2.75rem;
  font-family: var(--fonte-institucional);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--champagne);
  /* nome de instituicao e conteudo, nao decoracao: .6 rendia 3,42:1 */
  opacity: .92;
}

.esteira__item img {
  display: block;
  height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: .6;
}

@keyframes esteira-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.esteira-nota {
  max-width: 46rem;
  margin: 2.25rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
  font-size: .7rem;
  line-height: 1.9;
  letter-spacing: .04em;
  color: rgba(217,211,199,0.64);
}

@media (max-width: 640px) {
  .esteira__item { padding: 0 1.6rem; font-size: .8rem; letter-spacing: .18em; }
  .esteira-nota { font-size: .65rem; }
}

/* ===========================================================================
   Formulario em duas etapas
   =========================================================================== */

/* visivel apenas para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-intro {
  margin: 0 0 2.5rem;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245, 243, 238, .6);
}

.form-etapa {
  margin: 0 0 1.5rem;
  font-family: var(--fonte-institucional);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* fieldset sem a moldura padrao do navegador */
.form-etapa-bloco {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-etapa-bloco[hidden] { display: none; }

/* fundo das opcoes do select: sem isso o menu abre branco em alguns navegadores */
.form-select option { background: var(--navy); color: var(--off-white); }

/* ---------------------------------------------------------------------------
   Grupos de escolha (canal de retorno e horario)
   --------------------------------------------------------------------------- */
.opcoes { border: 0; padding: 0; margin: .5rem 0 0; }

.opcoes__titulo {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: .75rem;
  text-align: left;
  font-size: 1rem;
  color: rgba(245, 243, 238, .75);
}

.opcoes__lista { display: flex; flex-wrap: wrap; gap: .5rem; }

.opcao {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* alvo de toque nunca abaixo de 44px */
  min-height: 48px;
  padding: .5rem 1rem;
  border: 1px solid rgba(187, 160, 106, .3);
  background: rgba(255, 255, 255, .04);
  color: rgba(245, 243, 238, .8);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}

.opcao input { accent-color: var(--champagne); width: 16px; height: 16px; cursor: pointer; }

.opcao:hover { border-color: rgba(187,160,106,0.8); }

.opcao:has(input:checked) {
  border-color: var(--champagne);
  background: rgba(187, 160, 106, .12);
  color: var(--off-white);
}

.opcao:has(input:focus-visible) { outline: 2px solid var(--champagne); outline-offset: 2px; }

.form-voltar {
  align-self: center;
  min-height: 44px;
  padding: .5rem 1rem;
  margin-top: .25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgba(245,243,238,0.58);
}

.form-voltar:hover { color: var(--champagne); }

.form-seguranca {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: 1.5rem;
  text-align: left;
}

.form-seguranca p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.7;
  color: rgba(217,211,199,0.64);
}

.form-prazo {
  margin: 2rem 0 0;
  font-size: .82rem;
  color: rgba(245,243,238,0.58);
}

.form-atalho {
  margin: .75rem 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(245, 243, 238, .6);
}

.form-atalho a {
  color: var(--champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-fecho {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(187, 160, 106, .12);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(245, 243, 238, .7);
}

@media (max-width: 640px) {
  .opcoes__lista { gap: .45rem; }
  .opcao { flex: 1 1 45%; font-size: 1.0625rem; }
}

/* ---------------------------------------------------------------------------
   Consentimento LGPD no formulario
   --------------------------------------------------------------------------- */
.consentimento {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  text-align: left;
  cursor: pointer;
  padding-top: .5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(217,211,199,0.64);
}

.consentimento input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: .15rem;
  accent-color: var(--champagne);
  cursor: pointer;
}

.consentimento a { color: var(--champagne); text-decoration: underline; text-underline-offset: 2px; }

/* armadilha anti-robo: fora da tela, invisivel para quem usa leitor de tela */
.campo-armadilha {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.form-erro {
  margin-top: .75rem;
  font-size: .75rem;
  color: #e0a5a5;
}

/* ---------------------------------------------------------------------------
   FAQ — abertura sem teto de altura.
   O base.css anima por max-height, o que exige adivinhar um numero: se a
   resposta crescer (ou a tela for estreita e o texto quebrar mais), ela fica
   cortada. Aqui a animacao passa a ser por grid-template-rows, que se ajusta
   ao conteudo real. A classe --longa deixa de ser necessaria.
   --------------------------------------------------------------------------- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  overflow: hidden;
  transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1);
}

.faq-answer > * { min-height: 0; overflow: hidden; }

.faq-answer.open,
.faq-answer--longa.open { grid-template-rows: 1fr; max-height: none; }

.link-rodape { color: rgba(217,211,199,0.64); text-decoration: underline; text-underline-offset: 2px; }
.link-rodape:hover { color: var(--champagne); }

/* ---------------------------------------------------------------------------
   WhatsApp flutuante (desktop)
   Champagne sobre navy. O verde da marca destruiria a paleta.
   --------------------------------------------------------------------------- */
.wa-flutuante {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  background: var(--champagne);
  color: var(--navy);
  border-radius: 999px;
  text-decoration: none;
  font-family: Inter, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(2, 9, 32, .45);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s;
}

.wa-flutuante:hover { background: #d2bb8c; transform: translateY(-2px); }

.wa-flutuante__texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .4s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}

.wa-flutuante:hover .wa-flutuante__texto,
.wa-flutuante:focus-visible .wa-flutuante__texto { max-width: 12rem; opacity: 1; }

/* ---------------------------------------------------------------------------
   Barra fixa do celular, com os dois caminhos
   --------------------------------------------------------------------------- */
.cta-mobile { display: none; }

@media (max-width: 767px) {
  /* no celular o flutuante cede lugar para a barra, para nao empilhar */
  .wa-flutuante { display: none; }

  .cta-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(187, 160, 106, .18);
    border-top: 1px solid rgba(187, 160, 106, .25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cta-mobile__agendar,
  .cta-mobile__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem .5rem;
    border: none;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .cta-mobile__agendar { background: rgba(2, 9, 32, .96); color: var(--champagne); }
  .cta-mobile__whatsapp { background: var(--champagne); color: var(--navy); }

  /* espaco para a barra nao cobrir o fim do rodape */
  body { padding-bottom: 4.25rem; }
}

/* ---------------------------------------------------------------------------
   Pagina de politica de privacidade
   --------------------------------------------------------------------------- */
.pagina-legal {
  background: var(--navy);
  min-height: 100vh;
  padding: 7.5rem 1.5rem 5rem;
}

.pagina-legal__conteudo { max-width: 46rem; margin: 0 auto; }

.pagina-legal h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--off-white);
  margin: 0 0 .5rem;
}

.pagina-legal__atualizacao {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(187,160,106,0.8);
  margin: 0 0 3rem;
}

.pagina-legal h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--champagne);
  margin: 2.75rem 0 .9rem;
}

.pagina-legal p,
.pagina-legal li {
  font-size: .875rem;
  line-height: 1.9;
  color: rgba(217, 211, 199, .75);
}

.pagina-legal ul { padding-left: 1.1rem; margin: .5rem 0; }
.pagina-legal li { margin-bottom: .5rem; }
.pagina-legal a { color: var(--champagne); text-decoration: underline; text-underline-offset: 2px; }

.pagina-legal__voltar {
  display: inline-block;
  margin-top: 3.5rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid rgba(187, 160, 106, .4);
  padding-bottom: .2rem;
}

/* ===========================================================================
   Leva 2 — hero, carta dos fundadores e blocos de qualificacao
   =========================================================================== */

/* Rotulo institucional em Cinzel, usado acima dos titulos de secao. */
.eyebrow-institucional {
  font-family: var(--fonte-institucional);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: .75;
  margin: 0;
}

/* Sobre fundo claro o champagne perde contraste; escurece o tom. */
.eyebrow-institucional--sobre-claro { color: var(--champagne-escuro); opacity: 1; }

/* ---------------------------------------------------------------------------
   Logo
   A arte e quadrada e de alta resolucao; num quadro de 48px o desenho fica
   pequeno demais e parece borrado. Aumentar o quadro resolve.
   --------------------------------------------------------------------------- */
.site-header { height: 76px; }
.logo-img { height: 60px; }
.logo-img--rodape { height: 92px; }

@media (max-width: 640px) {
  .site-header { height: 64px; }
  .logo-img { height: 48px; }
  .logo-img--rodape { height: 72px; }
}

/* ---------------------------------------------------------------------------
   Numeros e credenciais ficam sobre fundo claro: usam o champagne fechado.
   --------------------------------------------------------------------------- */
.stat-number { color: var(--champagne-escuro); }
.credenciais { color: var(--champagne-escuro); opacity: 1; }

/* ---------------------------------------------------------------------------
   Bloco do espelho ("Você já se pegou pensando assim?")
   O contraste ali ja era bom (9,16:1). O que atrapalhava era corpo pequeno
   em italico com o traco fino do Cormorant. Sobe tamanho e peso, mantem o
   serifado italico para nao perder a essencia.
   --------------------------------------------------------------------------- */
.espelho__fala {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.85;
  letter-spacing: .005em;
  color: #3a3428;
  text-align: left;
  margin: 0;
}

.espelho__aspas {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .35rem;
  color: var(--champagne-escuro);
  opacity: .55;
}

/* ---------------------------------------------------------------------------
   Alvos de toque: minimo 44x44.
   Links soltos dentro de frase seguem a excecao da norma (WCAG 2.5.5),
   porque aumenta-los quebraria a entrelinha do paragrafo.
   --------------------------------------------------------------------------- */
.btn-ghost,
.btn-gold {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* o CTA dos instrumentos e um botao de texto: ganha area sem ganhar peso */
.cta-texto {
  min-height: 44px;
  padding: .75rem .5rem 2px;
}

/* link solto no rodape (fora de frase) precisa de area propria */
.link-rodape {
  display: inline-block;
  min-height: 44px;
  padding-top: .9rem;
}

/* ---------------------------------------------------------------------------
   Redes sociais no rodape
   Champagne, nunca a cor de marca de cada rede.
   --------------------------------------------------------------------------- */
.rodape-social {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.25rem;
}

.rodape-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(187, 160, 106, .3);
  border-radius: 50%;
  color: var(--champagne);
  transition: border-color .3s, color .3s, background .3s;
}

.rodape-social a:hover {
  border-color: var(--champagne);
  background: rgba(187, 160, 106, .1);
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero-proposito {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.5;
  color: var(--champagne);
  /* agora antecede o botao direto: precisa de mais respiro */
  margin: 0 0 2.75rem;
}

/* Ancora concreta, abaixo do botao: nao compete com a convocacao. */
.hero-produtos {
  max-width: 38rem;
  margin: 2.5rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(187, 160, 106, .15);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 2.1;
  text-transform: uppercase;
  color: rgba(187,160,106,0.8);
}

.hero-nota {
  margin: 1.5rem 0 0;
  font-size: .75rem;
  letter-spacing: .08em;
  color: rgba(245,243,238,0.58);
}

@media (max-width: 640px) {
  .hero-produtos { font-size: .62rem; letter-spacing: .1em; margin-top: 2rem; }
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}

/* o secundario acompanha a altura do primario, sem competir com ele */
.hero-acoes .btn-ghost { padding: 1rem 2rem; font-size: .75rem; }

@media (max-width: 480px) {
  .hero-acoes { flex-direction: column; gap: .75rem; }
  .hero-acoes .btn-gold,
  .hero-acoes .btn-ghost { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Carta dos fundadores
   Coluna estreita e entrelinha generosa: e texto para ser lido, nao escaneado.
   --------------------------------------------------------------------------- */
.carta {
  max-width: 620px;
  margin: 0 auto 4.5rem;
  padding: 3rem clamp(1.5rem, 5vw, 3rem);
  background: rgba(187, 160, 106, .04);
  border: 1px solid rgba(187, 160, 106, .1);
  border-left: 2px solid rgba(187, 160, 106, .35);
}

.carta p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 2;
  color: rgba(245, 243, 238, .8);
  margin: 0 0 1.6rem;
}

.carta p:last-child { margin-bottom: 0; }

/* Destaque discreto: champagne e peso, sem caixa, sem fundo, sem italico. */
.carta__enfase {
  color: var(--champagne) !important;
  font-weight: 500;
}

.carta__realce {
  color: var(--champagne);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Carta: leitura progressiva no celular
   Os paragrafos extras existem no HTML desde o carregamento. No celular
   ficam recolhidos por CSS e abrem no toque. A animacao usa
   grid-template-rows porque ela se ajusta a altura real do texto, sem
   depender de um valor chutado de max-height.
   --------------------------------------------------------------------------- */
.carta-expandir { display: none; }

@media (max-width: 767px) {
  .carta { margin-bottom: 1.25rem; }

  .carta-extra {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: 0;
    transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1),
                opacity .3s ease,
                margin-bottom .3s ease;
  }

  .carta-extra > span { overflow: hidden; min-height: 0; }

  .carta.expandida .carta-extra {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-bottom: 1.6rem;
  }

  /* convite discreto, nunca um botao preenchido */
  .carta-expandir {
    display: block;
    min-height: 44px;
    margin: 0 auto 4rem;
    padding: .75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: .9375rem;
    letter-spacing: .02em;
    color: var(--champagne);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  /* caminho unico: depois de aberta, o convite sai de cena */
  .carta.expandida ~ .carta-expandir { display: none; }
}

.carta__assinatura {
  margin-top: 2.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(187, 160, 106, .15);
  font-style: italic;
  color: rgba(245, 243, 238, .65) !important;
}

.carta__assinatura span {
  display: inline-block;
  margin-top: .35rem;
  font-family: var(--fonte-institucional);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(187,160,106,0.8);
}

/* Reservado para o video-manifesto (hoje comentado no markup). */
.video-manifesto {
  max-width: 620px;
  margin: 0 auto 3rem;
  border: 1px solid rgba(187, 160, 106, .15);
}

.video-manifesto video { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   Instrumentos
   --------------------------------------------------------------------------- */
.instrumentos__nota {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  font-size: .875rem;
  line-height: 1.9;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Quando a gente nao e pra voce
   Moldura fina champagne, sem icone e sem cor de alerta.
   --------------------------------------------------------------------------- */
.nao-e-pra-voce {
  padding: clamp(2rem, 6vw, 3.5rem);
  border: 1px solid rgba(187, 160, 106, .25);
}

.nao-e-pra-voce__intro {
  margin: 1rem 0 2.5rem;
  font-size: .875rem;
  letter-spacing: .02em;
  color: rgba(217,211,199,0.64);
}

.nao-e-pra-voce__lista { list-style: none; margin: 0; padding: 0; }

.nao-e-pra-voce__lista li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: .9rem;
  line-height: 1.85;
  color: rgba(217, 211, 199, .75);
}

/* marcador discreto no lugar de bullet ou travessao */
.nao-e-pra-voce__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 10px;
  height: 1px;
  background: var(--champagne);
  opacity: .6;
}

.nao-e-pra-voce__fecho {
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(187, 160, 106, .15);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(245, 243, 238, .8);
}

/* ---------------------------------------------------------------------------
   O que acontece depois
   --------------------------------------------------------------------------- */
.passos { list-style: none; margin: 0; padding: 0; }

.passos__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding-bottom: 2.75rem;
}

/* linha vertical ligando as etapas, sem descer da ultima */
.passos__item::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2rem;
  bottom: 0;
  width: 1px;
  background: rgba(187, 160, 106, .22);
}

.passos__item:last-child { padding-bottom: 0; }
.passos__item:last-child::before { display: none; }

.passos__numero {
  font-family: var(--fonte-institucional);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--champagne);
  line-height: 1.4;
}

.passos__titulo {
  margin: 0 0 .5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  color: #f5f3ee;
}

.passos__texto {
  margin: 0;
  font-size: .875rem;
  line-height: 1.9;
  color: rgba(217, 211, 199, .7);
}

.passos__fecho {
  margin: 3rem 0 0;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(187,160,106,0.8);
}

@media (max-width: 480px) {
  .passos__item { grid-template-columns: 2.5rem 1fr; }
  .passos__item::before { left: .6rem; }
}

/* ---------------------------------------------------------------------------
   Pagina de confirmacao
   --------------------------------------------------------------------------- */
.pagina-obrigado {
  background: var(--navy);
  min-height: 100vh;
  padding: 5rem 1.5rem 4rem;
}

.pagina-obrigado__conteudo { max-width: 40rem; margin: 0 auto; }

.pagina-obrigado h1 {
  margin: .75rem 0 1.5rem;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--off-white);
}

.pagina-obrigado__abertura {
  margin: 0 auto 3.5rem;
  max-width: 32rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(217, 211, 199, .75);
}

.pagina-obrigado__atalho {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(187, 160, 106, .15);
  text-align: center;
}

.pagina-obrigado__atalho p {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  color: rgba(245, 243, 238, .6);
}

.pagina-obrigado__atalho .btn-gold { text-decoration: none; }

.pagina-obrigado__voltar {
  display: block;
  margin-top: 3rem;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,243,238,0.58);
  text-decoration: none;
}

.pagina-obrigado__voltar:hover { color: var(--champagne); }

/* ---------------------------------------------------------------------------
   Movimento reduzido: sem esteira correndo, sem reveal deslizando.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .esteira__faixa { animation: none; transform: none; }
  .esteira {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wa-flutuante { transition: none; }
  /* a carta abre sem animacao, mas continua abrindo */
  .carta-extra { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Corpo de texto no desktop: minimo 16px.
   Fica no fim pelo mesmo motivo do bloco do celular: regras de mesma
   especificidade definidas depois venceriam.
   Letra miuda de rodape (copyright, linha de conformidade) e rotulos em
   caixa alta seguem menores de proposito.
   --------------------------------------------------------------------------- */
.form-intro,
.form-atalho,
.form-prazo,
.form-seguranca p,
.opcoes__titulo,
.passos__texto,
.esteira-nota,
.instrumentos__nota,
.nao-e-pra-voce__intro,
.nao-e-pra-voce__lista li,
.pagina-obrigado__abertura,
.pagina-legal p,
.pagina-legal li,
.socio-credencial,
.consentimento,
footer p.text-xs.leading-relaxed { font-size: 1rem; }

/* ---------------------------------------------------------------------------
   Tipografia do celular — precisa ficar no fim do arquivo.
   Regras de mesma especificidade definidas depois venceriam este bloco,
   que foi exatamente o que aconteceu com .form-intro.
   Corpo de texto a 17px. Rotulos em caixa alta com entreletra (eyebrow,
   credenciais, esteira, lista de instrumentos) seguem menores de proposito:
   sao etiquetas, nao leitura corrida.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body,
  .text-sm,
  .text-base,
  .form-intro,
  .form-atalho,
  .form-prazo,
  .form-seguranca p,
  .opcoes__titulo,
  .opcao,
  .passos__texto,
  .esteira-nota,
  .instrumentos__nota,
  .nao-e-pra-voce__intro,
  .nao-e-pra-voce__lista li,
  .pagina-obrigado__abertura,
  .pagina-legal p,
  .pagina-legal li,
  footer p.text-xs.leading-relaxed,
  .carta p { font-size: 1.0625rem; }
}

/* Legenda de credenciais dos socios e o rodape institucional.
   Sao apoio, nao leitura corrida, mas 12px era pequeno demais no celular. */
.socio-credencial { font-size: 1rem; }
footer .text-xs { font-size: .8125rem; }

@media (max-width: 640px) {
  /* consentimento entra na regra de corpo: e texto que precisa ser lido */
  .consentimento { font-size: 1.0625rem; }
  .socio-credencial { font-size: 1.0625rem; }
}