/* 🌐 GLOBAL CSS — Moonelectrica
   ─────────────────────────────────────────────────────────────────
   📦 Estructura:
   - Variables y tokens de diseño (🎨)
   - Reset y tipografía (🅰️)
   - Layouts, contenedores y utilidades (📐)
   - Componentes base: header, nav, botones, cards, footer (🧩)
   - Responsivo (📱)
   ───────────────────────────────────────────────────────────────── */

:root{
  /* 🎨 Paleta de color */
  --brand: #0ea5e9;       /* sky-500 */
  --brand-600: #0284c7;   /* sky-600 */
  --accent: #f59e0b;      /* amber-500 */
  --ink: #0f172a;         /* slate-900 */
  --ink-2: #1e293b;       /* slate-800 */
  --muted: #475569;       /* slate-600 */
  --line: #e2e8f0;        /* slate-200 */
  --bg: #f8fafc;          /* slate-50 */
  --white: #ffffff;
  --ok: #22c55e;
  --danger: #ef4444;
  --shadow: 0 10px 30px rgba(2,8,23,.08);
  --radius: 18px;
}

/* 🧼 Reset mínimo y tipografía */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* 🧭 Header & navegación */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.logo{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:800;
  background: radial-gradient(120% 120% at 30% 20%, var(--brand) 0%, var(--brand-600) 60%, #0c4a6e 100%);
  box-shadow: 0 6px 20px rgba(2,132,199,.35);
}
nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
nav a{padding:10px 12px; border-radius:10px; color:var(--ink-2); font-weight:600}
nav a:hover, nav a.active{background:var(--line)}
.nav-actions{display:flex; align-items:center; gap:10px}

/* 🔘 Botones */
.btn, .cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); font-weight:700; border:0; cursor:pointer
}
.cta{background:var(--brand); color:#fff}
.cta.secondary{background:#0f172a; color:#fff}
.btn{background:#fff; color:var(--ink-2); border:1px solid var(--line)}

/* 🧱 Card & utilidades */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.list{padding-left:18px}
.tag{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eff6ff; color:#075985; font-weight:600; font-size:12px; border:1px solid #dbeafe}

/* 🦶 Footer */
footer{padding:30px 0; border-top:1px solid var(--line); color:var(--muted)}
.foot{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}

/* 📱 Responsive */
@media (max-width: 960px){
  nav ul{display:none}
  .grid.cols-3, .grid.cols-2{grid-template-columns:1fr}
}
/* === Header responsive mejorado === */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}

/* Brand */
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.logo-frame{
  display:inline-grid; place-items:center;
  padding:6px 10px; border-radius:14px; background:#fff;
  border:1px solid color-mix(in oklab, var(--line) 70%, #fff 10%);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.brand .logo{height:40px; width:auto; display:block}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-top{font-weight:800; font-size:18px; letter-spacing:.2px; color:var(--ink-2)}
.brand-bottom{font-weight:600; font-size:13.5px; color:var(--muted)}

/* Nav desktop */
.main-nav{display:flex; align-items:center; gap:16px}
.main-nav .menu{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.main-nav .menu a{
  padding:10px 12px; border-radius:10px; color:var(--ink-2); font-weight:600; text-decoration:none
}
.main-nav .menu a:hover, .main-nav .menu a.active{background:var(--line)}
.nav-actions{display:flex; align-items:center; gap:10px}

/* Botones */
.icon-btn{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:#fff; color:var(--ink-2); border:1px solid var(--line)
}
.cta{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); font-weight:700; border:0; cursor:pointer; background:var(--brand); color:#fff}

/* Hamburguesa */
.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  background:#fff; border:1px solid var(--line); position:relative
}
.burger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--ink-2); border-radius:1px;
  transition:transform .2s ease, opacity .2s ease
}
.burger span:nth-child(1){ top:13px }
.burger span:nth-child(2){ top:20px }
.burger span:nth-child(3){ top:27px }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.burger.is-open span:nth-child(2){ opacity:0 }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* Panel móvil (sheet) */
.mobile-menu{ position:fixed; inset:0; display:none }
.mobile-menu.open{ display:block }
.mobile-menu .backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.45) }
.mobile-menu .sheet{
  position:absolute; top:0; right:0; bottom:0;
  width:min(92vw, 360px); background:#fff; border-left:1px solid var(--line);
  padding:18px; display:flex; flex-direction:column; gap:12px;
  transform:translateX(100%); transition:transform .25s ease
}
.mobile-menu.open .sheet{ transform:translateX(0) }
.mobile-links{ list-style:none; padding:0; margin:8px 0; display:grid; gap:4px }
.mobile-links a{ display:block; padding:12px 10px; border-radius:12px; color:var(--ink); font-weight:700; text-decoration:none }
.mobile-links a:hover, .mobile-links a.active{ background:var(--line) }
.mobile-actions{ margin-top:auto; display:grid; gap:10px }
.mobile-actions .row{ display:flex; gap:8px }
.mobile-actions .icon-btn{ flex:1 }

/* Bloqueo scroll cuando el menú está abierto */
body.menu-open{ overflow:hidden }

/* Breakpoint */
@media (max-width: 960px){
  .main-nav .menu{ display:none }
  .nav-actions{ display:none }     /* redes/CTA se ven dentro del panel móvil */
  .burger{ display:inline-block }  /* mostrar hamburguesa */
}
/* Aseguro que el panel no interfiera en desktop */
@media (min-width: 961px){
  .mobile-menu{ display:none !important }
}

/* --- FIX overlay + visibilidad en mobile --- */
.site-header{ z-index: 1000; }                 /* header por encima del contenido */
.mobile-menu{ position: fixed; inset: 0; z-index: 2000; }  /* panel por encima del header */
.mobile-menu .sheet{ will-change: transform; } /* anima suave */

@media (max-width: 960px){
  /* Fuerzo que en mobile no se vea el menú desktop ni las acciones */
  .site-header .main-nav .menu,
  .site-header .nav-actions{ display: none !important; }
}

/* --- FIX específico: página de Servicios --- */
@media (max-width: 960px){
  header .main-nav .menu{ display: none !important; }
}