/* LP Quickguide · ESG now — design baseado em esgnow.co/parceiros (tema escuro) */
:root{
  color-scheme:dark;
  --bg:#141230; --card:#1C1944;
  --line:rgba(0,159,250,.18); --line-soft:#262252;
  --fg:#EDEBF7; --muted:#B9B5D0; --faint:#8E88AE;
  --blue:#009FFA; --cyan:#00E7F7; --mint:#00E9CF;
  --grad:linear-gradient(135deg,#009FFA 0%,#00E7F7 50%,#00E9CF 100%);
  --grad-line:linear-gradient(90deg,#009FFA,#00E7F7 50%,#00E9CF);
  --err:#E0566E;
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.12}
p{margin:0}
p,li{text-wrap:pretty}
a{color:var(--cyan)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.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}

/* ===== Logo =====
   O PNG (360×98) tem área transparente: 19px de cada lado e 18px em cima e embaixo.
   As margens negativas, proporcionais à altura, alinham a parte visível do logo
   com a coluna do conteúdo. Se trocar o arquivo, refaça a medição. */
.logo{--h:30px;height:var(--h);width:auto;display:block;
  --pad-x:calc(var(--h) * 19 / 98); --pad-y:calc(var(--h) * 18 / 98);
  margin:calc(var(--pad-y) * -1) 0 calc(var(--pad-y) * -1) calc(var(--pad-x) * -1)}

/* ===== Palco: header + hero sobre o mesmo fundo ===== */
.stage{position:relative;overflow:hidden;isolation:isolate;background:
  radial-gradient(900px 560px at 18% 78%,rgba(0,231,247,.16),transparent 62%),
  radial-gradient(820px 520px at 88% 8%,rgba(0,159,250,.22),transparent 62%),
  radial-gradient(700px 420px at 60% 110%,rgba(0,233,207,.08),transparent 60%),var(--bg)}
.stage-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(0,159,250,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,250,.07) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(1000px 640px at 40% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(1000px 640px at 40% 40%,#000 0%,transparent 75%);animation:gridmove 22s linear infinite}
@keyframes gridmove{to{background-position:56px 56px,56px 56px}}

/* Header (só o logo: o site tem uma página) */
.site-head .wrap{display:flex;align-items:center;padding-block:28px}
.logo-link{display:inline-block;border-radius:4px}
.logo-link:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* ===== Hero =====
   Desktop: texto e mockup à esquerda, formulário à direita ocupando as duas linhas.
   Celular: texto, mockup e formulário, nessa ordem. */
.hero{padding-block:36px 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"intro form" "media form";grid-template-rows:auto 1fr;column-gap:72px;align-items:start}
.intro{grid-area:intro;display:grid;gap:22px;align-content:start;min-width:0}
.mockup{grid-area:media}
.fcard{grid-area:form}
@media (max-width:1040px){.hero-grid{column-gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,400px)}}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "media" "form";grid-template-rows:none}}
@media (max-width:560px){.hero{padding-block:16px 56px}}

.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--faint);display:flex;align-items:center;gap:16px;white-space:nowrap}
.eyebrow .ln{height:1px;width:clamp(48px,14vw,180px);background:linear-gradient(90deg,var(--line-soft),transparent)}
@media (max-width:560px){.eyebrow{white-space:normal}.eyebrow .ln{display:none}}
.intro h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.g{background:var(--grad-line);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.12rem;color:var(--muted);max-width:56ch}

