:root{
  --blue:#006fb9;
  --blue-dark:#004b85;
  --blue-soft:#e8f5ff;
  --cyan:#21a7e6;
  --white:#ffffff;
  --ink:#0d1b2a;
  --muted:#5f7185;
  --line:#c9dfee;
  --shadow:0 26px 70px rgba(0,72,130,.18);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    linear-gradient(90deg, rgba(0,111,185,.08) 1px, transparent 1px),
    linear-gradient(rgba(0,111,185,.08) 1px, transparent 1px),
    linear-gradient(180deg,#ffffff 0%,#eef8ff 46%,#ffffff 100%);
  background-size:42px 42px,42px 42px,100% 100%;
}
a{color:var(--blue); font-weight:700}
.container{width:min(1160px,calc(100% - 34px)); margin:0 auto}
.page-loader{position:fixed; inset:0; background:#fff; display:grid; place-items:center; z-index:1000; transition:.45s ease}
.page-loader.hide{opacity:0; visibility:hidden}
.loader-card{width:min(420px,90vw); text-align:center; padding:28px; border:2px solid var(--blue); border-radius:26px; box-shadow:var(--shadow)}
.loader-logo{width:150px; max-width:100%; height:auto}
.loader-bar{height:9px; background:var(--blue-soft); border-radius:99px; overflow:hidden; margin:18px 0 8px}
.loader-bar span{display:block; height:100%; width:60%; background:linear-gradient(90deg,var(--blue),var(--cyan)); animation:loading 1s infinite alternate}
@keyframes loading{from{transform:translateX(-70%)}to{transform:translateX(160%)}}

.top-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-bottom:4px solid var(--blue)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px}
.brand img{width:128px; max-width:42vw; display:block}
nav{display:flex; align-items:center; gap:8px}
nav a{text-decoration:none; color:var(--ink); padding:12px 14px; border-radius:999px}
nav a:hover{background:var(--blue-soft); color:var(--blue)}
.nav-toggle{display:none; border:2px solid var(--blue); background:#fff; color:var(--blue); border-radius:12px; font-size:24px; padding:6px 12px}

.hero{display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:center; min-height:calc(100vh - 68px); padding:58px 0}
.eyebrow{display:inline-flex; padding:9px 13px; border-radius:999px; background:var(--blue); color:#fff; font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.14em}
.eyebrow.blue{background:var(--blue-soft); color:var(--blue); border:1px solid var(--line)}
h1{font-size:clamp(42px,7vw,82px); line-height:.95; margin:18px 0; letter-spacing:-.06em; color:var(--blue-dark)}
h2{font-size:clamp(30px,4vw,50px); margin:14px 0; letter-spacing:-.04em; color:var(--blue-dark)}
p{line-height:1.7}
.hero-copy p{font-size:20px; color:#334a62; max-width:760px}
.hero-actions,.form-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.btn{border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:13px 18px; border-radius:15px; text-decoration:none; font-weight:900; transition:.22s ease; font-size:15px}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; box-shadow:0 14px 34px rgba(0,111,185,.28)}
.btn.ghost{background:#fff; border:2px solid var(--blue); color:var(--blue)}
.btn.whatsapp{background:#17b26a; color:#fff}

.maintenance-panel{background:#fff; border:2px solid var(--blue); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.maintenance-panel::before{content:""; position:absolute; inset:0 0 auto 0; height:9px; background:linear-gradient(90deg,var(--blue),var(--cyan))}
.status-pill{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--blue-soft); color:var(--blue-dark); padding:10px 13px; border-radius:999px; font-weight:900}
.status-pill span{width:11px; height:11px; border-radius:99px; background:#ffc107; box-shadow:0 0 0 0 rgba(255,193,7,.65); animation:pulse 1.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(255,193,7,0)}}
.muted{color:var(--muted)}
code{background:var(--blue-soft); color:var(--blue-dark); padding:2px 7px; border-radius:8px}
.countdown{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0}
.countdown div{border:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--blue-soft)); border-radius:18px; padding:15px 8px; text-align:center}
.countdown strong{display:block; color:var(--blue); font-size:34px}
.countdown span{font-size:12px; color:var(--muted); font-weight:800; text-transform:uppercase}
.mini-note{background:var(--blue-dark); color:#fff; padding:17px; border-radius:18px; line-height:1.55}

.identity-band{background:#fff; border-block:4px solid var(--blue); box-shadow:0 10px 24px rgba(0,111,185,.08)}
.identity-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:22px 0}
.identity-grid div{padding:15px; border-left:4px solid var(--blue); background:var(--blue-soft); border-radius:16px}
.identity-grid small{display:block; color:var(--muted); font-weight:900; text-transform:uppercase}
.identity-grid strong,.identity-grid span{display:block}

.section{padding:78px 0}
.section-head{max-width:780px}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
.service-card{text-align:left; border:2px solid var(--line); background:#fff; border-radius:22px; padding:22px; cursor:pointer; transition:.22s ease; box-shadow:0 14px 35px rgba(0,111,185,.08)}
.service-card:hover,.service-card.active{border-color:var(--blue); transform:translateY(-4px); box-shadow:var(--shadow)}
.service-card span{color:var(--blue); font-weight:950}
.service-card h3{font-size:23px; margin:12px 0 8px}
.service-card p{color:var(--muted); margin:0}
.service-output{margin-top:18px; background:var(--blue-dark); color:#fff; border-radius:22px; padding:22px; font-size:18px; box-shadow:var(--shadow)}

.progress-section{background:linear-gradient(135deg,var(--blue-dark),var(--blue)); color:#fff; padding:78px 0; position:relative; overflow:hidden}
.progress-section h2{color:#fff}
.progress-layout{display:grid; grid-template-columns:.8fr 1.1fr; gap:24px; align-items:center}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.step{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); border-radius:18px; padding:16px; min-height:120px}
.step b{display:grid; place-items:center; width:34px; height:34px; background:#fff; color:var(--blue); border-radius:999px; margin-bottom:14px}
.step.done{background:rgba(255,255,255,.22)}
.step.current{outline:3px solid #fff}
.progress-card{grid-column:1/-1; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.34); border-radius:22px; padding:22px}
.progress-label{display:flex; justify-content:space-between; margin-bottom:10px; font-weight:900}
.progress-track{height:14px; background:rgba(255,255,255,.25); border-radius:99px; overflow:hidden}
.progress-track span{display:block; width:0%; height:100%; background:#fff; border-radius:99px; transition:1s ease}

.contact-section{display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; align-items:start}
.contact-info,.contact-form{background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.contact-info ul{padding:0; list-style:none; display:grid; gap:10px}
.contact-form{display:grid; grid-template-columns:repeat(2,1fr); gap:15px}
.contact-form label{display:grid; gap:7px; color:var(--blue-dark); font-weight:900}
.contact-form input,.contact-form select,.contact-form textarea{width:100%; border:2px solid var(--line); border-radius:14px; padding:13px 14px; font:inherit; outline:none; background:#fff}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,111,185,.12)}
.full{grid-column:1/-1}
.form-status{margin:0; color:var(--blue); font-weight:900}

.to-top{position:fixed; right:18px; bottom:18px; width:48px; height:48px; border-radius:999px; border:0; color:#fff; background:var(--blue); font-size:22px; box-shadow:var(--shadow); cursor:pointer; opacity:0; visibility:hidden; transition:.2s ease; z-index:50}
.to-top.show{opacity:1; visibility:visible}
.footer{background:#fff; border-top:4px solid var(--blue); padding:24px 0}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer p{margin:.25rem 0 0; color:var(--muted)}

.reveal{opacity:0; transform:translateY(22px); transition:.65s ease}
.reveal.visible{opacity:1; transform:none}

@media(max-width:930px){
  .nav-toggle{display:block}
  nav{position:absolute; top:68px; left:0; right:0; background:#fff; border-bottom:2px solid var(--blue); padding:14px 17px; flex-direction:column; align-items:stretch; display:none}
  nav.open{display:flex}
  .hero,.progress-layout,.contact-section{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .identity-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .brand img{width:112px}
  h1{font-size:40px}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .service-grid,.steps,.contact-form{grid-template-columns:1fr}
  .hero-actions,.form-actions{flex-direction:column}
  .btn{width:100%}
}