/* ===== Header / layout base ============================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.22);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* HEADER más fino y con transición rápida */
.site-header .container{
  padding-block:4px;                /* ↓ mucho más bajo */
  padding-inline:24px;
  transition: padding .12s ease, background .12s ease, border-color .12s ease;
}
/* Aún más bajo cuando se scrollea */
.site-header.is-scrolled .container{ padding-block:3px; }

/* El logo ya no infla el header */
.site-header .brand img{
  height:44px;                      /* ↓ clave: antes 120px */
  width:auto; display:block;
}
@media (max-width:780px){
  .site-header .brand img{ height:40px; }
}

/* Nav (desktop) */
.site-nav ul{ display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0; }
.site-nav a{ color:var(--text); line-height:1.1; }

/* Botón hamburguesa (mobile) */
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav-toggle-bar{ display:block; width:28px; height:2px; background:var(--text); position:relative; }
.nav-toggle-bar::before,.nav-toggle-bar::after{ content:""; position:absolute; left:0; width:28px; height:2px; background:var(--text); }
.nav-toggle-bar::before{ top:-8px } .nav-toggle-bar::after{ top:8px }

/* ===== Hero / secciones ================================================== */
.hero{
  background:linear-gradient(180deg,rgba(255,122,0,.10),transparent);
  padding:12px 0 8px;              /* ↓ menos padding arriba */
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(600px 300px at 10% 10%, rgba(255,122,0,.12), transparent 60%),
    radial-gradient(500px 400px at 90% 30%, rgba(245,158,11,.10), transparent 60%);
  filter: blur(20px); animation: floatGlow 12s linear infinite alternate; pointer-events:none;
}
@keyframes floatGlow{ 0%{transform:translate3d(0,0,0) rotate(0deg)} 100%{transform:translate3d(-4%,2%,0) rotate(6deg)} }
.hero::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,122,0,.7), transparent);
  filter: drop-shadow(0 0 22px rgba(255,122,0,.45));
}
#fx-canvas{ position:absolute; inset:0; z-index:0; opacity:.7; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; }

.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.bullets{ margin:16px 0 0 16px; }
.bullets li{ margin:4px 0; }

/* ===== Grillas y cards =================================================== */
.grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.25); }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc img,.card > img{ width:48px; height:48px; margin-bottom:8px; }

/* “Glass / neon” utilidades */
.glass{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); backdrop-filter:blur(8px); border:1px solid var(--line); }
.card.glass{ box-shadow:0 12px 48px rgba(0,0,0,.25); }
.neon{ position:relative; }
.neon::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(90deg, rgba(255,122,0,.9), rgba(245,158,11,.7), rgba(255,122,0,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.6;
}

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-align:center; }
.stat .num{ display:block; font-size:28px; font-weight:700; color:var(--color-primario); }
.stat small{ color:var(--muted); }

/* ===== Footer ============================================================ */
.site-footer{ margin-top:40px; border-top:1px solid var(--line); background:rgba(0,0,0,.08); }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-top:8px; }
.ft-links{ list-style:none; margin:0; padding:0; }
.ft-links li{ margin:6px 0; }
.footer-copy{ border-top:1px solid var(--line); padding-top:10px; margin-top:10px; }

/* ===== Formularios / toast ============================================== */
.form-row{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
input,textarea{ background:transparent; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px; }
.toast{ position:fixed; right:16px; bottom:16px; background:#22c55e; color:#111; padding:12px 14px; border-radius:8px; box-shadow:var(--shadow); }

/* ===== Utilidades ======================================================== */
.mt{ margin-top:24px; }

/* ===== Responsive ======================================================== */
@media (max-width: 1200px){
  .grid-6{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 780px){
  .hero-inner{ grid-template-columns:1fr; }
  .grid-6{ grid-template-columns:repeat(2,1fr); }
  .card-grid{ grid-template-columns:1fr; }

  /* Menú desplegable compacto */
  .site-nav ul{
    display:none; flex-direction:column; gap:10px;
    background:var(--card); border:1px solid var(--line);
    position:absolute; right:16px; top:46px;
    padding:10px 12px; border-radius:10px;
  }
  .nav-toggle{ display:block; }
}