/* ===== Skillcerto: LP da Consultoria de RH (/consultoria), VOPS-2445 =====
 * Arquivo próprio de propósito: o styles.css é o clone da LP de recrutamento e carrega o
 * bege #eddbb5, que não é identidade. Aqui só verde escuro + branco, com os verdes de apoio.
 * Mobile-first: a base é o celular, os @media só abrem colunas.
 */
:root{
  --verde:#213424;
  --verde-fundo:#1a2a1d;
  --verde-apoio:#1a7f1e;
  --verde-vivo:#29be2c;
  --branco:#fff;
  --cinza-fundo:#f3f6f3;
  --linha:#dfe6df;
  --tinta:#1f2a21;
  --tinta-suave:#4d5a4f;
  --raio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--branco);
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Kanit",system-ui,sans-serif;line-height:1.15;margin:0}
p{margin:0 0 14px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.eyebrow{
  display:inline-block;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde-apoio);margin-bottom:12px;
}

/* Botão principal */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;
  background:var(--verde-vivo);color:var(--verde-fundo);
  border:0;border-radius:999px;padding:17px 30px;min-height:54px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 10px 26px rgba(41,190,44,.28);
  transition:transform .15s ease,filter .15s ease;
}
.cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cta:focus-visible{outline:3px solid var(--branco);outline-offset:3px}
.cta svg{width:18px;height:18px}
.cta-nota{font-size:13px;margin:12px 0 0;opacity:.8}

/* Barra do topo */
.topo{background:var(--verde-fundo);border-bottom:1px solid rgba(255,255,255,.08)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.topo__logo{width:112px;height:auto}
.topo__tag{font-size:12px;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.04em}

/* HERO */
.hero{background:var(--verde-fundo);color:var(--branco);padding:36px 0 48px;overflow:hidden}
.hero .eyebrow{color:var(--verde-vivo)}
.hero h1{font-weight:600;font-size:clamp(32px,8.4vw,56px);letter-spacing:-.01em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--verde-vivo)}
.hero__apoio{font-size:17px;color:rgba(255,255,255,.86);max-width:540px;margin-bottom:26px}
.hero__lista{list-style:none;margin:0 0 20px;padding:0;max-width:460px}
.hero__lista li{
  position:relative;padding-left:24px;margin-bottom:7px;
  font-size:16px;color:rgba(255,255,255,.86);line-height:1.45;
}
.hero__lista li::before{
  content:"✕";position:absolute;left:0;top:.34em;
  font-size:11px;color:rgba(255,255,255,.5);
}
.hero__fecho{font-size:17px;font-weight:600;color:var(--branco);max-width:540px;margin-bottom:26px}
.hero__foto{margin:34px auto 0;max-width:320px;position:relative}
.hero__foto img{width:100%;height:auto;border-radius:var(--raio);aspect-ratio:700/892;object-fit:cover}
.hero__foto figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:rgba(26,42,29,.88);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.35;
}
.hero__foto strong{display:block;font-family:"Kanit",sans-serif;font-weight:500;font-size:16px}

/* Seções */
.sec{padding:56px 0}
.sec--cinza{background:var(--cinza-fundo)}
.sec--verde{background:var(--verde);color:var(--branco)}
.sec__titulo{font-weight:600;font-size:clamp(26px,6.4vw,40px);color:var(--verde);margin-bottom:12px}
.sec--verde .sec__titulo{color:var(--branco)}
.sec__sub{font-size:17px;color:var(--tinta-suave);max-width:680px;margin-bottom:30px}
.sec--verde .sec__sub{color:rgba(255,255,255,.82)}

