/* ============================================================
   sucursales.css — tarjetas de las dos clínicas
   ============================================================ */

.sucursales-grid {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.sucursal {
  background: var(--color-superficie-alta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sucursal-mapa {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

.sucursal-mapa-pendiente {
  height: 260px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(-45deg,
    var(--color-superficie-suave) 0 14px, var(--color-franja) 14px 28px);
}

.sucursal-mapa-pendiente p {
  font-family: var(--font-titular);
  font-style: italic;
  font-size: var(--txt-md);
  color: var(--color-texto-secundario);
  margin: 0;
}

.sucursal-cuerpo {
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  flex: 1;
}

.sucursal-nombre {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: var(--txt-md);
  margin: 0;
}

.sucursal-ciudad {
  font-size: var(--txt-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
  margin: 0;
}

.sucursal-datos {
  display: grid;
  gap: var(--esp-1);
  margin: var(--esp-1) 0;
  padding-top: var(--esp-2);
  border-top: 1px solid var(--color-borde);
  flex: 1;
}

.sucursal-datos dt {
  font-size: var(--txt-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

.sucursal-datos dd { margin: 2px 0 0; font-weight: var(--peso-ligero); }

.sucursal-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

/* Las dos acciones dejan de competir: WhatsApp es el botón sólido y
   «Cómo llegar» un enlace con flecha, como pidió el documento. */
.sucursal-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-texto-secundario);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
}

.enlace-flecha:hover { color: var(--color-acento-oscuro); }