/* Estilos exclusivos de las páginas de ciudad (ciudades/*.html). Comparten
   hero, migas, buscador y tarjetas de despacho con las páginas de
   departamento vía assets/cobertura.css y assets/departamento.css -- esto
   es solo lo que no existe ahí: el desglose por especialidad, el correo
   dentro de cada tarjeta y la nota final que explica los tres estados de
   cobertura. */

.ciudad-esp-wrap{max-width:820px;margin:0 auto}
.ciudad-esp-title{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px}
.ciudad-esp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:8px}
.ciudad-esp-item{display:flex;align-items:baseline;gap:8px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px}
.ciudad-esp-count{font-size:18px;font-weight:700;color:var(--indigo-bright);letter-spacing:-.02em}
.ciudad-esp-name{font-size:12.5px;color:var(--muted)}

/* El correo es una pieza más de .dep-item-meta (definida en
   departamento.css): hereda el separador "·" que ya aplica a cualquier
   hijo, así que no hace falta repetirlo aquí. Se corta con ellipsis en
   vez de partirse en dos líneas dentro de la tarjeta angosta. */
.dep-item-email{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Nombre del despacho como enlace, solo cuando existe su página propia
   (hoy, únicamente en Manizales) -- mismo color y peso que el resto del
   nombre, subrayado solo al pasar el cursor para no parecer un enlace
   perdido en medio de la tarjeta. */
.dep-item-link{color:inherit;text-decoration:none}
.dep-item-link:hover{text-decoration:underline;color:var(--indigo-bright)}

.cob-note-final{max-width:820px;margin:24px auto 0;padding:16px 4px 0;
  border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);line-height:1.7}
.cob-note-final strong{color:var(--ink);font-weight:600}

@media (max-width:640px){
  .ciudad-esp-grid{grid-template-columns:repeat(2,1fr)}
}