/**
 * Autorys - Header CSS
 * Developed by Autorys
 * https://autorys.com
 * sales@autorys.com
 */

:root{
  --blue:#0A84FF;
  --blue2:#0066CC;
  --bg:#0F1720;
  --panel:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --radius:16px;
  --max:1180px;

  --header-h:68px;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{text-decoration:none;color:inherit}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 16px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(15,23,32,.85);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}

.header-row{
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* ---------------- BRAND ---------------- */

.brand{
  display:flex;
  align-items:center;
  min-width:0;
}

.logo{
  display:block;
  height:44px;
  width:auto;
  max-width:260px;
}

/* ---------------- NAV (BASE) ---------------- */

.nav{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--muted);
}

.nav a:hover{color:var(--text)}

/* Language in nav */
.lang-switch{
  display:flex;
  gap:8px;
  align-items:center;
}

.lang-item{
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
  border:1px solid transparent;
  color:var(--muted);
  transition:all .15s ease;
}

.lang-item:hover{
  border-color:var(--border);
  background:var(--panel);
  color:var(--text);
}

.lang-item.active{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  border-color:transparent;
}

/* ---------------- HAMBURGER ---------------- */

.menu-toggle{
  display:none;              /* se activa en mobile */
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.menu-toggle:hover{background:var(--panel)}

.menu-line{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:2px;
}

/* ---------------- MOBILE BEHAVIOR ---------------- */

@media (max-width: 900px){

  /* muestra el botón hamburguesa */
  .menu-toggle{display:flex}

  /* el nav se convierte en panel desplegable */
  .nav{
    position:absolute;
    left:0;
    right:0;
    top:var(--header-h);
    z-index:60;

    /* apariencia panel */
    background:rgba(15,23,32,.96);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border);

    /* layout */
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;

    padding:14px 16px 16px;

    /* cerrado por defecto */
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;

    transition:opacity .15s ease, transform .15s ease;
  }

  /* cuando JS agrega nav-open */
  .nav.nav-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  /* links grandes en mobile */
  .nav > a{
    padding:12px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.04);
    color:var(--text);
  }

  .nav > a:hover{background:var(--panel)}

  /* lang en mobile: que baje abajo y wrap */
  .lang-switch{
    padding-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  /* opcional: evita “brincos” de logo */
  .logo{max-width:220px}

}

/* ---------------- DESKTOP REFINEMENT ---------------- */

@media (min-width: 901px){
  .nav{
    position:static;
    background:transparent;
    border:0;
    padding:0;
    opacity:1;
    transform:none;
    pointer-events:auto;
    flex-direction:row;
    align-items:center;
  }
}

/* ---------------- SCROLL LOCK (cuando menú abierto) ---------------- */

.nav-lock{
  overflow:hidden;
}
/* Hard guarantee for mobile menu visibility */
@media (max-width: 900px){
  header.site-header { position: sticky; top: 0; z-index: 9999; }
  header.site-header nav#primaryNav.nav{
    z-index: 99999;
    display: flex !important;
    visibility: visible;
  }
  header.site-header nav#primaryNav.nav{ opacity: 0; pointer-events: none; }
  header.site-header nav#primaryNav.nav.nav-open{ opacity: 1; pointer-events: auto; }
}