/* =========================================================
   RESET
========================================================= */
*{
  -webkit-tap-highlight-color: transparent;
}

.menu,
.menu *{
  box-sizing: border-box;
}

/* =========================================================
   VARIABLES
========================================================= */
:root{
  --menu-height: 64px;
}

/* =========================================================
   MENÚ BASE
========================================================= */
.menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--menu-height);

  padding: 0 16px; /* 👈 sacamos padding vertical */
  display: flex;
  align-items: center;
  justify-content: space-between;
  

  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 0px solid rgba(0,0,0,0.35);
}

/* =========================================================
   LOGO
========================================================= */
.menu .logo img{
  height: 32px;
}

/* =========================================================
   LINKS
========================================================= */
.menu .links{
  display: flex;
  gap: 12px;
}

.menu .links a{
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  padding: 0 12px;
  color: #fff;
  transition: color .3s ease;
}

/* Líneas entre links */
.menu .links a:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.5);
}

/* Hover */
.menu .links a::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #000;
  transition: all .3s ease;
}

.menu .links a:hover::before{
  left: 0;
  width: 100%;
}

.menu .links a:hover{
  color: #000;
}

/* =========================================================
   HAMBURGUESA
========================================================= */
.hamburger{
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}

.hamburger span{
  width: 24px;
  height: 2px;
  background: white;
  transition: all .3s ease;
}

/* Activa */
.hamburger.active span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
  opacity: 0;
}

.hamburger.active span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   BUSCADOR
========================================================= */
.search-box{
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  margin-bottom: 30px;
  margin-left: 4px;
  margin-right: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .35s ease;
}

.menu .links.open .search-box{
  opacity: 1;
  transform: translateY(0);
}

.search-box input{
  width: 100%;
  padding: 15px 18px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  background: #1a1a1a;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.search-box input::placeholder{
  color: #aaa;
}

/* =========================================================
   HERO FIX
========================================================= */
.hero,
.hero *,
.hero-interno,
.hero-interno *{
  pointer-events: none;
}

