/* ==========================================================================
   dato luminoso - barra de navegacion superior (barra-navegacion.css)
   ========================================================================== */

/* ESTRUCTURA GENERAL DE LA BARRA */
.barra-superior {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: var(--altura-barra-superior);
  background-color: var(--color-fondo-base);
  border-bottom: 1px solid var(--color-fondo-gris-tarjetas);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease;
}

/* Al bajar: efecto cristalino (translúcido con desenfoque) */
.barra-superior.cristal {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: color-mix(in srgb, var(--color-texto-negro) 8%, transparent);
}

/* Se esconde al bajar y reaparece al subir */
.barra-superior.oculta {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .barra-superior { transition: none; }
}

.contenedor-barra {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Reserva el espacio vertical de la barra fija para no tapar la portada */
#contenedor-navegacion {
  display: block;
  width: 100%;
  height: var(--altura-barra-superior);
}

/* LOGOTIPO */
.identidad-marca {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  z-index: 9992;
}

.logo-marca {
  height: var(--altura-logotipo-barra, 38px);
  width: auto;
  display: block;
}

/* PANEL EN ESCRITORIO */
.panel-navegacion-movil {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

.menu-contenedor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  z-index: 9991;
}

.menu-navegacion {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.enlace-navegacion {
  font-family: var(--fuente-principal);
  font-size: var(--tamano-menu-navegacion);
  font-weight: 600;
  color: var(--color-texto-negro);
  text-transform: lowercase;
  text-decoration: none;
  letter-spacing: 0.2px;
  line-height: 1;
  transition: var(--transicion-suave);
}

.enlace-navegacion:hover {
  color: var(--color-principal-solido);
}

/* REDES SOCIALES */
.redes-sociales {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  z-index: 9992;
}

.enlace-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tamano-icono-red);
  height: var(--tamano-icono-red);
  color: var(--color-iconos-redes);
  text-decoration: none;
  transition: var(--transicion-suave);
}

.enlace-red svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

.enlace-red:hover {
  color: var(--color-principal-solido);
  transform: scale(1.15);
}

/* 2. BOTÓN HAMBURGUESA FLOTANTE (FIJO EN ESQUINA SUPERIOR DERECHA) */
.boton-hamburguesa {
  display: none;
  position: fixed !important;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 100000 !important; /* Capa más alta para recibir clics siempre */
  flex-direction: column;
  justify-content: space-between;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
}

.linea-hamburguesa {
  width: 100%;
  height: 3px;
  background-color: var(--color-texto-negro);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none !important;
}

/* 3. TELÓN DE FONDO (POR DEBAJO DE LA GAVETA BLANCA) */
.telon-menu {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 99990 !important; /* Menor que la gaveta (99995) */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.telon-menu.activo {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   VERSIÓN MÓVIL
   ========================================================================== */
@media (max-width: 860px) {
  .contenedor-barra {
    padding: 0 20px;
  }

  /* Mostrar botón hamburguesa */
  .boton-hamburguesa {
    display: flex !important;
  }

  /* Animación a 'X' */
  .boton-hamburguesa.activo .linea-hamburguesa:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .boton-hamburguesa.activo .linea-hamburguesa:nth-child(2) {
    opacity: 0;
  }
  .boton-hamburguesa.activo .linea-hamburguesa:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  /* GAVETA LATERAL BLANCA (POR ENCIMA DEL TELÓN) */
  .panel-navegacion-movil {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 290px !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important; /* Blanco sólido garantizado */
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.25) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: calc(var(--altura-barra-superior, 70px) + 20px) 30px max(24px, env(safe-area-inset-bottom)) 30px !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 99995 !important; /* Mayor que el telón (99990) y menor que el botón (100000) */
    overflow-y: auto !important;
  }

  /* Sin sombra mientras está cerrado (evitaba una franja gris en el borde izquierdo) */
  .panel-navegacion-movil:not(.activo) {
    box-shadow: none !important;
  }

  .panel-navegacion-movil.activo {
    transform: translateX(0) !important;
  }

  .menu-contenedor {
    position: static;
    transform: none;
    width: 100%;
  }

  .menu-navegacion {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    width: 100%;
  }

  .enlace-navegacion {
    font-size: var(--tamano-menu-navegacion);
    font-weight: 700;
  }

  .redes-sociales {
    display: flex;
    justify-content: flex-start;
    gap: 22px;
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--color-fondo-gris-tarjetas);
    height: auto;
  }
}