/* ============================================================
   LOJA SKETCHUP TOTALCAD — escolas.css
   Pagina "SketchUp para Escolas" — espelha a pagina oficial de trial
   (sketchup.trimble.com/.../sketchup-for-schools/trial): split painel
   dourado (intro) + formulario branco com questionario "Eu sou..."
   (Aluno/Professor/Administrador = MESMO formulario de lead; papel capturado;
    atalho de abrir o app gratuito disponivel como acao secundaria).
   Reaproveita tokens e botoes de store.css. Prefixo est- (escola trial).
   ============================================================ */

.est-wrap{background:var(--lav);padding:44px 0 76px}
.est-card{
  max-width:1060px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;
  background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)
}

/* ---------- Painel dourado (intro) ---------- */
.est-intro{background:var(--gold);color:var(--gold-ink);padding:46px 38px;display:flex;flex-direction:column}
.est-intro__ic{width:42px;height:42px;margin-bottom:16px}
.est-intro__ic svg{width:100%;height:100%;display:block;stroke:var(--gold-ink);stroke-width:1.6;fill:none}
.est-intro h1{font-size:25px;font-weight:800;color:var(--gold-ink);line-height:1.2;margin:0 0 14px}
.est-intro__lead{font-size:16px;font-weight:600;margin:0 0 20px;color:var(--gold-ink)}
.est-intro__note{font-size:14px;line-height:1.6;margin:0 0 16px;color:#4a3a1c}
.est-intro__note a,.est-intro__help{color:var(--gold-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.est-intro__note a:hover,.est-intro__help:hover{color:#1f1a0c}
.est-intro__help{display:inline-block;margin-top:auto;font-size:14px}

/* ---------- Coluna do formulario ---------- */
.est-formcol{padding:46px 44px}
.est-form{max-width:460px}

/* Questionario "Eu sou..." */
.est-roles{border:0;margin:0 0 26px;padding:0}
.est-roles__legend{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 14px;padding:0}
.est-role{display:flex;align-items:center;gap:11px;padding:9px 0;cursor:pointer;font-size:15px;color:var(--ink)}
.est-role input{appearance:none;-webkit-appearance:none;width:19px;height:19px;min-width:19px;border:2px solid var(--ink-3);border-radius:50%;margin:0;cursor:pointer;position:relative;transition:border-color .15s ease}
.est-role input:checked{border-color:var(--blue)}
.est-role input:checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--blue)}
.est-role:hover input{border-color:var(--blue)}

/* Formulario de lead (mesmo para os 3 papeis) */
.est-fields[hidden]{display:none}
.est-formhint{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 20px}

/* Campos do formulario de lead */
.est-field{margin:0 0 18px}
.est-field__lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 7px}
.est-req{color:var(--action);font-weight:700;margin-left:3px}
.est-input{
  width:100%;font-family:var(--font);font-size:15px;color:var(--ink);background:#fff;
  border:1.6px solid var(--line);border-radius:var(--pill);padding:14px 22px;line-height:1.3;
  transition:border-color .15s ease,box-shadow .15s ease
}
.est-input::placeholder{color:var(--ink-3)}
.est-input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,99,163,.14)}
select.est-input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6068' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 18px center;background-size:18px;padding-right:46px}
.est-input.is-err{border-color:var(--action);box-shadow:0 0 0 3px var(--action-soft)}
.est-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Consentimento LGPD */
.est-consent{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin:6px 0 16px}
.est-consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.est-agree{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink);margin:0 0 22px;cursor:pointer}
.est-agree input{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;margin:1px 0 0;border:2px solid var(--ink-3);border-radius:5px;cursor:pointer;position:relative;transition:border-color .15s ease,background .15s ease}
.est-agree input:checked{background:var(--blue);border-color:var(--blue)}
.est-agree input:checked::after{content:"";position:absolute;top:2px;left:6px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.est-agree.is-err input{border-color:var(--action);box-shadow:0 0 0 3px var(--action-soft)}

.est-submit{margin-top:4px}
.est-altlaunch{font-size:13.5px;color:var(--ink-2);line-height:1.65;text-wrap:pretty;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2)}
.est-altlaunch a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.est-altlaunch a .est-nb,.est-nb{white-space:nowrap}

/* Mensagem de sucesso (pos-envio) */
.est-done{display:none;text-align:center;padding:8px 0}
.est-done.is-on{display:block}
.est-done__ic{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.est-done__ic svg{width:30px;height:30px;stroke:#fff;stroke-width:2.4;fill:none}
.est-done h2{font-size:21px;margin:0 0 10px}
.est-done p{font-size:15px;color:var(--ink-2);margin:0 0 22px;line-height:1.6}
.est-err-msg{display:none;background:var(--action-soft);color:#a3320f;font-size:13.5px;font-weight:600;border-radius:var(--radius-sm);padding:11px 15px;margin:0 0 16px}
.est-err-msg.is-on{display:block}
/* aviso do lead-gate (info azul, nao erro): aparece quando a pessoa clica num link externo antes de enviar */
.est-gatemsg{background:rgba(0,99,163,.10);color:#0b3a57;border:1px solid rgba(0,99,163,.32);font-size:13.5px;font-weight:600;line-height:1.5;border-radius:var(--radius-sm);padding:11px 15px;margin:0 0 16px}

/* ---------- Responsivo ---------- */
@media (max-width:840px){
  .est-card{grid-template-columns:1fr;max-width:560px}
  .est-intro{padding:38px 30px}
  .est-intro__help{margin-top:18px}
  .est-formcol{padding:36px 30px}
}
@media (max-width:480px){
  .est-wrap{padding:24px 0 48px}
  .est-formcol{padding:30px 22px}
  .est-intro{padding:32px 24px}
  .est-intro h1{font-size:22px}
  .est-row{grid-template-columns:1fr;gap:0}
}