/* ==================================================================
   CUERPO DE BOMBEROS — hoja exclusiva de la página
   ------------------------------------------------------------------
   ALCANCE
   Todo cuelga de `#equipos`, la banda oscura que describe los medios
   del cuartel. Ninguna regla toca la sección institucional ni la
   galería, que siguen resolviéndose solo con css/style.css.

   POR QUÉ HACE FALTA
   1. css/style.css pinta `.unit-code` con `--rojo` (#CE2B37). Sobre la
      card oscura (#22262A) eso da 2.92:1 y no alcanza el mínimo AA.
      El sistema ya tiene `--rojo-texto-oscuro` (#FF6572) para fondos
      oscuros: 5.33:1 sobre la misma card.
   2. El reset global es `a { color: inherit; text-decoration: none }`.
      Por diseño, un link escrito dentro de un párrafo queda idéntico al
      texto corrido, así que hay que devolverle la marca de link.
   3. Separación y radio para la foto de unidad que abre cada card.
   ================================================================== */

/* --- Código de unidad sobre card oscura --- */
#equipos .roster-card .unit-code {
  color: var(--rojo-texto-oscuro);
}

/* --- Links dentro de la prosa de la banda --- */
#equipos .equipos-prose a {
  color: var(--rojo-texto-oscuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

#equipos .equipos-prose a:hover {
  text-decoration-thickness: 2px;
}

/* El foco global de css/evolucion-v6.css usa `--rojo` sobre fondo oscuro
   (3.24:1, al límite de SC 1.4.11). Con `--rojo-texto-oscuro` sube a
   5.93:1 y además coincide con el color del link, así que el anillo se
   lee como parte del enlace y no como un borde suelto. */
#equipos .equipos-prose a:focus-visible {
  outline-color: var(--rojo-texto-oscuro);
}

/* --- Foto de unidad dentro de la card ---
   Se reusa `.unit-photo-wrap` de css/style.css: ya trae aspect-ratio 16/10,
   object-fit cover y fondo de carga, así que no hay que redefinir la caja.
   Sus overlays de hover quedan inertes porque cuelgan de `.unit-card:hover`,
   que esta grilla no tiene. Acá solo hacen falta dos cosas: separarla del
   chip de unidad y darle el radio, porque la foto va inset dentro del
   padding de la card y no al ras como en autobombas.html. */
#equipos .roster-card .unit-photo-wrap {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
}