/* Dores */
.dores{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dor{background:var(--branco);border:1px solid var(--linha);border-left:4px solid var(--verde-apoio);border-radius:var(--raio);padding:20px 20px 18px}
.dor h3{font-weight:500;font-size:20px;color:var(--verde);margin-bottom:6px}
.dor p{margin:0;color:var(--tinta-suave);font-size:15px}
.dores__fecho{margin:26px 0 0;font-size:17px;font-weight:600;color:var(--verde)}

/* Citação do Felipe */
.citacao{background:var(--verde);color:var(--branco);padding:52px 0}
.citacao blockquote{margin:0;font-family:"Kanit",sans-serif;font-weight:400;font-size:clamp(24px,5.8vw,36px);line-height:1.25;max-width:860px}
.citacao blockquote strong{color:var(--verde-vivo);font-weight:500}
.citacao__autor{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:14px;color:rgba(255,255,255,.82)}
.citacao__autor img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.citacao__autor strong{display:block;color:var(--branco);font-size:15px}

/* Serviços */
.servicos{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.servico{border:1px solid var(--linha);border-radius:var(--raio);padding:22px 20px;background:var(--branco);display:flex;flex-direction:column;gap:6px}
.servico__n{font-family:"Kanit",sans-serif;font-weight:500;font-size:14px;color:var(--verde-apoio)}
.servico h3{font-weight:600;font-size:21px;color:var(--verde)}
.servico__dor{font-weight:600;color:var(--tinta);font-size:15px;margin:4px 0 2px}
.servico p{margin:0;color:var(--tinta-suave);font-size:15px}

/* Como funciona */
.passos{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:14px;counter-reset:p}
.passo{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--raio);padding:22px 20px 20px 72px;counter-increment:p}
.passo::before{
  content:counter(p);position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:50%;
  background:var(--verde-vivo);color:var(--verde-fundo);font-family:"Kanit",sans-serif;font-weight:600;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.passo h3{font-weight:500;font-size:20px;margin-bottom:4px}
.passo p{margin:0;color:rgba(255,255,255,.8);font-size:15px}

/* Autoridade */
.autor{display:grid;gap:26px;align-items:center}
.autor__foto img{border-radius:var(--raio);width:100%;max-width:420px;height:auto;aspect-ratio:700/892;object-fit:cover}
.numeros{display:flex;flex-wrap:wrap;gap:14px 26px;margin:20px 0 6px}
.numero{margin:0}
.numero strong{display:block;font-family:"Kanit",sans-serif;font-weight:600;font-size:38px;line-height:1;color:var(--verde-apoio)}
.numero span{display:block;font-weight:600;color:var(--verde);font-size:14px}
.logos-faixa{background:var(--verde);padding:30px 0}
.logos-faixa p{text-align:center;color:rgba(255,255,255,.75);font-size:13px;margin-bottom:18px;letter-spacing:.04em}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 32px}
.logos img{height:26px;width:auto;opacity:.9}

/* FAQ */
.faq{max-width:780px}
.faq details{border:1px solid var(--linha);border-radius:12px;margin-bottom:12px;background:var(--branco)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 20px;font-weight:600;color:var(--verde);font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Kanit",sans-serif;font-size:24px;line-height:1;color:var(--verde-apoio)}
.faq details[open] summary::after{content:"\2212"}
.faq__r{padding:0 20px 18px;color:var(--tinta-suave);font-size:15px}
.faq__r p:last-child{margin:0}

/* CTA final */
.final{background:var(--verde-fundo);color:var(--branco);padding:60px 0;text-align:center}
.final h2{font-weight:600;font-size:clamp(28px,7vw,44px);margin:0 auto 14px;max-width:760px}
.final p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 26px}

.rodape{background:#111a13;color:rgba(255,255,255,.7);text-align:center;padding:30px 20px;font-size:13px}
.rodape img{width:120px;margin:0 auto 12px}
.rodape p{margin:0}

/* Barra fixa de CTA no celular: aparece depois do hero */
.fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(26,42,29,.96);border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%);transition:transform .25s ease;
}
.fixo.is-on{transform:none}
.fixo .cta{width:100%;padding:14px 20px;min-height:50px;font-size:15px}

/* MODAL do formulário (folha de baixo no celular, cartão no desktop) */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.is-open{display:block}
.modal__fundo{position:absolute;inset:0;background:rgba(10,18,12,.62)}
.modal__cartao{
  position:absolute;left:0;right:0;bottom:0;max-height:94vh;overflow-y:auto;
  background:var(--branco);border-radius:20px 20px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.3);
}
.modal__fechar{position:absolute;top:10px;right:12px;border:0;background:none;font-size:30px;line-height:1;color:#8a948b;cursor:pointer;padding:6px 10px}
.modal h2{font-weight:600;font-size:24px;color:var(--verde);margin:0 36px 6px 0}
.modal__obs{font-size:14px;color:var(--tinta-suave);margin-bottom:18px}

.campo{display:block;margin-bottom:14px}
.campo > span{display:block;font-weight:600;font-size:14px;color:var(--tinta);margin-bottom:6px}
.campo input,.campo select{
  width:100%;font:inherit;font-size:16px;color:var(--tinta);
  padding:12px 14px;border:1px solid #cfd8d0;border-radius:10px;background:var(--branco);min-height:48px;
}
.campo select{
  appearance:none;-webkit-appearance:none;padding-right:40px;
  background:var(--branco) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23213424' stroke-width='2.4' d='m6 9 6 6 6-6'/></svg>") right 12px center/18px no-repeat;
}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--verde-apoio);box-shadow:0 0 0 3px rgba(41,190,44,.18)}
.campo.is-erro input,.campo.is-erro select{border-color:#c62828}
.campo__erro{display:none;color:#c62828;font-size:13px;margin-top:5px}
.campo.is-erro .campo__erro{display:block}
.req{color:#c62828}
.dupla{display:grid;gap:0}
.armadilha{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-enviar{width:100%;margin-top:6px}
.form-enviar[disabled]{opacity:.7;cursor:wait}
.form-msg{font-size:14px;text-align:center;margin:12px 0 0;min-height:18px;color:#c62828}
.form-privacidade{font-size:12px;color:var(--tinta-suave);text-align:center;margin:10px 0 0}

/* ===== Telas maiores ===== */
@media (min-width:640px){
  .dores{grid-template-columns:1fr 1fr}
  .dores li:last-child{grid-column:1 / -1}
  .servicos{grid-template-columns:1fr 1fr}
  .dupla{grid-template-columns:1fr 1fr;gap:0 14px}
  .logos img{height:32px}
  .logos{gap:26px 44px}
}
@media (min-width:900px){
  .sec{padding:84px 0}
  .hero{padding:64px 0 80px}
  .hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
  .hero__foto{margin:0;max-width:none}
  .servicos{grid-template-columns:repeat(3,1fr)}
  .passos{grid-template-columns:repeat(3,1fr)}
  .autor{grid-template-columns:.8fr 1.2fr;gap:56px}
  .numeros{gap:16px 44px}
  .numero strong{font-size:48px}
  .numero span{font-size:15px}
  .fixo{display:none}
  .modal__cartao{
    left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);
    width:min(560px,calc(100% - 32px));border-radius:18px;padding:32px 32px 26px;max-height:92vh;
  }
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}