/* Marco fijo: menú superior + barra lateral derecha */

.menu {
  position: fixed;
  top: 0; left: 0; right: var(--marco);
  height: var(--marco);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1.5vw;
  background: var(--blanco);
}

.menu__nav { display: flex; gap: clamp(2rem, 5.2vw, 6rem); }

.menu__nav a {
  font-size: clamp(.65rem, .75vw, .9rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.menu__nav a:hover { text-decoration: line-through; text-decoration-thickness: .08em; }   /* tachado instantáneo, como el resto de los enlaces */

.lateral {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--marco);
  z-index: 30;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--marco) * .25);
  gap: calc(var(--marco) * .18);
}

.lateral__logo img { width: calc(var(--marco) * .36); height: auto; }

/* Logos en negro (el archivo original es rojo). Para volver al color, borra esta regla. */
.lateral__logo img, .footer__logo { filter: brightness(0); }

/* Nombre "Espora" en vertical: imagen (imagenes/global/logo-espora-nombre.webp) */
.lateral__nombre {
  width: calc(var(--marco) * .3);
  height: auto;
}

/* El contenido queda enmarcado por menú y barra lateral */
.contenido {
  margin-right: var(--marco);
  padding-top: var(--marco);
}

/* Al navegar por el menú, la sección queda justo bajo el menú fijo */
section[id] { scroll-margin-top: var(--marco); }

/* =====================================================================
   RESPONSIVO · MENÚ BURGER (móvil, hasta 767 px)
   En escritorio el botón no se ve y nada cambia.
   ===================================================================== */
.menu__burger { display: none; }

@media (max-width: 767px) {
  .menu { justify-content: flex-start; padding: 0; }

  .menu__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: var(--marco);
    height: var(--marco);
    padding: 0 calc(var(--marco) * .28);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .menu__burger span {
    display: block;
    height: 2px;
    background: var(--negro);
    transition: transform .2s, opacity .2s;
  }
  .menu--abierto .menu__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu--abierto .menu__burger span:nth-child(2) { opacity: 0; }
  .menu--abierto .menu__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Lista desplegable bajo la barra */
  .menu__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--blanco);
    border-top: 1px solid var(--gris-fondo);
  }
  .menu--abierto .menu__nav { display: flex; }
  .menu__nav a {
    padding: 1.1rem calc(var(--marco) * .28);
    font-size: .8rem;
    border-bottom: 1px solid var(--gris-fondo);
  }
}