/* barra.css · v8.5 · LA BARRA DE SECCIONES (Nicolás, 22-sep 20:25: «arriba tener botones de las secciones de
   página para no obligarlos a la experiencia siempre»). Vive dentro de nav#linea (linea.css): el logo a la
   izquierda, el WhatsApp a la derecha y, en el medio, nav.secciones > ul > li > a[href="#…"]. La mueve barra.js.
   · Ancho (≥ 1240 px): los botones en la MISMA barra, centrados en la pantalla. #linea pasa de flex a grid
     1fr · auto · 1fr para centrarlos sin correr ni el logo ni el WhatsApp (con flex quedaban 60 px a la izquierda
     porque el WhatsApp es más ancho que el logo). Debajo de 1240 los 9 botones no caben entre los dos
     (v8.6, 23-sep: con «Lo que hace» el noveno se montaba sobre el WhatsApp entre 1180 y 1239; doc 102 §5.1 c).
   · Angosto (≤ 1239 px, teléfono incluido): una segunda fila de botones debajo de la barra, que se desliza de lado.
     OJO INTEGRADOR: eso sube la barra de 62 a 104 px y por eso --nav pasa a 104px aquí mismo (abajo). --nav es
     «lo que ocupa lo pegado arriba»: con él se corren el hero (margin-top), el escenario pegado del vagón
     (top y alto), la pantalla grande de metro.js (lo lee con getComputedStyle y parseFloat: tiene que ser un
     número en px, nunca un calc) y scroll-margin. Va aquí y no en tokens.css porque tokens.css no lleva ?v= y
     Cloudflare lo tendría 4 h viejo: la fila y su alto tienen que llegar juntos.
   · La barra queda por ENCIMA de la pantalla grande del viaje (z 100): sin eso, en el teléfono cada estación la
     tapaba y para salir del viaje había que cerrar el video primero. La grande ya se acomoda debajo de --nav.
   Tokens de tokens.css. Sin vh. */

#linea{z-index:calc(var(--z-dialog) + 1)}
body:has(#viaje.con-grande) #linea .mapa-v{opacity:.3}

#linea .secciones{min-width:0}
#linea .secciones ul{display:flex;gap:2px;width:max-content;margin:0 auto;padding:0;list-style:none}
#linea .secciones li[hidden]{display:none}
#linea .secciones a{display:block;padding:7px 12px;border-radius:999px;white-space:nowrap;text-decoration:none;
  font:500 14px/1.2 var(--f-titulo);letter-spacing:.01em;color:rgba(247,241,230,.74);
  transition:color .16s var(--cromo),background-color .16s var(--cromo),box-shadow .16s var(--cromo)}
#linea .secciones a:hover{color:var(--tinta);background:rgba(143,163,173,.14)}
#linea .secciones a[aria-current]{color:var(--tinta);background:rgba(242,160,179,.14);box-shadow:inset 0 0 0 1px rgba(242,160,179,.5)}
#linea .secciones a:focus-visible{outline-offset:1px;border-radius:999px}

/* ── ancho: una sola barra, los botones centrados en la pantalla ── */
@media(min-width:1240px){
  #linea{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr);column-gap:16px}
  #linea .marca{justify-self:start}
  #linea .wa{justify-self:end;margin-left:0}
}

/* ── angosto: la segunda fila, de borde a borde, que se desliza de lado ── */
@media(max-width:1239px){
  :root{--nav:104px}
  #linea{flex-wrap:wrap;align-content:flex-start;row-gap:0}
  #linea .marca{min-height:62px}
  #linea .mapa-h{flex:1 1 0}   /* con wrap, su base «auto» (el ancho del SVG) mandaba el WhatsApp a otra línea */
  #linea .secciones{order:9;flex:0 0 calc(100% + 2 * var(--canal));height:42px;margin:0 calc(-1 * var(--canal));
    display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    overscroll-behavior-x:contain;touch-action:pan-x pinch-zoom;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--canal),#000 calc(100% - var(--canal)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--canal),#000 calc(100% - var(--canal)),transparent)}
  #linea .secciones::-webkit-scrollbar{display:none}
  #linea .secciones ul{gap:6px;padding:0 var(--canal)}
  /* fichas: se leen como botones y la que queda cortada en el borde dice que la fila sigue */
  #linea .secciones a{padding:7px 13px;background:rgba(143,163,173,.13)}
}

/* sin JS los botones son anclas: la sección cae debajo de la barra y no escondida detrás */
body>section[id],body>header[id],body>footer[id]{scroll-margin-top:var(--nav)}
/* y el salto sin JS va de una: con el smooth de base.css el destino se fija al arrancar y #cifras
   (content-visibility:auto) cambia de alto en el camino: Planes caía 170 px corrido, con el título tapado */
@media(scripting:none){html{scroll-behavior:auto}}
[data-foco-barra]:focus{outline:none}

@media(prefers-reduced-motion:reduce){#linea .secciones a{transition:none}}