/* ============================================================
   Evoy · Seja um parceiro — versão clara
   Sobreposição carregada depois de styles.css, ativada por body.claro.
   Fundos: #FFFFFF e #F6F6F6 alternados. Texto: verde-escuro (#00372D)
   nos títulos e cinza 447 C (#283228) no corpo. Acentos: verde
   #00D23C e lima #BEFF00. Manifesto e rodapé seguem em verde-escuro
   como blocos de contraste.
   ============================================================ */
.claro {
  --fundo: #FFFFFF;
  --fundo-2: #F6F6F6;
  --texto: #283228;
  --texto-2: #646E64;
  --texto-3: #828C82;
  --linha: rgba(0,55,45,.12);
  --linha-forte: rgba(0,55,45,.28);
  --sombra-clara: 0 14px 36px rgba(0,55,45,.08);
  --sombra-clara-alta: 0 24px 50px rgba(0,55,45,.14);
  --icone-fundo: rgba(0,210,60,.14);
  background: var(--fundo);
  color: var(--texto);
}

/* base tipográfica */
.claro h1, .claro h2, .claro h3, .claro h4 { color: var(--verde-escuro); }
.claro .lead { color: var(--texto-2); }
.claro .lead b { color: var(--verde-escuro); }
.claro .tag { color: var(--verde-escuro); }
.claro .tag::before { background: var(--verde); box-shadow: none; }
.claro .slash { background: var(--verde); }

/* cabeçalho: sem barra superior; o logo vai para o banner */
.claro .topo { display: none; }
.claro .hero__logo { display: flex; width: fit-content; --logo-h: 42px; margin-bottom: 2.4rem; }
.claro .hero__logo img { height: var(--logo-h); }
.claro .hero__logo span { display: inline; }
.claro .secao, .claro #form-rep { scroll-margin-top: 24px; }
.claro .topo nav a { color: var(--verde-escuro); }
.claro .topo nav a:hover { color: #00A040; }

/* botões */
.claro .btn--contorno { color: var(--verde-escuro); border-color: var(--verde-escuro); }
.claro .btn--contorno:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: var(--branco); }
.claro .btn:focus-visible { outline-color: var(--verde-escuro); }

/* hero: foto à direita, véu branco à esquerda para o texto */
.claro .hero { background: var(--fundo); color: var(--texto); }
@media (min-width: 900px) { .claro .hero__inner { padding-top: 3.2rem; } }
.claro .hero::before { background: url("img/fotos/hero-claro.jpg") right 55% / cover no-repeat; }
.claro .hero::after { background:
  linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255,255,255,.7) 56%, rgba(255,255,255,0) 74%),
  linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 22%, transparent 74%, #fff 100%); }
