/* ===== HEADER / NAVBAR ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--ui-gray);
  border-bottom:1px solid var(--ui-border);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

/* 🔒 Evitar selección naranja de texto en todo el header */
.header,
.header *{
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

.nav{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  min-height:72px; 
}
.brand{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  text-decoration:none; 
}
.brand img{ height:110px; }
.brand .name{ 
  color:var(--ui-ink); 
  font-weight:800; 
  letter-spacing:.2px; 
}

/* ===== MENÚ PRINCIPAL DESKTOP ===== */
.menu{ 
  display:flex; 
  align-items:center; 
  gap:18px; 
}
.menu a{
  color:#3a3323; 
  font-weight:600; 
  padding:10px 12px;
  border-radius:10px; 
  transition:background .18s ease,color .18s ease;
}

/* Hover naranja */
.menu a:hover, 
.menu a:focus{
  background:var(--ui-gray-2);
  color:var(--accent-orange) !important;
}

/* Activo */
.menu a[aria-current="page"]{
  background:rgba(255,122,26,.10);
  color:var(--accent-orange) !important;
}
.menu a[aria-current="page"]:hover{
  background:rgba(255, 255, 255, 0.16);
  color:var(--accent-orange) !important;
}

/* CTA destacado */
.menu .cta{
  background:var(--accent-orange);
  color:#fff!important; 
  padding:10px 16px; 
  border-radius:12px; 
  font-weight:700;
  box-shadow:0 6px 18px rgba(255,122,26,.25);
  transition:background .2s ease,box-shadow .2s ease;
  cursor:pointer;
}
.menu .cta:hover{ 
  background:var(--accent-orange-2); 
  box-shadow:0 8px 22px rgba(255,122,26,.35); 
}

/* ===== BURGER PRO ===== */
.burger{ 
  display:none; 
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#ffffff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:0;
}

.burger span{ 
  display:block; 
  width:22px; 
  height:2px; 
  border-radius:999px; 
  background:var(--accent-orange); 
  margin:0; 
  transition:transform .2s ease, opacity .2s ease;
}

/* Animación a "X" */
body.nav-open .burger span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
body.nav-open .burger span:nth-child(2){
  opacity:0;
}
body.nav-open .burger span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* ===== OVERLAY + PANEL MÓVIL ===== */
.mobile-nav{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:999; /* MÁS ALTO QUE EL HEADER */
}

.mobile-nav__panel{
  position:absolute;
  top:0;
  right:0;
  width:80%;
  max-width:360px;
  height:100%;
  background:var(--surface, #ffffff);
  box-shadow:-12px 0 30px rgba(0,0,0,.18);
  padding:96px 24px 32px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transform:translateX(100%);
  transition:transform .25s ease;
  border-top-left-radius:24px;
  border-bottom-left-radius:24px;
}

/* Mostrar overlay + panel */
body.nav-open .mobile-nav{
  opacity:1;
  pointer-events:auto;
}
body.nav-open .mobile-nav__panel{
  transform:translateX(0);
}

/* Links del menú móvil */
.mobile-nav__link{
  font-size:1.1rem;
  font-weight:600;
  color:#1a1a1a;
  text-decoration:none;
  padding:8px 0;
}

/* CTA móvil */
.mobile-nav__cta{
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:999px;
  background:var(--accent-orange);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(255,122,26,.45);
}

/* Bloquear scroll cuando el menú está abierto */
body.nav-open{
  overflow:hidden;
}

/* ===== RESPONSIVE NAV ===== */
@media(max-width:980px){
  .menu{ display:none; }     /* ocultar menú desktop */
  .burger{ display:flex; }   /* mostrar hamburguesa */
}

@media(min-width:981px){
  .mobile-nav{ display:none; } /* ocultar menú móvil en desktop */
}