.hamburger {
  width: 36px;
  height: 36px;
  transform: 0.2s;
  position: relative;
}

.hamburger svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hamburger .checkbox {
  position: absolute;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.line {
  transition: 0.5s;
  stroke-width: 6px;
  stroke: black;
}
.lineTop {
  stroke-dasharray: 40 40;
  stroke-dashoffset: 25;
}
.lineBottom {
  stroke-dasharray: 40 40;
  stroke-dashoffset: 60;
}
.lineMid {
  stroke-dasharray: 40 40;
}

/* Barra oscura al inicio: líneas claras. Tras scroll: barra cristal oscuro → mismas líneas claras. */
.navbar-b:not(.navbar-reduce) .hamburger .line {
  stroke: #ffffff;
}
.navbar-b.navbar-reduce .hamburger .line {
  stroke: #ffffff;
}

.hamburger .checkbox:checked + svg .line {
  stroke: crimson;
}
.hamburger .checkbox:checked + svg .lineTop {
  stroke-dashoffset: 0;
  transform-origin: left;
  transform: rotateZ(45deg) translate(-5px, -4px);
}
.hamburger .checkbox:checked + svg .lineMid {
  stroke-dashoffset: 40;
}
.hamburger .checkbox:checked + svg .lineBottom {
  stroke-dashoffset: 0;
  transform-origin: left;
  transform: rotateZ(-45deg) translate(-4px, 4px);
}

/* Integración mínima: el toggler de Bootstrap no debe enmarcar el icono (36×36) */
.navbar-b .navbar-toggler {
  border: 0;
  padding: 0;
  background-color: transparent;
}