@media (max-width: 899px) { .claro .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.78) 60%, #fff 100%); } }
.claro .luz, .claro .grao { display: none; }
.claro .hero h1 { color: var(--verde-escuro); max-width: 17ch; font-size: clamp(2.2rem, 4.3vw, 3.7rem); text-wrap: balance; }
.claro .hero .lead { color: var(--texto-2); }
.claro .hero__form { background: rgba(255,255,255,.96); border: 1px solid var(--linha); box-shadow: 0 30px 70px rgba(0,55,45,.18); backdrop-filter: blur(8px); }
.claro .hero__form { transition: box-shadow .3s; }
.claro .hero__form--destaque { box-shadow: 0 0 0 4px rgba(0,210,60,.4), 0 30px 70px rgba(0,55,45,.18) !important; }
.claro .hero__form-titulo { color: var(--verde-escuro); }
.claro .hero__form-sub, .claro .hero__form-nota { color: var(--texto-2); }
.claro .hero__form-nota svg { color: #00A040; }

/* fundos das seções: alternância branco / cinza-claro */
.claro .fundo-rico, .claro .fundo-rico.verde, .claro .secao--suave { background: var(--fundo); }
.claro #suporte, .claro #ganhos, .claro #pra-quem, .claro #gente, .claro #cadastro { background: var(--fundo-2); }
.claro #como-funciona, .claro #faq, .claro #por-que, .claro #depoimentos { background: var(--fundo); }
.claro #como-funciona { padding-top: 4rem; }
@media (min-width: 900px) { .claro #como-funciona { padding-top: 5.5rem; } }

/* você vende, a gente cuida do resto: "Você" | barra lima | "A Evoy" */
.claro .divisao { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 900px) { .claro .divisao { grid-template-columns: minmax(0, .72fr) 1px minmax(0, 1.55fr); gap: 0 3rem; } }
.claro .divisao__rotulo { display: inline-grid; place-items: center; height: 34px; padding: 0 1.1rem; font-family: var(--font-titulo); font-weight: 700; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); margin-bottom: 1.3rem; }
.claro .divisao__rotulo--voce { background: var(--lima); color: var(--verde-escuro); }
.claro .divisao__rotulo--evoy { background: var(--verde-escuro); color: var(--branco); }
.claro .divisao__lista-voce { list-style: none; margin: 0; padding: 0; }
.claro .divisao__lista-voce li { font-family: var(--font-titulo); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -.01em; color: var(--verde-escuro); padding: .85rem 0; border-bottom: 1px solid var(--linha); }
.claro .divisao__lista-voce li:first-child { padding-top: .2rem; }
.claro .divisao__barra { display: block; height: 1px; width: 100%; background: var(--verde); }
@media (min-width: 900px) { .claro .divisao__barra { align-self: stretch; height: auto; width: 1px; } }
.claro .divisao__lista-evoy { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem 2rem; }
@media (min-width: 640px) { .claro .divisao__lista-evoy { grid-template-columns: 1fr 1fr; } }
.claro .divisao__lista-evoy li { display: flex; gap: .75rem; align-items: flex-start; }
.claro .divisao__lista-evoy svg { width: 22px; height: 22px; flex: none; color: var(--verde); margin-top: .1rem; }
.claro .divisao__lista-evoy strong { display: block; font-family: var(--font-titulo); font-weight: 700; font-size: 1.02rem; color: var(--verde-escuro); margin-bottom: .15rem; }
.claro .divisao__lista-evoy span { display: block; color: var(--texto-2); font-size: .92rem; line-height: 1.45; }
.claro #suporte .secao__cab { max-width: none; }
@media (min-width: 900px) { .claro #suporte h2 { white-space: nowrap; } }
.claro #suporte .perfis .perfil span { font-size: .92rem; }
.claro .fundo-rico .barra-contorno { border-color: var(--verde-escuro); opacity: .07; box-shadow: none; }
.claro .grade-fina::before, .claro .grade-fina.clara::before { display: none; }
.claro .glow { opacity: .1 !important; }

/* faixa de confiança */
.claro .faixa__item { background: var(--fundo); border: 1px solid var(--linha); box-shadow: 0 18px 40px rgba(0,55,45,.1); color: var(--texto-2); }
.claro .faixa__item strong { color: var(--verde-escuro); }
.claro .faixa__item svg { color: var(--verde-escuro); background: var(--icone-fundo); }

/* cartões */
.claro .cartao, .claro .secao--suave .cartao, .claro .perfil, .claro .secao--suave .perfil, .claro .depo, .claro .simulador, .claro .secao--suave .simulador,
.claro .form-card, .claro .faq details, .claro .secao--suave .faq details, .claro .passo__caixa {
  background: var(--fundo); border: 1px solid var(--linha); box-shadow: var(--sombra-clara); backdrop-filter: none; }
.claro .cartao:hover, .claro .perfil:hover { box-shadow: var(--sombra-clara-alta); }
.claro .cartao p, .claro .perfil span, .claro .passo p, .claro .dupla__item p, .claro .faq details p, .claro .passos__nota,
.claro .form-lado .contato, .claro .etapa__sub, .claro .consent { color: var(--texto-2); }
.claro .cartao .icone, .claro .perfil svg, .claro .dupla__item .icone { color: var(--verde-escuro); background: var(--icone-fundo); }
.claro .perfil strong, .claro .trilha li, .claro .faq summary, .claro .etapa__titulo, .claro .depo footer strong, .claro .simulador h3 { color: var(--verde-escuro); }

/* pra quem é: lista de perfis sem cartão */
.claro .perfis .perfil { background: none; border: 0; border-bottom: 1px solid var(--linha); box-shadow: none; }
.claro .perfis .perfil:first-child { border-top: 1px solid var(--linha); }

/* por que a Evoy (bento) */
.claro .bento__destaque { border-color: rgba(0,55,45,.15); box-shadow: 0 18px 40px rgba(0,55,45,.15); }
.claro .bento__destaque h3, .claro .bento__destaque-conteudo h3 { color: var(--branco); }
.claro .bento__destaque-conteudo p { color: rgba(255,255,255,.78); }
.claro .bento__destaque .bento__numero { color: var(--lima); }
.claro .checagem { border-left-color: var(--linha); }
.claro .checagem li { color: var(--texto); }
.claro .trilha li::before { color: var(--texto-3); }
.claro .trilha li:not(:last-child)::after { border-left-color: rgba(0,55,45,.3); }
.claro .bento__dupla { border-color: var(--linha); }
.claro .dupla__item + .dupla__item { border-left-color: var(--linha); }
@media (max-width: 719px) { .claro .dupla__item + .dupla__item { border-top-color: var(--linha); } }

/* como funciona (passos) */
.claro .passo__tempo, .claro .passo__caixa::before { color: var(--verde-escuro); }
.claro .secao--suave .passo__num { box-shadow: 0 0 0 6px var(--fundo); }
.claro .passo--meta .passo__caixa { background: var(--fundo); border-color: var(--verde); box-shadow: 0 14px 36px rgba(0,210,60,.18); }
.claro .passo--meta .passo__caixa p { color: var(--texto); }
.claro .passo__marca::after { opacity: 1; }

/* ganhos e simulador */
.claro .lista-check svg { color: var(--verde); filter: none; }
.claro .simulador { color: var(--texto); }
.claro .simulador label { color: var(--texto-2); }
.claro .simulador input[type=range], .claro .consent input { accent-color: var(--verde); }
.claro .simulador .valor { color: var(--verde-escuro); }
.claro .simulador__saida { background: rgba(0,210,60,.1); border-color: rgba(0,210,60,.5); }
.claro .simulador__saida small { color: var(--texto-2); }
.claro .simulador__saida strong { color: var(--verde-escuro); text-shadow: none; }
.claro .aviso { color: var(--texto-3); }

/* mosaico */
.claro .mosaico figure { background: #E9E9E9; }

/* manifesto: fundo branco, foto da equipe bem esmaecida atrás do vídeo */
.claro .manifesto { background: var(--fundo); border: 0; }
.claro .manifesto::before { opacity: .16; filter: saturate(.45); }
.claro .manifesto::after { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.55) 100%); }
.claro .slogan { color: var(--texto-2); }
.claro .slogan strong { color: var(--verde-escuro); }
.claro .manifesto blockquote { color: var(--texto-2); border-left-color: var(--verde); }
.claro .manifesto blockquote b { color: var(--verde-escuro); }
.claro .manifesto cite { color: var(--texto-3); }
.claro .video { border-color: rgba(0,55,45,.15); box-shadow: 0 24px 60px rgba(0,55,45,.18); }

/* depoimentos */
.claro .depo__foto { background: var(--fundo-2); }
.claro .depo__tag { color: var(--texto-2); }
.claro .depo__tag svg { color: #00A040; }
.claro .depo blockquote { color: var(--texto); }
.claro .depo footer span { color: var(--texto-3); }
.claro .depo__chips i { border-color: rgba(0,55,45,.15); background: var(--fundo-2); color: var(--verde-escuro); }

/* FAQ */
.claro .faq details[open] { border-color: var(--verde); box-shadow: 0 14px 36px rgba(0,210,60,.12); }
.claro .faq summary::after { border-color: var(--verde-escuro); }

/* formulário */
.claro .form-card::before { background: linear-gradient(90deg, var(--verde), rgba(0,210,60,.15)); }
.claro .etapas span { background: var(--linha); }
.claro .etapas span.ativa { background: var(--verde); box-shadow: none; }
.claro .etapas span.feita { background: var(--verde-escuro); }
.claro .campo > label, .claro .campo > .rotulo { color: var(--verde-escuro); }
.claro .campo input[type=text], .claro .campo input[type=email], .claro .campo input[type=tel], .claro .campo select, .claro .campo textarea {
  background: var(--fundo); color: var(--texto); border-color: var(--linha-forte); color-scheme: light; }
.claro .campo input::placeholder, .claro .campo textarea::placeholder { color: var(--texto-3); }
.claro .campo input:focus, .claro .campo select:focus, .claro .campo textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,210,60,.18); }
.claro .campo--erro input, .claro .campo--erro select { border-color: var(--erro); }
.claro .opcao span { background: var(--fundo); border-color: var(--linha-forte); color: var(--texto); }
.claro .opcao:hover span { border-color: var(--verde); }
.claro .opcao input:checked + span { background: rgba(0,210,60,.1); border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0,210,60,.14); color: var(--verde-escuro); }
.claro .opcao input:focus-visible + span { outline-color: var(--verde-escuro); }
.claro .campo--erro .opcao span { border-color: var(--erro); }
.claro .consent a, .claro .form-lado .contato a { color: var(--verde-escuro); }
.claro .form-nav .btn--voltar { color: var(--texto-2); }
.claro .form-nav .btn--voltar:hover { color: var(--verde-escuro); }
.claro .campo .ajuda { color: var(--texto-2); }
.claro .campo .ajuda.ok { color: var(--verde-escuro); }
.claro .campo .ajuda.consultando { color: var(--texto-3); }
.claro .form-secao .glow--lima { opacity: .12; }

