/* ===== Tokens ===== */
:root{
  --bg: #ffffff;
  --bg-strong: rgba(255,255,255,.72);
  --text: #0a0a0a;
  --muted: #5e5e5e;
  --border: #eaeaea;
  --brand: #0f0f0f;
  --brand-inv: #ffffff;
  --shadow: 0 2px 14px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0b;
    --bg-strong: rgba(12,12,12,.65);
    --text:#f2f2f2;
    --muted:#bdbdbd;
    --border:#2a2a2a;
    --brand:#ffffff;
    --brand-inv:#0b0b0b;
    --shadow: 0 2px 14px rgba(0,0,0,.35);
  }
}

/* ===== Util ===== */
.container{max-width:1200px;margin-inline:auto;padding-inline:16px;}
html{scroll-behavior:smooth}
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:16px;top:16px;z-index:1000;width:auto;height:auto;
  background:#000;color:#fff;padding:.6rem .9rem;border-radius:.75rem;
}

/* ===== Header/Nav ===== */
/* ===== Header/Nav ===== */
.site-header{
  position:sticky;top:0;z-index:900;
  background:var(--bg);                 /* ← fondo sólido desde el inicio */
  border-bottom:1px solid var(--border);/* ← separación clara del héroe   */
  transition:box-shadow .2s ease, backdrop-filter .2s ease, border-color .2s ease;
}

.site-header.scrolled{
  /* fondo ya es sólido; añadimos profundidad al hacer scroll */
  box-shadow: var(--shadow);
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
}

.nav{
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand__img{
  height:80px; /* controla tamaño del logo grande que tienes */
  max-height:80px;width:auto;display:block;object-fit:contain;
}
@media (min-width:1024px){ .brand__img{ height:44px; max-height:44px; } }
.brand__txt{
  display:none;color:var(--text);
  font:600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  letter-spacing:.2px;
}
@media (min-width:640px){ .brand__txt{display:inline-block;} }

/* Menú Desktop */
.menu{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;}
.menu--desktop{display:none;}
@media (min-width:768px){ .menu--desktop{display:flex;} }

.nav-link{
  display:inline-block;padding:.55rem .7rem;border-radius:.75rem;
  color:var(--text);                    /* ← más contraste desde el inicio */
  text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.2px;
  transition:color .15s ease, background .15s ease, transform .15s ease;
}
.nav-link:hover{ color:var(--text); background:rgba(127,127,127,.08); }
.nav-link.active{ color:var(--text); }


/* CTA */
.btn-cta{
  display:none;align-items:center;gap:8px;
  padding:.55rem .9rem;border-radius:1rem;border:1px solid var(--border);
  background:var(--brand);color:var(--brand-inv);text-decoration:none;
  font-weight:700;font-size:13.5px;letter-spacing:.2px;box-shadow:var(--shadow);
  transform:translateZ(0);transition:transform .12s ease, opacity .2s ease;
}
.btn-cta:hover{ transform:scale(1.02); }
.btn-cta:active{ transform:scale(.99); }
.btn-cta .icon{width:16px;height:16px}
@media (min-width:768px){ .btn-cta{display:inline-flex;} }

/* Hamburger */
.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;
}
@media (min-width:768px){ .hamburger{display:none;} }
.hamburger__bar{
  width:18px;height:2px;background:currentColor;border-radius:2px;display:block;position:relative;
}
.hamburger__bar + .hamburger__bar{margin-top:4px}

/* Overlay */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  z-index:880;opacity:0;transition:opacity .2s ease;
}
.overlay.show{opacity:1;}

/* Panel móvil */
.panel{
  position:fixed;top:0;right:0;height:100dvh;width:min(420px,85%);z-index:890;
  background:var(--bg);color:var(--text);box-shadow: -8px 0 24px rgba(0,0,0,.2);
  transform:translateX(100%);transition:transform .2s ease;
  display:flex;flex-direction:column;
}
.panel.show{ transform:translateX(0); }
.panel__head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px;border-bottom:1px solid var(--border);}
.close{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--border);
  background:transparent;color:var(--text);font-size:26px;line-height:1;cursor:pointer;
}
.panel__menu{list-style:none;margin:8px 8px 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.panel__menu .nav-link{display:block;padding:.9rem .9rem;font-size:16px;border-radius:12px}
.panel__menu .nav-link:hover{background:rgba(127,127,127,.08)}
.panel__foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border)}
.foot__label{margin:0 0 8px 0;font-size:11px;letter-spacing:.25px;text-transform:uppercase;color:var(--muted)}
.foot__img{height:28px;width:auto;border-radius:4px;display:block}

/* Garantiza tamaño correcto de iconos en la navbar (por si hay reglas globales de svg) */
.site-header svg{ width:24px !important; height:24px !important; }
.site-header .btn-cta .icon{ width:16px !important; height:16px !important; }
/* ===== Colores elegantes de los enlaces de navegación ===== */
.site-header .nav-link {
  color: #1a1a1a !important;    /* gris carbón, elegante y sofisticado */
  font-weight: 600;
}

.site-header .nav-link:hover {
  color: #006241 !important;    /* verde sofisticado (ej: Starbucks/Accenture style) */
}

.site-header .nav-link.active {
  color: #004d33 !important;    /* tono verde más oscuro para activo */
}