/* Los puntos de los carruseles
 *
 * Estaba EN LINEA dentro de templates/_tags_.php, o sea que viajaba entero
 * en el HTML de todas las paginas y en todas las visitas. Aqui el navegador
 * lo guarda una vez: la regla de cache de .htaccess da un ano a los .css y .js.
 *
 * Se movio tal cual, sin tocar una linea. Si hay que cambiarlo, se cambia aqui.
 */
/* Miga de pan.
   Estas reglas vivian en templates/partials/breadcrumb.php, dentro de #root, y
   no llegaban a aplicarse: Vue monta ahi y al compilar ese subarbol descarta
   los <style> que encuentra dentro. Comprobado en el navegador: el <style>
   venia en el HTML pero no existia en el DOM, y la miga salia como una lista
   numerada. Aqui, en el <head>, esta fuera del alcance de Vue.

   Discreta a proposito: informa de donde estas, no compite con el contenido. */
.breadcrumb-8888 ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  list-style: none;
  margin: 0;
  padding: .85rem 0;
  font-size: .82rem;
}
.breadcrumb-8888 li { display: inline-flex; align-items: center; gap: .5rem; }
/* El separador va en el ::before del hermano, no como texto suelto, para que
   no lo lea un lector de pantalla ni se copie al seleccionar. */
.breadcrumb-8888 li + li::before { content: "\203A"; opacity: .4; }
.breadcrumb-8888 a { color: inherit; opacity: .65; text-decoration: none; }
.breadcrumb-8888 a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb-8888 [aria-current="page"] { opacity: 1; font-weight: 600; }

/* Puntos de los carruseles.
   Sin ellos no se ve que la fila se puede recorrer: en un raton sin rueda
   horizontal y en pantallas anchas, donde caben cuatro tarjetas y no se
   intuye que hay mas detras, el resto del contenido era invisible. */
.oh-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 14px 0 4px;
  line-height: 0;
}
.oh-slider-dots__dot {
  /* !important en el tamano: hay una regla global de button que impone
     height 40px y display flex, y ganaba. Medido: el punto salia de 8x40,
     o sea una barra vertical en vez de un circulo. */
  width: 8px !important;
  height: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto;
  display: block !important;
  padding: 0 !important;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: .28;
  cursor: pointer;
  transition: opacity .2s ease, width .2s ease, height .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.oh-slider-dots__dot:hover { opacity: .55; }
.oh-slider-dots__dot[aria-current="true"] {
  opacity: 1;
  /* El activo es un circulo mas grande, no una pildora alargada: se distingue
     por tamano y opacidad sin dejar de ser redondo.
     Los !important son necesarios porque la regla base los lleva, para ganarle
     a la regla global de button que impone height 40px. */
  width: 12px !important;
  height: 12px !important;
}
@media (prefers-reduced-motion: reduce) {
  .oh-slider-dots__dot { transition: none; }
}
