/* ========== Reset + tokens ========== */
:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --card:#ffffff;
  --primary:#2563eb; --primary-ink:#ffffff; --ring:#93c5fd;
  --border:#e5e7eb;
}
:root.dark{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --card:#0f172a;
  --primary:#38bdf8; --primary-ink:#0b1220; --ring:#22d3ee;
  --border:#1f2937;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
     background:var(--bg); color:var(--fg); line-height:1.55}

/* ========== Layout ========== */
.shell{width:min(1100px,92%);margin-inline:auto}
.bg-anim{position:fixed; inset:0; z-index:-1; opacity:.6}
.site-header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(8px);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 4vw; border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--bg), transparent 10%);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-gestalt{letter-spacing:.5px}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:inherit; text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.head-actions{display:flex; align-items:center; gap:.5rem}
.nav-toggle{display:none; padding:.45rem .65rem; border-radius:.75rem; border:1px solid var(--border); background:var(--card); color:inherit}
.theme-toggle{padding:.45rem .65rem; border-radius:.75rem; border:1px solid var(--border); background:var(--card); color:inherit}
@media (max-width: 820px){
  .nav{position:fixed; inset:auto 0 0 0; background:var(--bg); padding:1rem 4vw;
       display:grid; grid-auto-rows:min-content; gap:.75rem; transform:translateY(110%);
       transition:transform .25s ease; border-top:1px solid var(--border)}
  .nav.is-open{transform:translateY(0)}
  .nav-toggle{display:inline-block}
}

.hero{padding: clamp(2.5rem, 4vw, 4rem) 0}
.hero-grid{display:grid; gap:1rem; grid-template-columns:1.1fr .9fr}
@media (max-width: 960px){ .hero-grid{grid-template-columns:1fr} }
.hero-card{align-self:start}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:1rem; box-shadow:0 8px 24px rgba(2,6,23,.06);
}
.btn,.btn-ghost{
  display:inline-block; border-radius:999px; padding:.6rem 1rem; text-decoration:none;
  font-weight:600; border:1px solid transparent;
}
.btn{background:var(--primary); color:var(--primary-ink)}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{border-color:var(--border); color:inherit}
.btn-ghost:hover{background:color-mix(in oklab, var(--bg), var(--fg) 6%)}
.list-check{padding-left:1.1rem}
.list-check li{margin:.4rem 0}
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} }

/* ========== Servicios (con WebP) ========== */
.services { padding-block: clamp(2.5rem, 4vw, 4rem); }
.services h2 { text-align:center; font-size:clamp(1.6rem,2.5vw,2rem); margin-bottom:1.5rem }
.services-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2.5vw,1.5rem) }
.service-card{ grid-column:span 12; overflow:hidden; padding:0 }
@media (min-width: 720px){ .service-card{ grid-column:span 6 } }
@media (min-width:1024px){ .service-card{ grid-column:span 4 } }
.service-card .media{ aspect-ratio:16/9; overflow:hidden; background:#0f172a0d }
.service-card picture, .service-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease }
.service-card:hover img{ transform:scale(1.06) }
.service-card .content{ padding:1rem 1.25rem 1.25rem }
.service-card .content h3{ margin:.25rem 0 .35rem; color:var(--fg) }
.service-card .content p{ color:var(--muted) }

/* ========== Proyectos & CTA ========== */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem }
.grid .card{ grid-column:span 4 }
@media (max-width: 900px){ .grid .card{ grid-column:span 12 } }
.cta-band{ background:color-mix(in oklab, var(--primary), transparent 90%); }
.cta-band__in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem 0 }
.testi{ padding:1rem }
.testi p{ margin:.25rem 0 }

/* ========== Contacto & Footer ========== */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:1rem }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr } }
.form label{ display:block; margin:.5rem 0 }
.form input,.form textarea{
  width:100%; padding:.65rem .75rem; border-radius:.6rem;
  border:1px solid var(--border); background:var(--bg); color:inherit
}
.float-actions{ position:fixed; right:1rem; bottom:1rem; display:flex; gap:.5rem; z-index:50 }
.float-actions a{ text-decoration:none; padding:.6rem .9rem; border-radius:999px; border:1px solid var(--border); background:var(--card); color:inherit }
.site-footer{ text-align:center; padding:1.25rem 4vw; border-top:1px solid var(--border); margin-top:2rem }