.hero .overlay{
  z-index: 0;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 768px){

  .hamburger{
    display: flex;
    color: whitesmoke;
  }

  .menu .links{
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    padding-top: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    transform: translateX(100%);
    transition: transform .35s ease-out;
    z-index: 0000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
    .menu .links{
  background: transparent;
  backdrop-filter: none;
}
    

  .menu .links.open{
    transform: translateX(0);
  }

  .menu .links a{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    color: #fff !important;
    font-size: 22px;
    margin: 8px 0;
  }

  .menu .links a:not(:last-child)::after{
    display: none;
  }

  .menu .close{
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 32px;
    color: #fff;
    cursor: pointer;
  }
}

/* =========================================================
   DESKTOP
========================================================= */
@media (min-width: 769px){

  .menu{
    height: 64px;
    padding: 0 16px;
  }

  .menu .links{
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  .menu .links a{
    display: flex;
    align-items: center;
    color: #fff !important;
  }

  .menu .links a:hover{
    color: #fff !important;
    opacity: 0.75;
  }

  .menu .links a:not(:last-child)::after{
    background: rgba(255,255,255,0.5);
  }

  .menu .close{
    display: none;
  }

  .search-box{
    opacity: 1 !important;
    transform: translateY(0) !important;
    position: relative;
    margin-bottom: 0;
  }

  .search-box input{
    width: 220px;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    background: #fff;
    color: #000;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  }

  .search-box input::placeholder{
    color: #666;
  }
}

/* =========================================================
   HOME
========================================================= */
body.home{
  padding-top: 0;
}

body.home .menu{
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  background: rgba(0,0,0,0.18);
}

/* =========================================================
   INTERNAS
========================================================= */
body:not(.home){
  padding-top: var(--menu-height);
}

body:not(.home) header{
  position: relative;
  background: transparent !important;
}

body:not(.home) header::after{
  display: none;
}

body:not(.home) header .nav{
  height: auto;
  padding: 12px 24px;
}

body:not(.home) .menu{
  background: #transparent !important;
  backdrop-filter: none;
}

body:not(.home) .menu .links a{
  color: #000;
}

body:not(.home) .menu .links a:not(:last-child)::after{
  background: rgba(255,255,255,8);
}

body:not(.home) .hamburger span{
  background: #000;
}

/* =========================================================
   MENÚ LIGHT
========================================================= */
.menu.light{
  background: rgba(255,255,255,0);
  backdrop-filter: blur(6px);
}

.menu.light .links a{
  color: #000;
}

.menu.light .links a:not(:last-child)::after{
  background: rgba(0,0,0,.3);
}

.menu.light .hamburger span{
  background: #fff;
  box-shadow: 0 0 1px rgba(0,0,0,0.4);
}




/* OVERLAY VIDRIO MENÚ */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s ease;
  z-index: 15000;
}

/* ACTIVO */
.menu-overlay.active{
  opacity: 1;
  pointer-events: auto;
}

.menu{
  z-index: 14000;
}
.menu-overlay{
  z-index: 15000;
}
.hamburger{
  position: relative;
  z-index: 21001;
}

.menu.menu-open .hamburger{
  pointer-events: auto;
}
/* OCULTAR BARRA SUPERIOR CUANDO MENÚ ESTÁ ABIERTO */
.menu.menu-open{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* Blur y animación estilo iOS */
.app-layer {
  transition: filter .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}

.app-layer.menu-open {
  filter: blur(18px);
  transform: scale(0.98);
}

.menu-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: saturate(160%);
  -webkit-backdrop-filter: saturate(160%);
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  z-index: 20000;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 120px;
}

.menu-panel.open {
  transform: translateX(0);
}
/* ================================
   PANEL DESPLEGABLE (NUEVO)
================================ */

.menu-panel{
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* LINKS */
.menu-panel a{
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  animation: menuItemIn .45s ease forwards;
}

.menu-panel.open a{
  opacity: 1;
  transform: translateY(0);
}

/* delay escalonado */
.menu-panel a:nth-child(2){ animation-delay:.05s }
.menu-panel a:nth-child(3){ animation-delay:.10s }
.menu-panel a:nth-child(4){ animation-delay:.15s }
.menu-panel a:nth-child(5){ animation-delay:.20s }

@keyframes menuItemIn{
  to{
    opacity:1;
    transform: translateY(0);
  }
}
.menu-panel.open .search-box{
  opacity: 1;
  transform: translateY(0);
}
/* ===============================
   HAMBURGUESA FLOTANTE
================================ */

.hamburger-float{
  position: fixed;
  top: 10px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 30000;
}

.hamburger-float span{
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  transition: all .35s cubic-bezier(.22,.61,.36,1);
}

/* CRUZ */
.hamburger-float.active span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

.hamburger-float.active span:nth-child(2){
  opacity: 0;
}

.hamburger-float.active span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}
/* OCULTA POR DEFECTO */
.hamburger-float{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition:
    opacity .35s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1);
}
/* SE MUESTRA CUANDO EL MENÚ ESTÁ ABIERTO */
.menu-open ~ .hamburger-float{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
/* ===== MENÚ GLASS OSCURO EN PÁGINAS INTERNAS ===== */
body:not(.home) .menu{
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* EVITA DELAY AL CERRAR MENÚ */
.menu{
  transition: none;
}
.menu{
  transition: background 0s ease, backdrop-filter .25s ease;
}

.app-layer:not(.menu-open) .menu{
  transition-delay: 0s;
}
/* CUANDO SE CIERRA EL MENÚ, EL BLUR SE CORTA INMEDIATO */
.app-layer:not(.menu-open){
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.home) .menu{
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.menu{
  position: fixed;
  z-index: 1000;
}

.app-layer{
  position: relative;
  z-index: 1;
}

#menuOverlay{
  z-index: 2000;
}

#menuPanel{
  z-index: 3000;
}

.hamburger-float{
  z-index: 4000;
}
#header{
  position: fixed;
  z-index: 9999;
}
@media (min-width: 769px){
  .menu-links{
    display: flex;
    gap: 25px;
  }
}
/* DESKTOP */
@media (min-width: 769px){
  .search-desktop{
    display: block;
  }

  .menu-panel .search-box{
    display: none;
  }
}

/* MOBILE */
@media (max-width: 768px){
  .search-desktop{
    display: none;
  }

  .menu-panel .search-box{
    display: block;
  }
}

/* =========================
   BUSCADOR DESKTOP CENTRADO
========================= */
@media (min-width: 769px){
  .menu{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .menu .logo{
    grid-column: 1;
  }

  .menu .search-desktop{
    grid-column: 2;
    justify-self: center;
  }

  .menu .links,
  .menu .hamburger{
    grid-column: 3;
  }
}

/* =========================
   BUSCADOR DARK
========================= */
.search-desktop input{
  background: #111;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.search-desktop input::placeholder{
  color: rgba(255,255,255,0.55);
}

/* =========================
   BUSCADOR CLARO SOLO confirmar.html
========================= */
body.page-confirmar .search-desktop input{
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

body.page-confirmar .search-desktop input::placeholder{
  color: #666;
}

/* =========================
   BUSCADOR ENTRE LOGO Y LINKS
========================= */
@media (min-width: 769px){
  .menu{
    display: flex;
    align-items: center;
  }

  .menu .search-desktop{
padding-top: 4px;
    margin-left: 32px;
    margin-right: 32px;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .menu .search-desktop input{
    width: 320px;
 height: 36px;
  }

 }

/* ===============================
   HEADER / MENU – PÁGINA PRODUCTO
   =============================== */

.page-producto .menu {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.page-producto .menu a {
  color: #111;
}

.page-producto .hamburger span {
  background: #111;
}