:root{
  --bg: #0b1220;
  --card: #0f172a;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --primary: #0ea5e9;
  --accent: #22c55e;
  --border: #1e293b;
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --container: 1150px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; background:linear-gradient(180deg, #0b1220 0%, #0b1220 50%, #0d1022 100%); color:var(--text)}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:999px; border:1px solid transparent; font-weight:600; transition:.2s ease; cursor:pointer; white-space:nowrap}
.btn-primary{background:var(--primary); color:#001018; box-shadow:0 10px 25px rgba(14,165,233,.25)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; border-color:#1e293b; color:var(--text)}
.btn-ghost:hover{background:#0b1a2a}
.badge{display:none}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(10px); background:rgba(11,18,32,.6); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:.75rem}
.logo{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:radial-gradient(120% 120% at 30% 30%, #38bdf8 0%, #0ea5e9 60%, #0284c7 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.logo svg{width:22px; height:22px; color:white}
.brand b{font-size:1.05rem; letter-spacing:.2px}
nav ul{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
nav a{padding:.55rem .8rem; border-radius:10px; color:var(--muted)}
nav a:hover, nav a:focus{color:var(--text); background:#0b1a2a}
.menu-toggle{display:none; background:none; border:0; color:var(--text)}

@media (max-width: 860px){
  nav ul{position:fixed; inset:68px 0 auto 0; background:rgba(11,18,32,.95); padding:1rem; border-bottom:1px solid var(--border); display:none; flex-direction:column}
  nav ul.open{display:flex}
  .menu-toggle{display:inline-flex}
}

/* Hero */
.hero{padding:96px 0 72px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns: 1.4fr .8fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(32px, 5vw, 52px); line-height:1.05; margin:0 0 12px}
.hero p{color:var(--muted); font-size:1.1rem; margin:0 0 24px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.hero-art{position:relative}

.glass{position:absolute; inset:auto 0 0 auto; width:62%; height:62%; border-radius:20px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); transform:rotate(-6deg); box-shadow:0 30px 50px rgba(0,0,0,.35)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px}
.stat{padding:16px; border:1px solid var(--border); background:rgba(2,6,23,.45); border-radius:12px; text-align:center}
.stat b{font-size:1.25rem}
.stat span{display:block; color:var(--muted); font-size:.9rem}
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .hero{padding:72px 0}
  .glass{display:none}
}

/* Secciones */
section{padding:48px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px}
.section-head h2{margin:0; font-size:clamp(26px, 3.2vw, 36px)}
.section-head p{color:var(--muted); max-width:650px; margin:0}
.about{display:grid; grid-template-columns: 1fr 1fr; gap:28px}
.about .panel{padding:28px}
.list{display:grid; gap:10px; margin:16px 0 0}
.list li{list-style:none; display:flex; gap:10px; align-items:flex-start}
.list svg{flex:0 0 20px}
/* Numerada con mismo ritmo visual */
.list-nums{counter-reset: step; margin:16px 0 0; display:grid; gap:10px}
.list-nums li{position:relative; display:flex; gap:10px; align-items:flex-start}
.list-nums li::before{
  counter-increment: step;
  content: counter(step);
  display:inline-flex;
  width:20px; height:20px;
  align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:.8rem; font-weight:700;
  color:var(--text);
  background:rgba(2,6,23,.45);
  flex:0 0 20px;
}
@media (max-width: 980px){
  .about{grid-template-columns:1fr}
}

/* Servicios */
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.service{padding:20px}
.service h3{margin:8px 0 6px; font-size:1.1rem}
.service p{margin:0; color:var(--muted)}
.service .cta{margin-top:14px}
@media (max-width: 980px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}

/* Contacto */
.contact{display:grid; grid-template-columns: 1.4fr .8fr; gap:24px}
.contact form{display:block}
.input{padding:14px 16px; background:#0b1426; border:1px solid var(--border); border-radius:12px; color:var(--text)}
textarea.input{min-height:120px; resize:vertical}
.contact .aside{padding:20px}
.form-grid{padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid textarea{grid-column:1 / -1}
.form-actions{grid-column:1 / -1}
@media (max-width: 980px){
  .contact{grid-template-columns:1fr}
}

/* Footer */
footer{padding:28px 0; border-top:1px solid var(--border); background:rgba(2,6,23,.45)}
.footer-grid{display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:center}
.social{display:flex; gap:10px}
.social a{display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:12px; border:none}
.social a:hover{background:#0b1a2a}
.footer-meta{color:var(--muted); font-size:.95rem; display:flex; gap:8px; flex-wrap:wrap}
.footer-meta .contact-line{display:inline-flex; gap:6px}
@media (max-width: 720px){
  .footer-grid{grid-template-columns:1fr; text-align:left; align-items:start}
  .social{justify-content:flex-start}
  footer .brand{flex-direction:column; align-items:flex-start; gap:8px}
  .footer-meta{flex-direction:column; align-items:flex-start}
}

/* Botón flotante WhatsApp — solo icono */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:60}
.wa-float a{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; background:var(--accent); color:#052210; font-weight:700; box-shadow:0 12px 24px rgba(34,197,94,.35)}

/* Accesibilidad: focus visible */
:where(a, button, input, textarea):focus-visible{outline:2px solid var(--primary); outline-offset:2px}

/* Helpers */
.center{text-align:center}
.mt-6{margin-top:1.5rem}

@media (max-width: 768px){
  section{padding:32px 0}
  .section-head{flex-direction:column; align-items:flex-start; gap:10px}
  .form-grid{grid-template-columns:1fr}
  .list, .list-nums{padding-left:0; margin-left:0}
  .list li, .list-nums li{justify-content:flex-start; text-align:left}
}

/* Hero proportion tweaks */
@media (min-width: 981px){
  .hero-grid{grid-template-columns: 1.25fr .75fr}
  .hero-art .card{max-width:520px; width:100%; height:auto}
}

/* Ajuste de proporción del hero: imagen más contenida frente al texto */
.hero-art img.card{width:90%; max-width:520px; margin-left:auto}
@media (max-width: 980px){
  .hero-art img.card{width:100%; max-width:none; margin:0}
}

/* Revert hero image proportions to intrinsic size */
.hero-art .card{aspect-ratio:auto; max-height:none; height:auto; object-fit:initial}

/* Icon button borders */
.social a{border:1.5px solid var(--border)}
.wa-float a{border:1.5px solid var(--border)}