/* rodapé: verde-escuro, selos em branco */
.claro .rodape { background: var(--verde-escuro); border-top: 0; color: rgba(255,255,255,.78); }
.claro .rodape h4, .claro .rodape__slogan { color: var(--branco); }
.claro .rodape .legal { border-top-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }

/* páginas simples */
.claro .pagina p, .claro .pagina li { color: var(--texto); }
.claro .pagina a:not(.btn) { color: var(--verde-escuro); }

/* teste: formulário flutuante à direita, conteúdo à esquerda (body.flutuante) */
@media (min-width: 1100px) {
  .claro.flutuante { --trilho: 400px; --calha: clamp(24px, 4vw, 72px); }
  .claro.flutuante .container { width: auto; max-width: 1080px; margin-left: var(--calha); margin-right: calc(var(--trilho) + var(--calha) * 2); }
  .claro.flutuante .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 640px; padding-top: 3.2rem; padding-bottom: 6rem; }
  .claro.flutuante .hero h1 { max-width: 20ch; }
  .claro.flutuante .hero .lead { max-width: 44rem; }
  .claro.flutuante .hero::after { background:
    linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.15) 72%),
    linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 22%, transparent 74%, #fff 100%); }
  .claro.flutuante .hero__form { position: fixed; top: 28px; right: var(--calha); width: var(--trilho); max-width: none; max-height: calc(100vh - 56px); overflow: auto; z-index: 25; justify-self: auto; box-shadow: 0 30px 80px rgba(0,55,45,.22); }
  .claro.flutuante .faixa__inner { grid-template-columns: repeat(2, 1fr); }
  .claro.flutuante .passos { grid-template-columns: repeat(2, 1fr); }
  .claro.flutuante .passo__marca::after { display: none; }
  .claro.flutuante .passos::after { display: none; }
  .claro.flutuante .mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .claro.flutuante .divisao { grid-template-columns: minmax(0, .8fr) 1px minmax(0, 1.5fr); }
  /* o rodapé usa a largura toda: o formulário fixo para antes dele */
  .claro.flutuante .rodape .container { width: min(100% - 40px, var(--max)); max-width: var(--max); margin-left: auto; margin-right: auto; }
  .claro.flutuante .rodape__inner { grid-template-columns: 1.2fr 1fr 1fr; }
  .claro.flutuante .grade--3 { grid-template-columns: 1fr; }
  .claro.flutuante .depo { grid-template-columns: 200px 1fr; }
}

