/* ============================================================
   ADOS Presupuesto — tira de secciones de móvil (aspecto)
   Pareja de secciones.js. Aquí se dice CÓMO se ve la tira; el JS
   decide QUÉ va dentro y la construye a partir del menú que ya
   existe en la cabecera.

   El problema que resuelve: por debajo de 900 px, .nav-links está en
   display:none — los cuatro enlaces no caben junto al logo y al botón
   de Comprar —, así que desde un teléfono no había forma de saltar
   dentro de la página. Había que deslizar 11.000 px para llegar a
   Comprar.

   TODO lo de este archivo vive dentro de la consulta de 900 px. Por
   encima no hay ni una regla, así que el escritorio queda intacto
   aunque el nodo se quedara puesto por lo que fuera.
   ============================================================ */

@media (max-width: 900px) {

  /* ----------------------------------------------------------
     La tira.

     Va dentro de <header>, que ya es sticky: no hace falta pegarla
     por separado, baja con la cabecera y se queda arriba igual que
     ella. El fondo tampoco se repite — el translúcido con desenfoque
     es el de la cabecera y esto está dentro.
     ---------------------------------------------------------- */
  .tira-secciones {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 32px 8px 32px;
    border-top: 1px solid var(--border-light);

    /* El gesto. Igual que los 28 carruseles del sitio: se arrastra en
       horizontal, sin barra a la vista y con imán suave para que un
       chip no quede cortado por la mitad al soltar. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tira-secciones::-webkit-scrollbar { display: none; }

  /* ----------------------------------------------------------
     Los chips.

     Son enlaces de verdad (<a href="#etapas">), no botones con JS
     encima: funcionan con el teclado, se pueden abrir en otra pestaña
     y si el JS no llegara a cargar seguirían llevando a su sitio.
     ---------------------------------------------------------- */
  .tira-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;

    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--ados-light);

    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ados-ink-soft);
    text-decoration: none;
    white-space: nowrap;

    transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1),
                border-color 160ms cubic-bezier(0.2, 0, 0, 1),
                color 160ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* El sitio pone `a:hover { color: #E7A11E }` para toda la página.
     En un chip relleno de tinta eso dejaría el texto ámbar sobre
     navy, que no se lee: se le gana con el mismo peso de selector. */
  .tira-chip:hover { color: var(--ados-ink); }

  /* La sección en la que se está. aria-current no es decoración: es
     lo que le dice a un lector de pantalla dónde está el visitante
     dentro de la página, y de paso nos sirve de gancho de estilo. */
  .tira-chip[aria-current="true"],
  .tira-chip[aria-current="true"]:hover {
    background: var(--ados-ink);
    border-color: var(--ados-ink);
    color: var(--ados-white);
    font-weight: 600;
  }

  /* Comprar. Es el destino que importa, así que va en ámbar desde el
     principio — no espera a que se llegue a él. El tono apagado del
     reposo es para que llame sin gritar; al llegar a la sección se
     enciende del todo. */
  .tira-chip--destino {
    background: rgba(249, 178, 51, 0.14);
    border-color: rgba(249, 178, 51, 0.45);
    color: #8A6A16;
    font-weight: 600;
  }
  .tira-chip--destino:hover { color: #6F5411; }

  .tira-chip--destino[aria-current="true"],
  .tira-chip--destino[aria-current="true"]:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }

  .tira-chip:focus-visible {
    outline: 2px solid var(--ados-ink);
    outline-offset: 2px;
  }

  /* ----------------------------------------------------------
     Dónde aterrizan los anclajes.

     La cabecera es sticky y ahora mide más, así que sin esto el
     titular de la sección quedaría escondido debajo. --ados-sticky lo
     mide secciones.js con la altura real de la cabecera, que cambia
     al girar el teléfono; el valor de reserva es por si el JS no
     llegó a correr.
     ---------------------------------------------------------- */
  [id] {
    scroll-margin-top: calc(var(--ados-sticky, 112px) + 14px);
  }

  /* Y los tres que ya tenían dueño. contacto.css fija 80px para los
     anclajes de la compra — la altura de la cabecera de escritorio —,
     lo hace con especificidad de id y además se carga después de este
     archivo, así que la regla de arriba perdía y «Comprar» aterrizaba
     34 px por debajo de la cabecera, con el titular tapado. Aquí no
     hay más remedio que el !important; en el escritorio no cambia
     nada, porque todo esto vive dentro de la consulta de 900 px. */
  #comprar, #contacto, #form-compra {
    scroll-margin-top: calc(var(--ados-sticky, 112px) + 14px) !important;
  }

  /* ----------------------------------------------------------
     Teléfono estrecho. La cabecera baja a 20 px de margen a los 560
     (regla `header > div` del propio index.html, que no alcanza a un
     <nav>); los chips se alinean con ella para que la tira arranque a
     plomo con el logo.
     ---------------------------------------------------------- */
  @media (max-width: 560px) {
    .tira-secciones {
      padding-left: 20px;
      padding-right: 20px;
      gap: 5px;
    }
    .tira-chip { font-size: 12.5px; padding: 6px 12px; }
  }

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