.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;color:var(--fg);font-size:.98rem;line-height:1.5}
.checks li::before{content:"";width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(0,231,247,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E7F7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid rgba(0,231,247,.45)}

.facts{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.86rem;color:var(--muted)}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Mockup em destaque, com brilho atrás */
.mockup{position:relative;margin:80px 0 0;display:flex;justify-content:center;isolation:isolate}
.mockup::before{content:"";position:absolute;z-index:-1;left:50%;top:54%;width:150%;aspect-ratio:1.5;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,231,247,.36),rgba(0,159,250,.16) 45%,transparent 100%);filter:blur(10px)}
.mockup img{width:min(300px,100%);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
@media (max-width:960px){.mockup{margin:32px 0 40px}.mockup img{width:min(260px,100%)}}
@media (max-width:560px){.mockup img{width:56vw}}

/* ===== Formulário ===== */
.fcard{background:rgba(28,25,68,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(0,231,247,.28);border-radius:20px;padding:32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05)}
@media (max-width:560px){.fcard{padding:24px 18px}}
.fcard form,.fbody{display:grid;gap:20px}
.fcard h2{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;text-align:center}
.fcard #gintro{color:var(--muted);font-size:.92rem;margin-top:-14px;text-align:center}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.f{display:grid;gap:7px;min-width:0;align-content:start}
.f > label{font-size:.85rem;font-weight:500}
.full{grid-column:1/-1}
.req{color:var(--err);font-weight:700}
.opt{font-weight:400;color:var(--faint);font-size:.78rem}
input[type=text],input[type=email],input[type=tel],select{font:inherit;font-size:.93rem;color:var(--fg);background:var(--bg);border:1px solid var(--line-soft);border-radius:8px;padding:11px 12px;width:100%;transition:border-color .15s}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
select:invalid{color:var(--faint)}
select option{color:var(--fg);background:var(--bg)}
input::placeholder{color:var(--faint)}
input:focus-visible,select:focus-visible{outline:none;border-color:var(--cyan)}
.sep{height:1px;background:var(--line-soft)}

.consents{display:grid;gap:12px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--muted);cursor:pointer}
.consent input{margin:4px 0 0;flex:none;accent-color:var(--cyan);width:16px;height:16px}
.consent.err{color:#F08397}

.f.err input,.f.err select{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(214,69,93,.18)}
.emsg{display:block;color:#F08397;font-size:.8rem}
.emsg:empty{display:none}
.ferr{padding:10px 12px;border-radius:10px;background:rgba(214,69,93,.12);border:1px solid rgba(214,69,93,.35);color:#F7B3C0;font-size:.88rem}

.actions{display:grid;gap:12px;justify-items:center;text-align:center}
.submit{display:inline-flex;align-items:center;gap:10px;font:700 .95rem var(--display);background:var(--grad);color:#0C0A22;border:0;border-radius:8px;padding:14px 22px;cursor:pointer;box-shadow:0 8px 28px rgba(0,159,250,.25);transition:transform .15s,opacity .15s,box-shadow .15s}
.submit:hover:not(:disabled){transform:translateY(-1px)}
.submit:focus-visible{outline:2px solid #fff;outline-offset:3px}
.submit:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.actions .submit{width:100%;justify-content:center;padding-block:15px}
.fine{font-size:.78rem;color:var(--faint)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.thanks{border:1px solid var(--mint);background:rgba(0,233,207,.07);border-radius:12px;padding:18px;display:grid;gap:6px}
.thanks b{font-family:var(--display);font-size:1.1rem}
.thanks > span{color:var(--muted);font-size:.9rem}
.thanks > span a{font-weight:600}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .95rem var(--display);padding:14px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;transition:transform .15s}
.btn.pri{background:var(--grad);color:#0C0A22;box-shadow:0 8px 28px rgba(0,159,250,.25)}
.btn.pri:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.thanks .btn{justify-self:start;margin-top:10px}

.gl-back{margin-top:64px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:var(--muted);font-size:.92rem}
.gl-back a{font-family:var(--display);font-weight:700;color:var(--cyan);text-decoration:none}
.gl-back a:hover{text-decoration:underline}

/* ===== Rodapé ===== */
.site-foot{border-top:1px solid var(--line-soft);position:relative}
.site-foot::before{content:"";position:absolute;inset:-1px 0 auto;height:1px;background:linear-gradient(90deg,transparent,#009FFA 30%,#00E9CF 60%,transparent)}
.site-foot .wrap{padding-block:40px;display:grid;gap:12px}
.site-foot .logo{--h:26px;margin-bottom:calc(var(--pad-y) * -1 + 4px)}
.site-foot p{font-size:.88rem;color:var(--muted);max-width:40ch}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.85rem;margin-top:6px}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--cyan)}
.copy{font-size:.78rem!important;color:var(--faint)!important}