/* banner no modo de lead curto (cadastro completo desligado) */
.claro .hero__form .form__status { margin: .6rem 0 0; }
.claro .hero__form .form__status:empty { display: none; }
/* o formulário fixo precisa ficar acima da faixa de destaques (que sobrepõe a base do banner) */
.claro.flutuante .hero > .container { z-index: 10; }

/* botão flutuante no celular (some quando o formulário do banner está na tela e no desktop com formulário fixo) */
.claro .cta-flutuante { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 40; display: flex; align-items: center; justify-content: center; height: 54px; font-family: var(--font-titulo); font-weight: 700; font-size: 1.02rem; color: var(--verde-escuro); background: var(--verde); text-decoration: none; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); box-shadow: 0 14px 34px rgba(0,55,45,.28); transition: transform .25s, opacity .25s; }
.claro .cta-flutuante .btn__t { transform: none; }
.claro .cta-flutuante .btn__t::after { content: ""; width: 1.05em; height: 1.05em; margin-left: .6rem; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1.29 11.04H21.37V12.68H1.29Z' fill='%23fff'/><path d='M10.99 22.47L9.89 21.25L19.46 12.58L20.56 13.79L10.99 22.47Z' fill='%23fff'/><path d='M21.63 13.10L9.90 2.76L10.98 1.53L22.71 11.87L21.63 13.10Z' fill='%23fff'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1.29 11.04H21.37V12.68H1.29Z' fill='%23fff'/><path d='M10.99 22.47L9.89 21.25L19.46 12.58L20.56 13.79L10.99 22.47Z' fill='%23fff'/><path d='M21.63 13.10L9.90 2.76L10.98 1.53L22.71 11.87L21.63 13.10Z' fill='%23fff'/></svg>") center / contain no-repeat; }
.claro .cta-flutuante.oculto { opacity: 0; transform: translateY(90px); pointer-events: none; }
@media (min-width: 1100px) { .claro.flutuante .cta-flutuante { display: none; } }
@media (prefers-reduced-motion: reduce) { .claro .cta-flutuante { transition: none; } }

/* cadastro em três etapas dentro do cartão do banner */
.claro .hero__form .etapas { margin: .2rem 0 1rem; }
.claro .hero__form .linha-2:not(.linha-2--uf) { grid-template-columns: 1fr; }
.claro .hero__form .etapa__titulo { font-size: 1.1rem; }
.claro .hero__form .etapa__sub { margin-bottom: 1rem; }
.claro .hero__form .form-nav { flex-direction: column-reverse; align-items: stretch; gap: .5rem; margin-top: 1rem; }
.claro .hero__form .form-nav .btn { width: calc(100% - .9rem); }
.claro .hero__form .form-nav .btn--voltar { width: auto; align-self: flex-start; padding: .5rem 0; }
.claro .hero__form .form__status { margin: .5rem 0 0; }
.claro .hero__form .form__status:empty { display: none; }
.claro .hero__form .hero__form-nota { margin-top: .9rem; }

/* Página de obrigado: banner igual ao da landing, com o cartão de próximos passos no lugar do formulário. */
.claro .hero--obrigado .hero__inner { min-height: 0; padding-bottom: 5rem; }
.claro .hero--obrigado h1 { max-width: 16ch; }
.claro .obrigado__card { justify-self: stretch; }
.claro .obrigado__passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.claro .obrigado__passos li { display: grid; grid-template-columns: 52px 1fr; gap: .9rem; align-items: start; }
.claro .obrigado__passos li + li { padding-top: 1rem; border-top: 1px solid var(--linha); }
.claro .obrigado__passos .passo__num { background: var(--verde); color: var(--verde-escuro); }
.claro .obrigado__passos strong { display: block; font-family: var(--font-titulo); font-weight: 700; font-size: 1.02rem; color: var(--verde-escuro); line-height: 1.25; }
.claro .obrigado__tempo { display: block; font-family: var(--font-titulo); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-escuro); margin: .25rem 0 .35rem; }
.claro .obrigado__passos p { margin: 0; color: var(--texto-2); font-size: .92rem; line-height: 1.5; }
.claro .obrigado__card .hero__form-nota { margin-top: 1.3rem; }

