/* ============ CMM SOLAR — identidade oficial CMM ============
   Azul #0D47A1 · Azul escuro #092E6B · Azul claro #64B5F6
   Azul suave #E8F1FB · Vermelho #FF0000 (acento texto #D31920)
   Fontes: Archivo (títulos) + Source Sans 3 (texto)             */
:root{
  --azul:#0D47A1; --azul-2:#092E6B; --azul-claro:#64B5F6; --azul-suave:#E8F1FB;
  --verm:#D31920; --verm-vivo:#FF0000; --sol:#FFB800;
  --ink:#101E33; --ink-2:#33425C; --muted:#5A6A85;
  --bg:#F4F6F9; --surface:#FFFFFF; --line:#D8E1EE;
  --grad:linear-gradient(135deg,#0D47A1 0%,#092E6B 100%);
  --shadow:0 1px 3px rgba(16,30,51,.08),0 10px 28px rgba(16,30,51,.08);
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif; font-size:16.5px; line-height:1.6}
h1,h2,h3{font-family:Archivo,sans-serif; letter-spacing:-.01em; text-wrap:balance}
a{color:var(--azul)}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px}
img{max-width:100%}
input,textarea,button{font-family:inherit; font-size:15.5px}

/* ---------- marca ---------- */
.marca{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.marca-emblema{width:38px; height:38px; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.marca-texto{font-family:Archivo,sans-serif; font-weight:900; font-size:21px; letter-spacing:.01em; white-space:nowrap}
.marca-texto b{color:var(--azul)} .marca-texto i{color:var(--verm-vivo); font-style:normal}

/* ---------- botões ---------- */
.btn{display:inline-block; font-family:Archivo,sans-serif; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:9px; text-decoration:none; border:0; cursor:pointer; transition:filter .15s, transform .05s}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--verm-vivo); color:#fff}
.btn-cta:hover{filter:brightness(.92)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-entrar{background:var(--azul); color:#fff; padding:10px 20px}
.btn-entrar:hover{filter:brightness(1.12)}
.btn-bloco{width:100%; padding:13px}
a.btn{color:#fff}
:focus-visible{outline:2.5px solid var(--azul-claro); outline-offset:2px}

/* ---------- topo ---------- */
.topo{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.topo-in{max-width:1100px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:26px}
.topo-marca{text-decoration:none}
.topo-nav{display:flex; gap:22px; margin-left:auto}
.topo-nav a{font-family:Archivo,sans-serif; font-weight:600; font-size:14.5px; color:var(--ink-2); text-decoration:none}
.topo-nav a:hover{color:var(--azul)}
@media (max-width:640px){ .topo-nav{display:none} .topo-in{justify-content:space-between} }

/* ---------- hero ---------- */
.hero{background:var(--grad); color:#fff; padding:74px 24px 84px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; right:-160px; top:-220px; width:520px; height:520px; border-radius:50%;
  border:28px solid rgba(255,255,255,.06); border-top-color:rgba(255,82,82,.4); transform:rotate(-15deg)}
.hero::after{content:""; position:absolute; left:-120px; bottom:-260px; width:420px; height:420px; border-radius:50%;
  border:22px solid rgba(100,181,246,.14)}
.hero-in{max-width:1100px; margin:0 auto; position:relative}
.eyebrow{font-family:Archivo,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#9CC3F5; margin:0 0 16px}
.hero h1{font-weight:900; font-size:clamp(30px,5vw,52px); line-height:1.08; margin:0; max-width:820px}
.hl-red{color:#FF6B6B} .hl-blue{color:#8FC2FF}
.hero-sub{font-size:clamp(16px,2.2vw,19px); color:#D7E6FA; max-width:640px; margin:20px 0 0; line-height:1.55}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}

/* ---------- pilares ---------- */
.pilares{padding:0 0 10px; margin-top:-44px; position:relative; z-index:2}
.pilar-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.pilar{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--azul); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.pilar-ico{font-size:26px; margin-bottom:8px}
.pilar h3{font-size:16.5px; margin:0 0 6px; color:var(--azul-2)}
.pilar p{font-size:14.5px; color:var(--muted); margin:0; line-height:1.5}

/* ---------- seções ---------- */
section h2{font-weight:800; font-size:clamp(23px,3.4vw,30px); margin:0 0 8px; color:var(--ink)}
.sec-sub{color:var(--muted); margin:0 0 26px; font-size:16px}
.modulos{padding:70px 0 30px; text-align:center}
.mod-grid{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:900px; margin:0 auto}
.mod{font-family:Archivo,sans-serif; font-weight:600; font-size:14px; background:var(--surface); border:1.5px solid var(--line);
  color:var(--ink-2); padding:9px 16px; border-radius:999px}
.mod.destaque{background:var(--azul-suave); border-color:var(--azul); color:var(--azul)}

/* ---------- planos ---------- */
.planos{padding:60px 0 20px; text-align:center}
.plano-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; text-align:left}
.plano{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); position:relative}
.plano h3{font-size:20px; margin:0 0 2px; color:var(--azul)}
.plano-p{font-size:14px; color:var(--muted); margin:0 0 14px}
.plano ul{margin:0; padding-left:20px; font-size:14.5px; color:var(--ink-2)}
.plano li{margin-bottom:7px}
.plano-destaque{border:2px solid var(--azul); box-shadow:0 6px 30px rgba(13,71,161,.18)}
.plano-tag{position:absolute; top:-12px; left:24px; background:var(--verm-vivo); color:#fff;
  font-family:Archivo,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 12px; border-radius:999px}

/* ---------- selos ---------- */
.selos{background:var(--azul-2); color:#fff; padding:26px 0; margin-top:50px}
.selos-in{display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center}
.selo{display:flex; align-items:center; gap:9px; font-family:Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase}
.selo span{font-size:20px}

/* ---------- representantes ---------- */
.representantes{padding:64px 0}
.rep-in{display:flex; align-items:center; gap:34px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
  border-left:6px solid var(--verm-vivo); border-radius:var(--radius); padding:30px 34px; box-shadow:var(--shadow)}
.rep-in > div{flex:1 1 380px}
.rep-in p{color:var(--ink-2); margin:8px 0 0; max-width:64ch}

/* ---------- contato ---------- */
.contato{padding:10px 0 80px}
.contato-in{display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:start}
@media (max-width:800px){ .contato-in{grid-template-columns:1fr} }
.contato p{color:var(--muted)}
.form-lead{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:grid; gap:14px}
.form-lead label{font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; color:var(--ink-2); display:grid; gap:6px}
.form-lead input,.form-lead textarea{border:1.5px solid var(--line); border-radius:8px; padding:11px 13px; background:#fff; color:var(--ink)}
.form-lead input:focus,.form-lead textarea:focus{border-color:var(--azul); outline:none}
.form-ok{background:#EAF7EE; border:1px solid #2E9E4F; color:#1D6B36; border-radius:9px; padding:12px 16px; margin-top:14px; font-weight:600}
.form-erro{background:#FDECEC; border:1px solid var(--verm); color:#8E1420; border-radius:9px; padding:11px 14px; margin-bottom:14px; font-size:14.5px}

/* ---------- rodapé ---------- */
.rodape{background:var(--grad); color:#fff; padding:44px 0 38px; text-align:center}
.rodape .marca-texto b{color:#fff}
.rodape-tag{font-family:Archivo,sans-serif; font-weight:700; font-size:18px; margin:16px 0 4px}
.rodape-tag b{color:#FF6B6B}
.rodape-sub{color:#9CC3F5; font-size:13.5px; margin:0}

/* ============ LOGIN ============ */
.pg-login{background:var(--grad); min-height:100vh}
.login-fundo{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 18px; gap:18px}
.login-card{background:#fff; width:100%; max-width:400px; border-radius:16px; padding:34px 32px; box-shadow:0 12px 50px rgba(0,0,0,.35)}
.login-marca{display:flex; justify-content:center; margin-bottom:16px; text-decoration:none}
.login-card h1{font-size:22px; margin:0; text-align:center; color:var(--azul-2)}
.login-sub{text-align:center; color:var(--muted); font-size:14.5px; margin:4px 0 20px}
.login-card form{display:grid; gap:14px}
.login-card label{font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; color:var(--ink-2); display:grid; gap:6px}
.login-card input{border:1.5px solid var(--line); border-radius:8px; padding:12px 13px}
.login-card input:focus{border-color:var(--azul); outline:none}
.login-nota{text-align:center; font-size:13.5px; color:var(--muted); margin:18px 0 0}
.login-rodape{color:#9CC3F5; font-size:13px; font-family:Archivo,sans-serif; letter-spacing:.06em}

/* ============ PAINEL ============ */
.pg-painel{background:var(--bg)}
.ptopo{background:var(--azul); color:#fff}
.ptopo-in{max-width:1100px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:20px}
.ptopo .marca-texto{font-size:18px}
.ptopo .marca-texto b,.ptopo .marca-texto i{color:#fff}
.ptopo .marca-emblema{width:30px; height:30px}
.ptopo-empresa{font-family:Archivo,sans-serif; font-weight:700; font-size:14.5px; background:rgba(255,255,255,.14); padding:5px 14px; border-radius:999px}
.ptopo-user{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px}
.btn-sair{color:#fff; font-family:Archivo,sans-serif; font-weight:700; font-size:13px; border:1.5px solid rgba(255,255,255,.5); padding:5px 14px; border-radius:999px; text-decoration:none}
.btn-sair:hover{background:rgba(255,255,255,.15)}
@media (max-width:640px){ .ptopo-empresa{display:none} }
.painel{padding:34px 24px 60px}
.saudacao h1{font-size:26px; margin:0 0 4px; color:var(--azul-2)}
.saudacao p{color:var(--muted); margin:0}
.aviso-licenca{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-left:5px solid #2E9E4F; border-radius:10px; padding:13px 18px; margin:22px 0 8px; font-size:14.5px; color:var(--ink-2)}
.dot-ok{width:10px; height:10px; border-radius:50%; background:#2E9E4F; flex:none}
.painel-sec{font-size:15px; font-family:Archivo,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:30px 0 14px}
.pmod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px}
.pmod{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:18px; box-shadow:var(--shadow)}
.pmod-ico{font-size:24px}
.pmod-nome{font-family:Archivo,sans-serif; font-weight:700; font-size:14.5px; margin:8px 0 6px; color:var(--ink)}
.pmod-status{font-family:Archivo,sans-serif; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.pmod.on .pmod-status{color:#2E9E4F}
.pmod.off{opacity:.72}
.prodape{text-align:center; color:var(--muted); font-size:13px; padding:20px 0 30px}