/* ============================================
   Magnus Leads — formulário de captação (v2.0)
   Visual pensado para o ITI Residence, mas reaproveitável:
   troque as variáveis --ml-* no seletor .mlead do site.
   ============================================ */

.mlead{
  --ml-accent: var(--blue, #1f71b8);
  --ml-accent-hover: #1a5f9c;
  --ml-ink: var(--ink, #1a2229);
  --ml-ink-soft: var(--ink-soft, #5b6672);
  --ml-line: #d9d5cc;
  --ml-bg-input: #fff;
  --ml-erro: #b42318;
  --ml-ok: #127a4b;
  position:relative;
  font-family:var(--font-body, "Poppins", sans-serif);
  color:var(--ml-ink);
}
.mlead *{ box-sizing:border-box; }

.mlead-campos{ display:grid; gap:16px; }
.mlead-campos[hidden]{ display:none; }
.mlead-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mlead-campo label, .mlead-legenda{
  font-size:.84rem; font-weight:600; color:var(--ml-ink);
}
.mlead-opcional{ font-weight:400; color:var(--ml-ink-soft); }
.mlead input[type="text"], .mlead input[type="tel"], .mlead select{
  width:100%; height:50px; padding:0 16px;
  font:500 1rem/1 var(--font-body, "Poppins", sans-serif); color:var(--ml-ink);
  background:var(--ml-bg-input); border:1.5px solid var(--ml-line); border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none; appearance:none;
}
.mlead select{
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231f71b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.mlead input::placeholder{ color:#9aa3ad; font-weight:400; }
.mlead input:focus, .mlead select:focus{
  outline:none; border-color:var(--ml-accent);
  box-shadow:0 0 0 4px rgba(31,113,184,.16);
}
.mlead .tem-erro input, .mlead .tem-erro select{ border-color:var(--ml-erro); }
.mlead .tem-erro input:focus{ box-shadow:0 0 0 4px rgba(180,35,24,.14); }
.mlead-erro{ margin:0; min-height:0; font-size:.8rem; line-height:1.4; color:var(--ml-erro); }
.mlead-erro:empty{ display:none; }

/* consentimento */
.mlead-check{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  font-size:.82rem; line-height:1.5; color:var(--ml-ink-soft);
}
.mlead-check input{
  flex:0 0 22px; width:22px; height:22px; margin:1px 0 0; cursor:pointer;
  accent-color:var(--ml-accent);
}
.mlead-check a{ color:var(--ml-accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* campo-isca (robôs) */
.mlead-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* anti-robô da Cloudflare (só aparece se precisar de interação) */
.mlead-ts:empty{ display:none; }
.mlead-ts{ min-height:0; }

.mlead-enviar{ width:100%; margin-top:4px; position:relative; }
.mlead-enviar[disabled]{ opacity:.75; cursor:progress; transform:none !important; }
.mlead-enviar .mlead-spin{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:mlead-gira .8s linear infinite; display:none;
}
.mlead.is-enviando .mlead-spin{ display:inline-block; }
@keyframes mlead-gira{ to{ transform:rotate(360deg); } }

.mlead-status{ margin:0; font-size:.86rem; line-height:1.5; }
.mlead-status:empty{ display:none; }
.mlead-status.is-erro{ color:var(--ml-erro); }
.mlead-alt{ margin:2px 0 0; font-size:.82rem; color:var(--ml-ink-soft); text-align:center; }
.mlead-alt a{ color:var(--ml-accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.mlead-seguro{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0; font-size:.74rem; color:var(--ml-ink-soft); }
.mlead-seguro svg{ width:14px; height:14px; flex:0 0 14px; }

/* tela de sucesso */
.mlead-sucesso{ text-align:center; padding:8px 4px; }
.mlead-sucesso[hidden]{ display:none; }
.mlead-sucesso-icone{
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; background:rgba(18,122,75,.12); color:var(--ml-ok);
}
.mlead-sucesso-icone svg{ width:30px; height:30px; }
.mlead-sucesso h3{ font-family:var(--font-display, sans-serif); font-weight:400; font-size:1.25rem; margin:0 0 8px; color:var(--navy, #102f48); }
.mlead-sucesso p{ margin:0 0 18px; font-size:.92rem; color:var(--ml-ink-soft); }
.mlead-sucesso .btn{ width:100%; }
.mlead-ref{ display:block; margin-top:12px; font-size:.74rem; color:var(--ml-ink-soft); }

/* ---------- Variante escura (dentro do vidro do CTA final) ---------- */
.mlead--escuro{
  --ml-ink:#fff; --ml-ink-soft:#c3d3e0; --ml-line:rgba(255,255,255,.28);
  --ml-bg-input:rgba(255,255,255,.1); --ml-erro:#ffb4ab; --ml-accent:#6fc3ff;
}
.mlead--escuro input[type="text"], .mlead--escuro input[type="tel"], .mlead--escuro select{ color:#fff; }
.mlead--escuro select option{ color:#1a2229; }
.mlead--escuro input::placeholder{ color:rgba(255,255,255,.55); }
.mlead--escuro .mlead-check a, .mlead--escuro .mlead-alt a{ color:#fff; }
.mlead--escuro .mlead-sucesso h3{ color:#fff; }
.mlead--escuro .mlead-sucesso-icone{ background:rgba(111,195,255,.18); color:#6fc3ff; }

@media (prefers-reduced-motion:reduce){ .mlead .mlead-spin{ animation-duration:2s; } }

/* ============================================
   Seção "Atendimento" do ITI (direção A)
   ============================================ */
.atendimento{ background:var(--navy, #102f48); position:relative; overflow:hidden; }
.atendimento::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:var(--blue, #1f71b8); filter:blur(110px); opacity:.35; top:-220px; right:-160px; pointer-events:none;
}
.atend-grid{ position:relative; display:grid; grid-template-columns:1fr minmax(0,460px); gap:64px; align-items:center; }
.atend-grid > *{ min-width:0; }
.atend-texto h2{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem); }
.atend-texto .lead-text{ color:#c3d3e0; }
.atend-lista{ display:grid; gap:14px; margin:26px 0 0; }
.atend-lista li{ display:flex; gap:12px; align-items:flex-start; color:#e2ebf3; font-size:.97rem; line-height:1.5; }
.atend-lista svg{ flex:0 0 22px; width:22px; height:22px; color:#6fc3ff; margin-top:1px; }
.atend-card{
  background:#fff; border-radius:22px; padding:30px 28px 24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.atend-card-titulo{ font-family:var(--font-display, sans-serif); font-size:1.15rem; color:var(--navy, #102f48); margin:0 0 4px; line-height:1.25; }
.atend-card-sub{ font-size:.86rem; color:var(--ink-soft, #5b6672); margin:0 0 20px; }
@media (max-width:900px){
  .atend-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:640px){
  .atend-card{ padding:24px 18px 20px; border-radius:18px; }
}

/* botão "Quero valores desta planta" nos cards */
.planta-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:0;
  background:none; border:0; cursor:pointer;
  font:600 .88rem var(--font-body, "Poppins", sans-serif); color:var(--blue, #1f71b8);
  text-decoration:underline; text-underline-offset:3px;
}
.planta-cta:hover{ color:var(--navy, #102f48); }
.planta-cta svg{ width:16px; height:16px; }
.mlead-cabeca .atend-card-sub{ margin-bottom:4px; }
.mlead--escuro .atend-card-titulo{ color:#fff; }
.mlead--escuro .atend-card-sub{ color:#c3d3e0; }

/* janela (direção C) */
.mlead-modal{
  width:min(480px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0;
  border-radius:22px; background:#fff; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); overflow:auto;
}
.mlead-modal::backdrop{ background:rgba(11,13,16,.62); backdrop-filter:blur(3px); }
.mlead-modal .atend-card{ box-shadow:none; }
.mlead-modal-fechar{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  border:0; background:#f1efea; color:#1a2229; font-size:1.4rem; line-height:1; cursor:pointer;
}
.mlead-modal-fechar:hover{ background:#e3e0d8; }
.whatsapp-float.oculto-pelo-form{ opacity:0; visibility:hidden; pointer-events:none; }