/* Celular: logo do banner centralizado (vale para a landing e para /obrigado). */
@media (max-width: 899px) { .claro .hero__logo { margin-inline: auto; } }
/* Celular: título do banner um pouco menor e com quebra natural, pra não sobrar palavra solta por linha. */
@media (max-width: 899px) { .claro .hero h1 { max-width: none; text-wrap: pretty; } }
@media (max-width: 599px) { .claro .hero h1 { font-size: clamp(1.5rem, (100vw - 40px) * .098, 2.5rem); } }
/* Com as quebras fixas no texto, o título não precisa de largura máxima; só o tamanho da fonte precisa caber na coluna. */
.claro .hero h1, .claro.flutuante .hero h1 { max-width: none; }
@media (min-width: 900px) and (max-width: 1099px) { .claro .hero h1 { font-size: clamp(1.9rem, 3.4vw, 3.7rem); } }
@media (min-width: 1100px) { .claro.flutuante .hero h1 { font-size: clamp(2.2rem, min(4.3vw, (88vw - 400px) / 13.5), 3.7rem); } }
/* Celular: os dois botões do banner sempre lado a lado. */
@media (max-width: 599px) {
  .claro .hero__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: stretch; }
  .claro .hero__acoes .btn { width: calc(100% - .9rem); padding: 1rem .5rem; font-size: clamp(.82rem, (100vw - 40px) * .0265, .98rem); }
  .claro .hero__acoes .btn__t { gap: .4rem; }
}