/* Agencia López · menú del móvil (25-10, Dani + Claude). En ≤980 px la barra esconde .barra__nav y deja la
 * hamburguesa: con .abierta (menu-movil.js) los mismos enlaces salen en una tarjeta azul debajo de su barra,
 * y las dos rayas hacen una X. */
@media (max-width: 980px) {
  .barra.abierta .barra__nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: var(--borde); right: var(--borde); padding: 6px 22px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); color: var(--texto); box-shadow: 0 24px 60px -20px rgba(7, 12, 21, .55); font: 300 1.45rem/1.2 var(--serif); }
  .barra.abierta .barra__nav a { padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .barra.abierta .barra__nav a:last-child { border-bottom: 0; }
  .barra.abierta .barra__nav a::after { display: none; }
  .barra__menu i { transition: transform .5s var(--ease); }
  .barra.abierta .barra__menu i:first-child { transform: translateY(3.75px) rotate(45deg); }
  .barra.abierta .barra__menu i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}