/* Base común del sitio: cada página trae su propio diseño en línea. Aquí solo lo que la sonda exige a todas. */
.saltar { position: absolute; left: -9999px; z-index: 100; background: #F2F2F2; color: #0A0A0A; padding: 12px 16px; min-height: 44px; box-sizing: border-box; border-radius: 8px; }
.saltar:focus { left: 16px; top: 16px; }
/* reduced-motion como puerta global (c0942): sin animación, todo se lee */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Páginas de producto (22-oct, Angel: «dentro de cada pestaña… debería de poder accederse a las otras opciones de servicio»).
   Las pone tools/arma-sitio.py desde una sola lista. Arriba: «← Átomos» y los productos, el actual marcado (aria-current);
   en el teléfono los productos bajan a su propio renglón, todos a la vista (deslizarlos escondía el actual). Al final: los otros productos, como el catálogo de la portada. */
.barra-productos { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra-productos .volver { flex: none; margin-right: 8px; }
.barra-productos ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.barra-productos ul a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 99px; white-space: nowrap;
  font: 500 13px var(--sans); color: #9A9A9A; text-decoration: none; }
.barra-productos ul a:hover { color: #F2F2F2; }
.barra-productos ul a[aria-current="page"] { color: #F2F2F2; background: #1A1A1A; }
@media (max-width: 760px) {
  .barra-productos { flex-wrap: wrap; row-gap: 0; }
  .barra-productos ul { flex-wrap: wrap; overflow-x: visible; margin-left: -8px; }
  .barra-productos ul a { padding: 0 8px; }
}
.barra-productos i, .otros-productos i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.otros-productos h2 { margin-bottom: 28px; }
.otros-productos ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #222; }
.otros-productos li > a, .otros-productos .sin-pagina { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid #222;
  min-height: 44px; color: #F2F2F2; text-decoration: none; }
.otros-productos li > a::after { content: "→"; margin-left: auto; color: #9A9A9A; }
.otros-productos li > a:hover::after { color: #F2F2F2; }
.otros-productos span { display: grid; gap: 4px; }
.otros-productos strong { font-weight: 500; font-size: 17px; }
.otros-productos small { color: #9A9A9A; font-size: 15px; }
.otros-productos .sin-pagina { color: #9A9A9A; }